Spread syntax (...)
ES6 provides a new operator called spread operator that consists of three dots (...) .
What is Spread Operator
var value=[1,2,3,4,5]
var variable1=[...value]
In the above example, ...value does target all values from variable named value and spread them or put them in a list and assigning it to a new variable i.e., variable1.
Three dots aka (...), it’s a new feature of javascript that came with ECMA2015 or ES6. Three powerful dots, that allows us to copy, expand and concat in arrays and objects we will check each one by one. Although the previous techniques are technically correct.
The Spread operator is really good, it’s efficient, readable and we can save a whole lot of mess. I don’t know how you can not love it.
Eexample:
const odd = [1,3,5]; const combined = [2,4,6, ...odd]; console.log(combined);
Example:- Sample Input
arr1=[1,2,3]
arr2=["a","b","c"]
Sample Output: // output : [1,2,"a","b","c",3]
By Old technique
newList=[]
for(i of arr1){
newList.push(i)
if (i==2){
for(j of arr2){
newList.push(j)
}
}
}
console.log(newList);
// output : [1,2,"a","b","c",3]
By Using Spread Operator
console.log([1,2,...arr2,3]);
// output : [1,2,"a","b","c",3]
Explanation:
three dots here we used, those dots will work here as to spread the values that are there inside arr2 after elements 1,2, here it will spread, , 3.
Expanding arrays
Whenever we want to expand an array into some another array we will do something like this:
// normally used expand method without spread operator
let arr1 = ['x','y'];
let arr2 = [arr1,'c','d'];
console.log(arr2); // [ [ 'x', 'y' ], 'c', 'd' ]
We got the output [ [ 'x', 'y' ], 'c', 'd' ] we don’t want like this, we want to have each element separated by comma, it didn't happen by normal technique. // with spread operator
let arr1 = ['x','y'];
let arr2 = [...arr1,'c','d'];
console.log(arr2); // [ 'x','y','c','d' ]
Here we expanded easily without struggling that much.
Splitting a string
I like the way that spread operators split a string.
// Without a spread operator
var myName="Raji"
var array1=myName.split("")
console.log(array1) // output: [ 'R', 'A',' J', 'I' ]
Explanation: you will use the split function and pass empty string to it, and use split on myName. So that you will get each character separately in a list.
// With a spread operator
var myName="Kavi"
var lettersOfMyName=[...myName]
console.log(lettersOfMyName); // output: [ 'k', 'a, 'v', 'i', ]
Spread operator on Objects
Split over a string
var myName="RAJI"
Output we want as per the character index : { '0': 'R', '1': 'A', '2': 'J', '3': 'I' }
// with a spread operator
var myName="RAJI"
console.log({...myName})
{ '0': 'R', '1': 'A', '2': 'J', '3': 'I' }
// Without a spread operator
index=0
newDict={}
for(i of myName){
console.log(i);
newDict[index]=i
index++
}
console.log(newDict);
{ '0': 'R', '1': 'A', '2': 'J', '3': 'I' }
If you want to get keys and value pairs by their index values as keys and character as a string, you clearly have to understand that the spread operator is very useful.
Copy an object
// without a spread operator
var place={name:"paris",country:"France"}
var duplicate=Object.assign({},place);
console.log(duplicate)
Explanation: For copying a object we use Object.assign() the same we can do with a spread operator with a grace
// With a spread operator
var duplicate ={...place}
console.log(duplicate);