15 common JavaScript shorthand skills

Break into the world with spicy sticks in your mouth Published 14 minutes ago

1. Declare variable

let x; 
let y = 20; 
// Abbreviation
let x, y = 20;

2. Assignment of multiple variables
We can use array deconstruction to assign values to multiple variables in a row

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

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

3. Ternary operator

if(a = true){
 console.log(1);
}else{
 console.log(2);
}
// Abbreviation
a = true ?  console.log(1) :  console.log(2);

4. Assign default value
We can use the | operator to assign a default value to a variable

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

5. And operator (& &)
If you call a function only when a variable is true, you can write it in the form of the and (& &) operator

if (isLoggedin) {
 goToHomepage(); 
} 
// Abbreviation
isLoggedin && goToHomepage();

6. Swap two variables
In order to exchange two variables, we usually use the third variable. However, we can also use array deconstruction assignment to exchange two variables.

let x = 'Hello', y = "javaScript"; 
const temp = x; 
x = y; 
y = temp; 
// Abbreviation
[x, y] = [y, x];

7. Arrow function

function add(num1, num2) { 
   return num1 + num2; 
} 
// Abbreviation
const add = (num1, num2) => num1 + num2;

8. Template string
We usually use the + operator to connect string variables. Using the template string of ES6, we can do this in a simpler way.

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

9. Multi condition check
For multiple value matches, we can put all the values into the array and use the indexOf() or includes() methods.

if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
     // Execute some code 
} 
// Abbreviated method 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { // indexOf returns - 1 if there is no subscript
    // Execute some code 
}
// Abbreviated method 2
if ([1, 'one', 2, 'two'].includes(value)) { // includes returns turn / false
    // Execute some code 
}

10. Object attribute assignment
If the variable name is the same as the property name of the object, we only need to declare the variable name in the object statement, not the key and value at the same time. JavaScript automatically takes the key as the name of the variable and the value as the value of the variable.

let firstname = 'Amitav'; 
let lastname = 'Mishra'; 
let obj = {firstname: firstname, lastname: lastname}; 
// Abbreviation
let obj = {firstname, lastname}; // Shorthand attributes in es6

11. Convert string to number
In addition to using the built-in properties parseInt and parseFloat can be used to convert strings to numbers. We can also simply provide a unary operator (+) before the string to achieve this.

let total = parseInt('453');  // Integer number
let average = parseFloat('42.6');  // Floating point numbers are numbers with a decimal point
// Abbreviation
let total = +'453'; 
let average = +'42.6';

12. Repeat a string multiple times
To repeat a string N times, you can use the for loop. But with the repeat() method, we can do it in one line of code.

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

13. Get the maximum value in the array gracefully. Similarly, you can get the minimum value
We can use the for loop to traverse each value in the array and find the maximum or minimum value. We can also use the Array.reduce() method to find the maximum and minimum numbers in the array. But with extended notation, we can do it on one line.

var arr1 = [1,2,3,4,999,1999];
Math.max(...arr); // 1999
Math.min(...arr); // 1

14. Exponential power
We can use the Math.pow() method to get the power of a number. There is a shorter syntax to implement, that is, the double asterisk (* *)

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

15. Double non bitwise operator (~ ~)
The double non bitwise operator is an abbreviation for the Math.floor() method.

const floor = Math.floor(6.8); // 6 
// Abbreviation
const floor = ~~6.8; // 6