Top 20 JavaScript Shorthand Techniques that will save your time

The shorthand techniques of any programming language help you to write more clean and optimized code. Shorthand techniques improve readability of your code and you can achieve your goal with less coding. Let’s discuss some of the shorthand techniques of JavaScript one by one. In this tutorial, you'll see Top 20 JavaScript Shorthand Techniques that will save your time

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

1. Declaring variables

//Longhand 
let x; let y = 20; 

//Shorthand 
let x, y = 20;

2. Assigning values to multiple variables

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

//Longhand 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;

//Shorthand 
let [a, b, c] = [5, 8, 12];

3. The Ternary operator

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

//Longhand 
let number = 26; 
let isEven; 
if(number % 2){
 isEven = true; 
}else{ 
 isEven = false; 
} 
//Shorthand 
let isEven = number % 2 ? true : false;

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 empty.

//Longhand 
let imagePath; 
let path = getImagePath(); 
if(path !== null && path !== undefined && path !== '') { 
  imagePath = path; 
} else { 
  imagePath = 'default.jpg'; 
} 

//Shorthand 
let imagePath = getImagePath() || 'default.jpg';

5. AND(&&) Short circuit evaluation

If you are calling a function only if a variable is true, then using AND(&&) short circuit you can do it in a single line.

//Longhand 
if (isLoggedin) {
 goToHomepage(); 
} 

//Shorthand 
isLoggedin && goToHomepage();

Here in shorthand technique, if isLoggedin returns true, then only goToHomepage() will execute.

6. Swap two variables

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

let x = 'Hello', y = 55; 

//Longhand 
const temp = x; 
x = y; 
y = temp; 

//Shorthand 
[x, y] = [y, x];

7. Arrow Function

//Longhand 
function add(num1, num2) { 
   return num1 + num2; 
} 

//Shorthand 
const add = (num1, num2) => num1 + num2;

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.

//Longhand 
console.log('You got a missed call from ' + number + ' at ' + time); 

//Shorthand 
console.log(`You got a missed call from ${number} at ${time}`);

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 (`).

//Longhand 
console.log('JavaScript, often abbreviated as JS, is a\n' +             'programming language that conforms to the \n' + 
'ECMAScript specification. JavaScript is high-level,\n' + 
'often just-in-time compiled, and multi-paradigm.' ); 
//Shorthand 
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

10. Multiple condition checking

For multiple value matching, we can put all values in array and use indexOf() method.

//Longhand 
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
// Execute some code 
} 

// Shorthand 
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { 
// Execute some code 
}

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.

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 

//Longhand 
let obj = {firstname: firstname, lastname: lastname}; 

//Shorthand 
let obj = {firstname, lastname};

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.

//Longhand 
let total = parseInt('453'); 
let average = parseFloat('42.6'); 

//Shorthand 
let total = +'453'; 
let average = +'42.6';

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.

//Longhand 
let str = ''; 
for(let i = 0; i < 5; i ++) { 
  str += 'Hello '; 
} 
console.log(str); // Hello Hello Hello Hello Hello 

// Shorthand 
'Hello '.repeat(5);

Tip: Want to apologize to someone by sending 100 times “sorry”? Try it with `repeat()_` method. If you want to repeat each string in a new line, then add `\n_`_ to the string._

'sorry\n'.repeat(100);

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 (**).

//Longhand 
const power = Math.pow(4, 3); // 64 

// Shorthand 
const power = 4**3; // 64

15. Double NOT bitwise operator (~~)

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

//Longhand 
const floor = Math.floor(6.8); // 6 

// Shorthand 
const floor = ~~6.8; // 6

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.

// Shorthand 
const arr = [2, 8, 15, 4]; 
Math.max(...arr); // 15 
Math.min(...arr); // 2

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.

let arr = [10, 20, 30, 40]; 

//Longhand 
for (let i = 0; i < arr.length; i++) { 
  console.log(arr[i]); 
} 
//Shorthand 
//for of loop 
for (const val of arr) { 
  console.log(val); 
} 
//for in loop 
for (const index in arr) { 
  console.log(arr[index]); 
}

We can also loop through object properties using for...in loop.

let obj = {x: 20, y: 50}; 
for (const key in obj) { 
  console.log(obj[key]); 
}

18. Merging of arrays

let arr1 = [20, 30]; 

//Longhand 
let arr2 = arr1.concat([60, 80]); 
// [20, 30, 60, 80] 

//Shorthand 
let arr2 = [...arr1, 60, 80]; 
// [20, 30, 60, 80]

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() in a single line.

let obj = {x: 20, y: {z: 30}}; 

//Longhand 
const makeDeepClone = (obj) => { 
  let newObject = {}; 
  Object.keys(obj).map(key => { 
    if(typeof obj[key] === 'object'){ 
      newObject[key] = makeDeepClone(obj[key]); 
    } else { 
      newObject[key] = obj[key]; 
    } 
  }); 
 return newObject; 
} 
const cloneObj = makeDeepClone(obj); 

//Shorthand 
const cloneObj = JSON.parse(JSON.stringify(obj));

20. Get character from string

let str = 'jscurious.com'; 

//Longhand 
str.charAt(2); // c 

//Shorthand 
str[2]; // c

Thanks for reading!

This article was originally published on medium.com

You may also like: ☞ Top 35 JavaScript Shorthands for Beginners

web-design web-development javascript javascript-tips

Web development is a dynamic field. With the emergence of new technologies each year, we can observe web development trends changing to a greater or lesser extent. In 2020 too, new technologies have emerged and

We are Your Design Guys... But we do much more than just web design: Custom Website Design, Website Redesign, Website Development, Online Marketing, PPC, SEO, SEM, Hosting & Webmaster Services. Get a custom web design that's not just beautiful, it's written and designed to bring in more business.

Want to know best web design software to built an awesome website? We've handpicked the top 5 web development software you should use for your project!

Skenix Infotech is a top-rated responsive website design company that provides creative responsive web design services at reasonable prices. Get in touch today!

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.