10+ JavaScript Shorthand Techniques that will save your time
Tags: javascript, webdev, productivity, beginners
Published: 2021-04-29 13:34:29

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
![Declaring](https://exceed-team.com/images/1716/20-javascript-shorthand-techniques-that-will-save-your-time.webp)

###2. Assigning values to multiple variables
We can assign values to multiple variables in one line with array destructuring.
![Assigning](https://exceed-team.com/images/1717/2-assigning-values-to-multiple-variables.webp)

###3. The Ternary operator
We can save 5 lines of code here with ternary (conditional) operator.
![The Ternary operator](https://exceed-team.com/images/1718/3-the-ternary-operator.webp)

###4. Assigning default value
![Assigning default value](https://exceed-team.com/images/1719/4-assigning-default-value.webp)
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.
![AND(&&) Short circuit evaluation](https://exceed-team.com/images/1720/5-and-short-circuit-evaluation.webp)
The AND(&&) short circuit shorthand is more useful in React when you want to conditionally render a component. For example:
![evaluation](https://exceed-team.com/images/1721/5-and-short-circuit-evaluation-1.webp)

###6. Swap two variables
To swap two variables, we often use a third variable. We can swap two variables easily with array destructuring assignment.
![Swap](https://exceed-team.com/images/1722/6-swap-two-variables.webp)

###7. Arrow Function
![Arrow Function](https://exceed-team.com/images/1723/7-arrow-function.webp)

###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.
![Template Literals](https://exceed-team.com/images/1724/8-template-literals.webp)

###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 (`).
![Multi-line String](https://exceed-team.com/images/1725/9-multiline-string.webp)

###10. Multiple condition checking
For multiple value matching, we can put all values in array and use indexOf() or includes() method.
![Multiple condition checking](https://exceed-team.com/images/1726/10-multiple-condition-checking.webp)

###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.
![Object Property Assignment](https://exceed-team.com/images/1727/11-object-property-assignment.webp)

###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.
![String into a Number](https://exceed-team.com/images/1728/12-string-into-a-number.webp)

###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.
![Repeat a string for multiple times](https://exceed-team.com/images/1729/13-repeat-a-string-for-multiple-times.webp)

###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 (**).
![Exponent Power](https://exceed-team.com/images/1731/14-exponent-power.webp)

###15. Double NOT bitwise operator (~~)
The double NOT bitwise operator is a substitute for Math.floor() method.
![Repeat a string for multiple times](https://exceed-team.com/images/1732/15-double-not-bitwise-operator-~~.webp
)

Some of these shorthand techniques may seem inappropriate to use in a project, but it's a good idea to know some [additional techniques](https://exceed-team.com/tech/10+-JavaScript-Shorthand-Techniques-that-will-save-your-time?s=de&a=a). Happy coding and have a nice day!