In the below image, the triple dots in the function parameter can be referred to as the Gather operator since it gathers all the arguments passed to that function into one parameter. The same triple dot operator acts as the Spread operator when used in a different context. If the triple dot operator is used in a function parameter then it is the Rest parameter or in other words the Gather operator. Whereas if the triple dot operator is used in the arguments when calling a function then it acts as the Spread operator. Let’s take an example. Following function takes any number of arguments using the rest parameter and returns their sum.
function addNumbers(...numbers){
return numbers.reduce((num,previousSum)=>num+previousSum);
}
let sum=addNumbers(1,2,3,4,5);
console.log(sum); //logs 15
Now let’s say if we had an array of numbers and we wanted to call the addNumbers passing all the numbers in the array; we’ll have to do something like shown below.
function addNumbers(...numbers) {
return numbers.reduce((num, previousSum) => num + previousSum);
}
let nums = [1, 2, 3, 4, 5]
let sum = addNumbers(nums[0], nums[1], nums[2], nums[3], nums[4]);
console.log(sum); //logs 15function addNumbers(...numbers){
return numbers.reduce((num,previousSum)=>num+previousSum);
}
let numArr=[1,2,3,4,5]
let sum=addNumbers(...numArr);
console.log(sum); //logs 15In the above example, as the name suggests the spread operator has spread the array values into individual values. When we write …numArr, it spreads the array values as individual values as 1 2 3 4 5.
I have shown the above examples to show how the same triple dot operator behaves based on the context. Spread operator can be used with any data type as long as it is iterable. It can be used even with the string (since it is also iterable) as shown in the following example.
let language='javascript'; let languageCharArray=[...language]; console.log(languageCharArray); //logs ["j", "a", "v", "a", "s", "c", "r", "i", "p", "t"]
In the above example, we have a string variable named language and we are creating an array of its characters using spread operators. To achieve the same result without using the spread operator, we would have to iterate through the language variable using a loop and push each character into the array.
Uses of the Spread Operator
Copying an array
let originalArray=[1,2,3,4,5]; let copiedArray=[...originalArray]; originalArray.push(6); console.log(originalArray); // logs [1, 2, 3, 4, 5, 6] console.log(copiedArray); // logs [1, 2, 3, 4, 5]
spreads the values of the originalArray to create a new array and assigns it to the variable copiedArray. And as seen, the copied array is not affected when we add a new value to the original array.
Concatenating an array
let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [7, 8, 9]; let arr4 = [...arr1, ...arr2, ...arr3]; console.log(arr4); // logs [1, 2, 3, 4, 5, 6, 7, 8, 9]
Copying an object
let actor = {
name: 'Christian Bale',
born: '01/30/1974',
nationality: 'British',
movie: {
name: 'Batman Begins',
director: ' Christopher Nolan',
year: 2005
}
}
let copiedActor = { ...actor };
console.log(copiedActor.name); // logs Christian Bale
console.log(copiedActor.movie.name); // logs Batman Begins
actor.name = 'Robert Downy Jr.';
actor.movie.name = 'Ironman';
console.log(copiedActor.name); // logs Christian Bale
console.log(copiedActor.movie.name); // logs Ironmanlet copiedActor = { ...actor, movie: { ...actor.movie } };Combining objects
let carEngine = {
power: 425,
torque: 425
}
let carDimensions = {
length: 4580,
width: 2045,
height: 1135
}
let car = { ...carEngine, ...carDimensions }
console.log(car); // logs {power: 425, torque: 425, length: 4580, width: 2045, height: 1135}Performing immutable operations on arrays and objects
Adding elements to the end of the array
let numbers = [1, 2, 3]; // Adding item to the end of the array, similar to push let newNumbers = [...numbers, 4, 5]; console.log(numbers); // logs [1, 2, 3] console.log(newNumbers); // logs [1, 2, 3, 4, 5]
Adding elements at the beginning of the array
let colors = ['cyan', 'gold']; // Adding items at the beginning of the array, similar to unshift let newColors = ['aqua', 'black', ...colors]; console.log(colors); // logs ["cyan", "gold"] console.log(newColors); // logs ["aqua", "black", "cyan", "gold"]
let colors = ['aqua', 'black', 'cyan', 'gold']; //Simulating splice //Removing ‘black’; adding ‘white’ and ‘silver’ let newColors = [...colors.slice(0, 1), 'white', 'silver', ...colors.slice(2)] console.log(newColors); // logs ["aqua", "white", "silver", "cyan", "gold"]
Modifying an object
let car = {
power: 425,
torque: 425,
length: 4580,
width: 2045,
height: 1135
}
let newCar = { ...car, length: 4600, width: 2100 };
console.log(newCar); // logs {power: 425, torque: 425, length: 4600, width: 2100, height: 1135}
