A spread operator introduce in JavaScript ES6 which takes an iterable (e.g an array or string) and expands it into individual elements. It mostly used to make shallow copies of the specified objects which makes the code concise and enhances the readability of the program.
In case, spread operator used with an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.
1
2 function(x, ...<iterableObj>, y)
3
4
5 const array = [1, ...<iterableObj>, '5', 'six', 7]
6
7
8 const obj = { ...<object>, key: 'value' }
iterableObj : An iterable object that has elements (array or string)
object : An object that has properties and value in the form of key-value pair
1
2 const array = [1, 2, 3, 4];
3 console.log(...array);
4
5
6 const employee = { id: 1, name: 'JavaScript' };
7 console.log({...employee});
In the above example, an array is define with elements and a spread operator spreads an element of array and returns to log() method. An object emp object is define and a spread operator spreads the properties object and included in new object. A spread syntax can be used when all elements from array or an object need to be included in a new array or object.
Function arguments
A spread operator used to spread array elements to an individual value and pass to the function. It creates individual value and pass as number of arguments to the function.
1 function(x, ...<iterableObj>, y)
Spread operator in function arguments
1 function addition(x, y, z) {
2 return x + y + z;
3 }
4
5 const array = [1, 2, 3];
6 const sum = addition(...array);
7 console.log(sum);
8
In the above example, a addition() function define which accepts three parameters. An array define with three elements and passed using spread operator. It spreads array elements to an individual value and pass three elements to the function which will returns value 6 after adding three values. A value is assign to variable sum and printed on console.
Spread operator in function arguments
1 function addition(...values) {
2 let sum = 0;
3 for(value of values) {
4 sum += value;
5 }
6 return sum;
7 }
8
9 const array = [1, 2, 3];
10 const sum = addition(...array);
11 console.log(sum);
The above example produce the same result but here we have used two different operator which has similar syntax. A spread and rest parameters operator. A spread operator spreads elements while rest parameters operator converts array elements.
Array literals
A spread operator used to create array literals by specifying an existing array as a part of newly created array. It spreads an existing array elements into new array from the specified index position and create new array.
1 const array = [1, ...<iterableObj>, '5', 'six', 7]
1 const array = [1, 2, 3];
2
3
4 const arr = [0, ...array, 4, 5];
5
6 console.log(arr);
In the above example, an array is define with three elements. A new array is created by specifying an existing array using spread operator. A spread operator spreads an existing array elements in the new array at specified index and returns new array. A new array elements printed on console which includes an existing array elements.
Note : It is similar to array slice() function. A spread syntax effectively goes one level deep while copying an array. Hence, it can not be used to create deep cloning.
Object literals
A spread operator used to create shallow cloning(excluding prototype) or merging and existing objects properties into newly created object. It is a shorter syntax than Object.assign().
1 const obj = { ...<object>, key: 'value' }
2 const obj = { ...<object1>, ...<object2>, .... <...objectN> }
Merging object with properties using spread operator
1 const employee = { id: 1, name: 'James', salary: 1000 }
2
3
4 let object = {...employee, address: 'address line 1', city: 'City', state: 'State'};
5
6 console.log(object);
7
8 {id: 1, name: 'James', salary: 1000, address: 'address line 1', city: 'City', state: 'State'}
In the above example, an employee object is created with properties and values. A new object is created by specifying an existing object employee with spread operator which returns a key-value pair to the newly created object. A new properties is specified by separating with comma. A new object is printed on console which will prints a new object with all the properties and values.
Merging multiple object using spread operator
1 const employee = { id: 1, name: 'James', salary: 1000 };
2 const address = { address: 'address line 1', city: 'City', state: 'State'};
3
4
5 let object = {...employee, ...address};
6
7 console.log(object);
8
9 {id: 1, name: 'James', salary: 1000, address: 'address line 1', city: 'City', state: 'State'}
In the above example, an employee and address object define with properties and values. A new object is created by specifying both object with spread operator which will returns key-value pairs from both object and create new object. A new object is printed on console with all properties and values.
Note : It is similar to Object assign() function. A spread syntax effectively goes one level deep while copying an object. Hence, it can not be used to create deep cloning.
Related options for your search