Improve your code in JavaScript with Use of ES6 Spread Operator

    Sep 21, 2019       by Pankaj Kumar
js-es6-spread-operator.jpg

JavaScript ES6 (ECMAScript 6) introduced the spread operator. It expends the array in individual elements. The syntax is three-dot(...) before the item you want to spread.

 

The following are the very common uses by which you can improve the coding and make the task in a very short way.

1. Copy

An array can be easily copied with spread operator as shown below. Earlier Array.prototype.slice was used to copy an existing array.

Without spread operator

 

 let fruits = ['Banana', 'Apple', 'Orange'];

 let newFruits = fruits.slice();

 

With spread operator

 

 
let countries = ['England','Australia','Brazil'];
 
let newCountryArray = [...countries];
 
console.log(newCountryArray); // ['England','Australia','Brazil']
 

 

2. Concat

concat() is used to concat two array, You can also use spread operator for the same task.

 

Without spread operator

 
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
 
array1 = array1.concat(array2);
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
 

 

With spread operator

 

 
let array1 = ['one', 'two', 'three'];
let array2 = ['four', 'five', 'six'];
 
array1 = [...array1, ...array2];
console.log(array1); // ['one', 'two', 'three','four', 'five', 'six']
 

 

3. Add elements into  Array / Spreading elements together with an individual element

There are methods like push and unshift which normally use to add an element at the end and beginning of the array. The same task can be performed with Spread operator:

Without spread operator

 

 
// Adding element at the end of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); // ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
 
// Adding element at the beginning of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Kiwi");
console.log(fruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
 

 

With spread operator

 

 
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = ['Kiwi', ...fruits]; // can also assign to new array
console.log(newFruits); // ["Kiwi","Banana", "Orange", "Apple", "Mango"]
 
// Adding element at the begining of the array
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits = [...fruits, 'Kiwi']; // can also assign to new array
console.log(newFruits); // ["Banana", "Orange", "Apple", "Mango","Kiwi"]
 

 

4. Math

You can also use math functions with the spread operator. Let's have an example of Math function:

Math.max(50, 30, 40);
// will output 50

 

Without spread operator

For performing the same task on an array below is the way:

let arr = [20, 60, 90, 30, 10];

function max(arr) {

    return Math.max.apply(null, arr);

}

console.log(max(arr)); // output will be 90

 

With spread operator

let arr = [10, 30, 20, 80, 60,100];

let max = Math.max(...arr);

console.log(max); // output will be 100

 

5. Spread elements on function calls

Without spread operator

let fruits = ['Banana','Orange','Apple'];

let getFruits = (arg1, arg2, arg3) => {
console.log(Fruits: ${arg1}, ${arg2} and ${arg3}); };

 

With spread operator

let fruits = ['Banana','Orange','Apple'];

getFruits(...fruits); // Fruits: Apple, Orange and Banana

 

6. Convert String to Array

A string can also be converted to an array with spread operator.

Without spread operator

let str = 'fruits';

console.log(str.split('')); //will output ["f", "r", "u", "i", "t", "s"]

 

With spread operator

let str = "fruits";
let newStr = [...str];

console.log(newStr);  // will output ["f", "r", "u", "i", "t", "s"]

 

Conclusion

Use of spread operator makes the task easier and shorter. ES6 has made JavaScript more efficient than earlier.

Click here to see Node.js Sample Application to get started for enterprise-level application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

Thank You!

Javascript Spread Operator

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS