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;
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];
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';
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';
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}`);
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];
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();
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;
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.
Top comments (0)