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}
];