DEV Community

Cover image for Useful JavaScript Shorthands
Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

Useful JavaScript Shorthands

Hello and Greetings Friends 👋

I know it's been long since I published something good and helpful about how JS is making our lives easier day by day, and how can you make it even in a more efficient way.

Let's Start

let's start

Declaring Variables

I've demonstrated how to declare multiple variables in a single line using the shorthand notation. This can help reduce redundancy and improve code readability.

//longhand
let a;
let b;
let c="1";

//shorthand
let a, b, c="1";
Enter fullscreen mode Exit fullscreen mode

Ternary Operators

Ternary operators are a concise way to assign values based on a condition. This example shows how to use them to simplify conditional assignments.

//longhand
let num;
if(a > 99) {
     num = true;
} else {
     num = false;
}

//shorthand
let num = a > 99 ? true : false;
Enter fullscreen mode Exit fullscreen mode

Assignment Operators

The shorthand assignment operators (+= and -=) are more compact ways to update variable values based on their current values.

//longhand
a = a + b;
a = a - b;

//shorthand
a += b;
a -= b;
Enter fullscreen mode Exit fullscreen mode

Switch Case

I've provided an example of using an object to map cases in a switch statement. This can make the code cleaner and easier to maintain, especially when there are many cases.

//longhand
switch (something) {
     case 1:
          doSomething();
     break;
     case 2:
          doSomethingElse();
     break;
}

//shorthand
var cases = {
     1: doSomething,
     2: doSomethingElse
}
Enter fullscreen mode Exit fullscreen mode

If Presence

Utilizing the truthiness of a boolean condition to shorten the if statement is a neat trick to make your code more succinct.

//longhand
if (boolean === true) {
     // Your Code Goes Here
}

//shorthand
if (boolean) {
     // Your Code Goes Here
}
Enter fullscreen mode Exit fullscreen mode

Arrow Functions

Arrow functions are a modern way to define functions with a more compact syntax. This example illustrates how to convert a traditional function to an arrow function.

//longhand
function helloWorld(firstName){
     console.log('Ciao', firstName);
}

//shorthand
helloWorld = firstName => console.log('Ciao', firstName);
Enter fullscreen mode Exit fullscreen mode

charAt()

I've shown how to use the shorthand notation to access characters in a string using index notation.

//longhand
"name".charAt(3); // Output => 'e'

//shorthand
"name"[3]; // Output => 'e'
Enter fullscreen mode Exit fullscreen mode

Object Array Notation

Using array literals to initialize arrays is more concise than using the new Array() constructor.

//longhand
let array1 = new Array();
array1[0] = "firstName";
array1[1] = "secondName";
array1[2] = "thirdName";
array1[3] = "lastName";

//shorthand
let array1 = ["firstName", "secondName", "thirdName", "lastName"];
Enter fullscreen mode Exit fullscreen mode

end

Finally, using these effective JavaScript coding practices will greatly speed up your development process and improve the readability of your code. You improve the elegance of your scripts as well as the general maintainability of your projects by using simple syntax.

JavaScript is still a flexible tool that allows us to build dynamic and interactive web apps even as technology advances. We provide the foundation for smoother and more delightful user experiences by remaining up to speed with these contemporary techniques and optimizing our code.

NOTE: Keep in mind that the field of programming is always changing, and the search for new methods is continuing.

Happy coding, and may your endeavors in the realm of JavaScript be both productive and rewarding! 👨‍💻🚀

See you soon

Top comments (5)

Collapse
 
oculus42 profile image
Samuel Rouse

This is a nice collection of ways to simplify code! 👏

I would recommend against the variable declaration shorthand, though. It might save a few characters but it can make code harder to maintain over time.

Placing each declaration on a separate line makes them:

  • All at the same depth, so they are easy to scan quickly.
  • Unaffected if you add or remove other variables.

For me, the most impact over time was how it makes version control history much easier to follow. An editor or plugin – like GitLens in VS Code – lets you see the different commit times and messages. When two pieces of logic share a line it takes more effort to track down the timing and reason that code or change was introduced.

This matters more on larger projects with many contributors, but I've found it useful when returning to side projects of my own after some time.

Cheers!

Collapse
 
ant_f_dev profile image
Anthony Fung

Completely agree - having multiple variables on the same line can cause the 'Blame' log to become misleading at first glance because only one message is displayed for each line.

Collapse
 
jai7503556364 profile image
Jai Kumar

👏 Such a comprehensive rundown of JavaScript shorthands! Your article brilliantly simplifies coding techniques and underscores their impact on development speed and code elegance. The insights you've shared are not only enriching but also resonate with developers at all levels.

If you're intrigued by JavaScript and CSS tips, don't miss the gems on my Medium profile here. Happy coding and exploring! 🚀📚 #CodeSimplicity #JavaScriptMagic

Collapse
 
munsif_razaa profile image
Munsif Raza

Thank you for sharing this

Collapse
 
ant_f_dev profile image
Anthony Fung

Nice writeup - thanks for sharing!

One more thing about arrow functions - in addition to making functions look a bit tidier, they create closures around variables too.