Powerful JavaScript Shorthands That You Should Know

JavaScript has a lot of powerful features and tools that make the life of the developer much easier. The syntax contains a lot of shorthands that you can use to write JavaScript code much faster and reduce lines. Especially in the latest ECMAScript specifications.

Convert string to a number
Normally, to convert a string to a number, we use the method parseInt() . However, there is a shorthand that allows us to do that.
By using the unary operator + , we can easily convert a string into a number.
Here is an example:

let speed = "60";
console.log(typeof speed); //string
console.log(typeof +speed); //number
console.log(+speed); //60, not "60".

As you can see, only by adding + at the beginning of the variable speed , we were able to convert the speed to a number.
There is also another shorthand to convert from a number into a string. It’s by simply adding an empty string to the number.
Here is an example:

let speed = 100;
speed += ""; //returns "100" , not 100.
console.log(typeof speed); //string

Using the ternary operator
Another shorthand is the ternary operator, it allows us to easily write conditional statements in a short way using the keywords ? and :
Here is an example using IF else statements:
Longhand:

let speed = 80;
if(speed < 30){
 console.log('slow');
}else if(speed > 60){
 console.log('fast');
}else{
 console.log('between 30 and 60');
}
//output: fast

Here is the same example, but now using the ternary operator instead:
Shorthand:

let speed = 80;
console.log(speed < 30 ? 'slow': speed > 60 ? 'fast'
: 'between 30 & 60');
//output: fast

As you can see, by using the ternary operator shorthand, we were able to easily reduce the amount of code we had to write. It only took us 2 lines of code to write the conditional statements.

Short-circuit evaluation
Have a look at the below example using an IF statement.
Longhand:

let isOnline = true;
if(isOnline){
 console.log("Online");
}
//returns "online"

We can write the same statement using the short circuit && . Here is the example:
Shorthand:

let isOnline = true;
isOnline && console.log("Online");
//returns "online"

The short circuit evaluation && is one of the shorthands that allow you to write short conditionals. It’s used between two values, if the first value is truthy, it returns the second value. Otherwise, it returns the first value.

Flattening an array
The best shorthand to flatten a multidimensional array is by using the method flat() . I have seen, a lot of developers use the method filter, concat, and all other long ways to flatten an array. Maybe because they don’t know about the flat method yet.

So this amazing method allows you to flatten an array in one single line of code. It accepts one optional argument(number), which is the level of flattening(how deep you want to flatten an array).

Here is an example:

let numbers = [9, [102, 5], [6, 3], 2];
numbers.flat(); //returns [9, 102, 5, 6, 3, 2]

Merging and cloning arrays
When it comes to merging and cloning arrays in JavaScript, the spread operator {…} is the best shorthand you can use.
Merging arrays:

const employees = ["Chris", "John"];
const entrepreneurs = ["James", "Anna"];
//merging both arrays to a new array.
const all = [...employees, ...entrepreneurs];
console.log(all); //output: ["Chris", "John", "James", "Anna"]

Cloning an array:

const numbers = [4, 8, 9, 0];
//cloning the numbers array.
const clone = [...numbers];
console.log(clone); //output: [4, 8, 9, 0]

For loop shorthand
Mostly when we want to loop through an array using a for loop, we do it like this:
Longhand:

const users = ["John", "Chris", "Mehdi", "James"];
for(let i = 0; i < users.length; i++){
   console.log(users[i]);
}

/*output:
   John
   Chris
   Mehdi
   James
*/

But we can achieve the same thing using the loop for of shorthand:
Shorthand:

const users = ["John", "Chris", "Mehdi", "James"];

for (let user of users){
  console.log(user);
}
/*output:
   John
   Chris
   Mehdi
   James*/

Arrow functions
Arrow functions are a shorthand that allows you to easily write functions in a short way and reduce your code.
Here are the examples:
Normal function:

function addNums(x, y){
 return x + y;
}
addNums(6, 5); //11

Arrow function:
const addNums = (x, y)=> x + y;
addNums(6, 5); //11

Conclusion
As you can see, these are some of the popular shorthands that you can use in JavaScript. They allow you to reduce code syntax and keep your code short as much as you can.
Thank you for reading this article. I hope you found it useful.