DEV Community

Cover image for 🌟20 Amazing JavaScript shorthands for ultimate productivity in 2021
coderwatchHQ
coderwatchHQ

Posted on • Originally published at coderwatch.com

🌟20 Amazing JavaScript shorthands for ultimate productivity in 2021

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.

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

//Shorthand  
let a, b = 1;  
Enter fullscreen mode Exit fullscreen mode

Assigning values to multiple variables

You can assign values to multiple variables with array destructuring.

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

//Shorthand  
let [x, y, z] = [1, 2, 3];   
Enter fullscreen mode Exit fullscreen mode

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.

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

// Shorthand  
let finalName = getName() || 'Rahul';   
Enter fullscreen mode Exit fullscreen mode

The ternary operator

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

//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';   
Enter fullscreen mode Exit fullscreen mode

Template Literals

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

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

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

Swap two variables

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

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

//Shorthand  
[x, y] = [y, x];  
Enter fullscreen mode Exit fullscreen mode

AND(&&) Short circuit evaluation

You can use the && operator if you want to execute a function if a variable is true.

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

//Shorthand  
isLoggedin && redirectToHomepage();   
Enter fullscreen mode Exit fullscreen mode

Arrow function

You can write shorter functions using the arrow function syntax.

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

// Shorthand  
const add = (a, b) => a + b;   
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)