10+ JavaScript Shorthand Techniques that will save your time

The shorthand techniques of any programming language help you to write more clean and optimized code and lets you achieve your goal with less coding. Let’s discuss some of the shorthand techniques of JavaScript one by one.

1. Declaring variables

10 javascript shorthand techniques that will save your time

2. Assigning values to multiple variables

We can assign values to multiple variables in one line with array destructuring.
2 assigning values to multiple variables

3. The Ternary operator

We can save 5 lines of code here with ternary (conditional) operator.
3 the ternary operator

4. Assigning default value

4 assigning default value
We can use OR(||) short circuit evaluation to assign a default value to a variable in case the expected value found falsy.

5. AND(&&) Short circuit evaluation

If you are calling a function only if a variable is true, then you can use AND(&&) short circuit as an alternative for this.
5 and short circuit evaluation
The AND(&&) short circuit shorthand is more useful in React when you want to conditionally render a component. For example:
5 and short circuit evaluation 1

6. Swap two variables

To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.
6 swap two variables

7. Arrow Function

7 arrow function
Reference: JavaScript Arrow function

8. Template Literals

We normally use + operator to concatenate string values with variables. With ES6 template literals we can do it in a more simple way.
8 template literals

9. Multi-line String

For multiline string we normally use + operator with a new line escape sequence (\n). We can do it in an easier way by using backticks (`).
9 multiline string

10. Multiple condition checking

For multiple value matching, we can put all values in array and use indexOf() or includes() method.
10 multiple condition checking

11. Object Property Assignment

If the variable name and object key name is same then we can just mention variable name in object literals instead of both key and value. JavaScript will automatically set the key same as variable name and assign the value as variable value.
11 object property assignment

12. String into a Number

There are built in methods like parseInt and parseFloat available to convert a string to number. We can also do this by simply providing a unary operator (+) in front of string value.
12 string into a number

13. Repeat a string for multiple times

To repeat a string for a specified number of time you can use a for loop. But using the repeat() method we can do it in a single line.
13 repeat a string for multiple times

14. Exponent Power

We can use Math.pow() method to find the power of a number. There is a shorter syntax to do it with double asterik (**).
14 exponent power

15. Double NOT bitwise operator (~~)

The double NOT bitwise operator is a substitute for Math.floor() method.
15 double not bitwise operator ~~

16. Find max and min number in array

We can use for loop to loop through each value of array and find the max or min value. We can also use the Array.reduce() method to find the max and min number in array. But using spread operator we can do it in a single line.
16 find max and min number in array

17. For loop

To loop through an array we normally use the traditional for loop. We can make use of the for...of loop to iterate through arrays. To access the index of each value we can use for...in loop.
17 for loop
We can also loop through object properties using for...in loop.
17 for loop 1
Reference: Different ways to iterate through objects and arrays in JavaScript

18. Merging of arrays

18 merging of arrays

19. Deep cloning of multi-level object

To deep clone a multi-level object, we can iterate through each property and check if the current property contains an object. If yes, then do a recursive call to the same function by passing the current property value (i.e. the nested object). We can also do it by using JSON.stringify() and JSON.parse() if our object doesn't contains functions, undefined, NaN or Date as values. If we have single level object i.e no nested object present, then we can deep clone using spread operator also.
19 deep cloning of multilevel object

20. Get character from string

20 get character from string
Some of these shorthand techniques may seem inappropriate to use in a project, but it's a good idea to know some additional techniques. Happy coding and have a nice day!
Popular articles