JavaScript: Explain spread operator

Spread operator represented by 3 dots (…) used to perform below things.

a.   It can turn elements of an array into arguments of a function call.

b.   Convert string to an array

c.   Convert set to an array

d.   Provide better way to concatenate arrays

e.   Copy elements of array to new array

f.    Merge object literals

Turn elements of an array into arguments of a function call

HelloWorld.js

function sum(...ele){
  var sum = 0;
  
  for(data of ele){
    sum += data;
  }
  
  return sum;
}

var result1 = sum(10);
var result2 = sum(10, 20);
var result3 = sum(10, 20, 30);

var arr = [10, 20, 30, 40];
var result4 =sum(...arr); //Expand the array into 4 arguments

console.log("result1 : " + result1);
console.log("result2 : " + result2);
console.log("result3 : " + result3);
console.log("result4 : " + result4);

Output

result1 : 10

result2 : 30

result3 : 60

result4 : 100

Convert string to an array

HelloWorld.js

var str = "Hello World";
var chars = [...str];

console.log(chars)

Output

Array(11) [ "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", … ]

Convert set to an array

Example

var arr = [...countries];

HelloWorld.js

var countries =  new Set();

countries.add("India");
countries.add("Australia");
countries.add("Canada");
countries.add("Germany");

var arr = [...countries];

console.log(arr);

Output

Array(4) [ "India", "Australia", "Canada", "Germany" ]

Provide better way to concatenate arrays

If you want to concatenate elements of two arrays, you may have to write below kind of code.

function concatenateArray(arr1, arr2){

  var result = [];

 

  for(var ele of arr1){

    result.push(ele);

  }

 

  for(var ele of arr2){

    result.push(ele);

  }

 

  return result;

}

HelloWorld.js

var asiaCountries = ["Japan", "India", "Indonesia", "Singapore"];
var europeCountries = ["Germany", "France", "Italy"];

function concatenateArray(arr1, arr2){
  var result = [];
  
  for(var ele of arr1){
    result.push(ele);
  }
  
  for(var ele of arr2){
    result.push(ele);
  }
  
  return result;
}

var asiaAndEuropeCountries = concatenateArray(asiaCountries, europeCountries);


console.log(asiaCountries);
console.log(europeCountries);
console.log(asiaAndEuropeCountries);

Output

Array(4) [ "Japan", "India", "Indonesia", "Singapore" ]

Array(3) [ "Germany", "France", "Italy" ]

Array(7) [ "Japan", "India", "Indonesia", "Singapore", "Germany", "France", "Italy" ]

With spread operator, you can concatenate using below statement.

var asiaAndEuropeCountries = [...asiaCountries, ...europeCountries];

HelloWorld.js

var asiaCountries = ["Japan", "India", "Indonesia", "Singapore"];
var europeCountries = ["Germany", "France", "Italy"];

var asiaAndEuropeCountries = [...asiaCountries, ...europeCountries];

console.log(asiaCountries);
console.log(europeCountries);
console.log(asiaAndEuropeCountries);

Output

Array(4) [ "Japan", "India", "Indonesia", "Singapore" ]

Array(3) [ "Germany", "France", "Italy" ]

Array(7) [ "Japan", "India", "Indonesia", "Singapore", "Germany", "France", "Italy" ]

Copy elements of array to new array

var asiaCountries = ["Japan", "India", "Indonesia", "Singapore"];

var copiedData = [...asiaCountries];

HelloWorld.js

var asiaCountries = ["Japan", "India", "Indonesia", "Singapore"];
var copiedData = [...asiaCountries];

console.log(asiaCountries);
console.log(copiedData);

Output

Array(4) [ "Japan", "India", "Indonesia", "Singapore" ]

Array(4) [ "Japan", "India", "Indonesia", "Singapore" ]

Merge Object literals

HelloWorld.js

var obj1 = { foo: 'bar', x: 52 };
var obj2 = { foo: 'baz', y: 103 };
var obj3 = { foo: 'baz', x : 100, z : 1000 };

var mergedObject = { ...obj1, ...obj2, ...obj3 };

console.log(mergedObject);

Output

Object { foo: "baz", x: 100, y: 103, z: 1000 }

Previous                                                 Next                                                 Home