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

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";

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;

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;

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
}

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
}

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);

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'

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"];

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! 👨‍💻🚀