🌟20 Amazing JavaScript shorthands for ultimate productivity in 2021
Tags: webdev, javascript, programming, productivity
Published: 2021-08-04 04:11:54

  
Saving time is the necessary thing for developers when working on projects. I am sharing 20 JavaScript shorthands which you can use to save you time while coding. 

---

### Declaring variables  
You can easily declare/define multiple variables on one line. 

```javascript  
//Long version  
let a;   
let b = 1; 

//Shorthand  
let a, b = 1;  
```

### Assigning values to multiple variables

You can assign values to multiple variables with array destructuring. 

```javascript  
//Long version  
x = 1;   
y = 2;   
z = 3; 

//Shorthand  
let [x, y, z] = [1, 2, 3];   
```

### Assigning default value  
You can set default values with the `|| (OR)` operator. If the value onn the left side is falsy it will use the one on the right. 

```javascript  
let finalName;   
let name = getName();   
if(name !== null && name !== undefined && name !== '') {  
    finalName = name;   
} else {  
    finalName = 'Rahul'  
}

// Shorthand  
let finalName = getName() || 'Rahul';   
```

### The ternary operator  
You can write *if else* statements in one line using the ternary (`?:`) operator. 

```javascript  
//Long version  
let points = 70;   
let result;   
if(marks >= 50){  
    result = 'Pass';   
}else{  
    result = 'Fail';   
}

//Shorthand  
let points = 70;   
let result = marks >= 50 ? 'Pass' : 'Fail';   
```

### Template Literals  
Instead os using the + operator to concatenate strings we can use ES6 template literals. 

```javascript  
// Long version  
console.log('Hello ' + name +', it is ' + day); 

//Shorthand  
console.log(`Hello ${name}, it is ${day}`);   
```

### Swap two variables  
With arraw destructuring you can swap two variables without using a third one. 

```javascript  
let x = 1, y = 2;   
//Long version  
const temp = x;   
x = y;   
y = temp; 

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

### AND(&&) Short circuit evaluation  
You can use the `&&` operator if you want to execute a function if a variable is true. 

```javascript  
// Long version  
if (isLoggedin) {   
    redirectToHomepage();   
}

//Shorthand  
isLoggedin && redirectToHomepage();   
```

### Arrow function  
You can write shorter functions using the arrow function syntax. 

```javascript  
//Long version  
function add(a, b) {  
    return a + b;   
}

// Shorthand  
const add = (a, b) => a + b;   
```

### Multi-line string

For multiline string instead of using + operator with a new line ecape sequence (\n). We can use usebackticks(``). 

```javascript  
// Long version  
console.log('A blog is a discussion or informational website published\n' + 'on the World Wide Web consisting of discrete, often informal diary-style text entries. Posts are typically\n' + 'displayed in reverse chronological order, so that the most recent post\n' + 'appears first, at the top of the web page. Until 2009,\n' + 'blogs were usually the work of a single' ); 

//Shorthand  
console.log(`A blog is a discussion or informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries . Posts are typically displayed in reverse chronological order, so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single`);   
```

### Multiple condition checking   
When checking for multiple values, we can pull all values in an array and use `indexOf()` / `includes()` method. 

```javascript  
//Long version  
if (value === 1 || value === 'one' || value === 2 || value === 'two') {  
    //Execute code  
}

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

### String into a number  
You can convert a string to a number by writing a + operator before the string. 

```javascript  
// Long version  
let total = parseInt('45');   
let average = parseFloat('421.6'); 

//Shorthand  
let total = +'45';   
let average = +'421.6';    
```

### Object property Assignment   
If the variable name and object key name is the same, then we can just mention variable name in object literals instead of both key and value. 

```javascript  
let firstname = 'Emma';   
let lastname = 'Turner';   
//Long version  
let obj = {firstname: firstname, lastname: lastname}; 

//shorthand  
let obj = {firstname, lastname};   
```   
 
### Find max and min numbe rin array  
Instead of writing  a for loop you cna use the spread operator of `Array.reduce()`. 

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

### Exponent Power

Instead of `Math.pow()` we can use ** to find the power of a number. 

```javascript  
//Long version  
const power = Math.pow(4, 3); // 64

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

### Doouble NOT bitwise operator  
You can use the `~~` instead of `Math.floor()`. Only works for 32-bit numbers, so use it wisely. 

```javascript  
//Long version  
const floor = Math.floor(4.8); // 4

//Shorthand  
const floor = ~~4.8; // 4  
```

### Repeat a string multiple time  
Instead of a *for loop* you can use the `repeat()` stringmethod to repeat a string. 

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

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

### For loop  
We can use the **for of** or **for in** instead of a for loop. 

```javascript  
let arr = [1, 2, 3, 4];   
//Long version  
for (let i = 0; 1 < 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]);  
}  
```

### Deep clong of multi-level object  
It won't work when you have functions as values, but otherwise feel free to use it. 

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

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

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

### Get character from string

You can use `[]` operator to get a character from a string. 

```javascript  
let str = 'heelloworld';   
//Long version  
str.charAt(1); // e

//Shorthand  
str[1]; // e  
```

### Merging arrays  
Instead of using `Array.concat()` we can use the rest operator to merge arrays. 

```javascript  
let arr1 = [2, 3];   
//Long version  
let arr2 = arr1.concat([4, 5]);   
// [2, 3, 4, 5]

// Shorthand  
let arr2 = [...arr1, 4, 5];   
// [2, 3, 4, 5]  
```

---

Thanks for seeing this post if you found helpful let me know in the comments.