10 great JavaScript shorthand skills, learn css front-end development

let apples = ['🍎', '🍏'];

let fruits = ['🥭', '🍌', '🍒'];



// Add all items from apples onto fruits at start

Array.prototype.unshift.apply(fruits, apples)



console.log( fruits );

//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]





Now the red and green apples will merge at the beginning, not at the end.

Abbreviation:

We can still shorten this long code using the ES6 extension operator (...), as follows:

let apples = ['🍎', '🍏'];

let fruits = [...apples, '🥭', '🍌', '🍒'];  // <-- here



console.log( fruits );

//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]





[](

)3. Clone array

Common writing:

We can easily clone arrays by using slice() method in Array, as shown below:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

let cloneFruits = fruits.slice();



console.log( cloneFruits );

//=> ["🍉", "🍊", "🍇", "🍎"]





Abbreviation:

We can use the ES6 extension operator (...) to clone an array like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

let cloneFruits = [...fruits];  // <-- here



console.log( cloneFruits );

//=> ["🍉", "🍊", "🍇", "🍎"]





[](

)4. Deconstruction assignment

Common writing:

When processing arrays, we sometimes need to unpack the array into a pile of variables, as shown below:

let apples = ['🍎', '🍏'];

let redApple = apples[0];

let greenApple = apples[1];



console.log( redApple );    //=> 🍎

console.log( greenApple );  //=> 🍏





Abbreviation:

We can achieve the same result with one line of code by deconstructing the assignment:

let apples = ['🍎', '🍏'];

let [redApple, greenApple] = apples;  // <-- here



console.log( redApple );    //=> 🍎

console.log( greenApple );  //=> 🍏





[](

)5. Template literal quantity

Common writing:

Usually, when we have to add an expression to a string, we do this:

// Display name in between two strings

let name = 'Palash';

console.log('Hello, ' + name + '!');

//=> Hello, Palash!



// Add & Subtract two numbers

let num1 = 20;

let num2 = 10;

console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2));

//=> Sum = 30 and Subtract = 10





Abbreviation:

Through template literals, we can use backquotes (), so that we can wrap the expression in ${...} ` and embed it into the string, as shown below:

// Display name in between two strings

let name = 'Palash';

console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore

//=> Hello, Palash!



// Add two numbers

let num1 = 20;

let num2 = 10;

console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);

//=> Sum = 30 and Subtract = 10





[](

)6. For cycle

Common writing:

We can use the for loop to loop through an array like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];



// Loop through each fruit

for (let index = 0; index < fruits.length; index++) { 

  console.log( fruits[index] );  // <-- get the fruit at current index

}



//=> 🍉

//=> 🍊

//=> 🍇

//=> 🍎





Abbreviation:

We can use the for...of statement to achieve the same result with much less code, as shown below:

let fruits = ['🍉', '🍊', '🍇', '🍎'];



// Using for...of statement 

for (let fruit of fruits) {

  console.log( fruit );

}



//=> 🍉

//=> 🍊

//=> 🍇

//=> 🍎





[](

)7. Arrow function

Common writing:

To traverse the Array, we can also use the forEach() method in Array. However, a lot of code needs to be written. Although it is less than the most common for loop, it is still a little more than the for...of statement:

let fruits = ['🍉', '🍊', '🍇', '🍎'];



// Using forEach method

fruits.forEach(function(fruit){

  console.log( fruit );

});



//=> 🍉

//=> 🍊

//=> 🍇

//=> 🍎





Abbreviation:

However, using the arrow function expression allows us to write the complete loop code in one line, as follows:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

fruits.forEach(fruit => console.log( fruit ));  // <-- Magic ✨



//=> 🍉

//=> 🍊

//=> 🍇

//=> 🍎





Most of the time, I use the forEach loop with arrow function. Here I show the for...of statement and forEach loop, so that everyone can use the code according to their preferences.

[](

)8. Find objects in the array

Common writing:

To find an object from the object array through one of the attributes, we usually use the for loop:

let inventory = [

  {name: 'Bananas', quantity: 5},

  {name: 'Apples', quantity: 10},

  {name: 'Grapes', quantity: 2}

];

Keywords: Javascript node.js Front-end css Programmer

Added by biopv on Fri, 10 Sep 2021 11:16:00 +0300