The ... (dot, dot, dot) operator came around since the introduction of ES6 and has helped a lot in manipulating arrays and other iterables easily.
The ... operator can either be called Spread or Rest depending on where or how it is being used. Let's take some examples and see their work and the differences between them.
1. Spread Operator
It allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements. Let's take an example and see how the Spread operator works
a. Creating a new Array
Spread operator is used to create a new array from the existing one, as below.
const arrayOne = [1,2,3]
const newArray=[...arrayOne]
console.log(newArray)
//Output
[1,2,3]
In both cases above, the Spread operator copies every element in the original array, and any elements that come afterward are pushed onto the end.
b. Concatenating two arrays
In JavaScript, there are multiple ways to concatenate two arrays, one way is using the Spread operator.
const arrayOne = [1,2,3]
const arrayTwo = [4,5,6]
const newArray = [...arrayOne,...arrayTwo]
console.log(newArray)
//Output
[1,2,3,4,5,6]
c. Pass elements of an array to a function as separate arguments.
If we had an array that we wanted to pass as a list of arguments in a function, we would use the Spread operator, as below
function multiply(a, b, c) {
return a * b * c ;
}
const arrayToBePassedAsAnArgument= [1, 2, 3];
console.log(multiply(...arrayToBePassedAsAnArgument));
//Output
6
The above function is similar to how we do multiply(1,2,3) if we don't use the Spread operator.
d. Using Spread operator with strings.
When we spread a string, it will return an array of individual substrings.
const str = 'hello world'
const array = [...str]
console.log(array)
//Output
["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
e. Using Spread operator with Objects.
We can create/clone/merge objects with Spread as well, just like how we did with
array.
let objOne = { name: 'John', age: 24 };
let objTwo = { name: 'Jane', age: 22 };
let clonedObj = { ...objOne };
console.log(clonedObj)
//Output
{ name: "John", age: 24 }
f. Adding new values in arrays/object using Spread.
Suppose we want to add new values inside our array or objects while keeping the remaining values unchanged we can use the Spread operator.
const arrOne = [1,2,3]
const newArr = [...arrOne,4,5,6]
console.log(newArr)
//Output
[1,2,3,4,5,6]
2. Rest Operator
It is used to collects all remaining elements into an array, it is the same operator as a Spread operator but used differently. Used to merge a list of function arguments into the array. It is also called as Gather operator. Let's take an example
const multiplyAllNumbers= (...numbers) => {
return numbers.reduce((acc, num) => acc * num);
};
const sum = multiplyAllNumbers(1, 2, 3, 4);
console.log(sum)
//Output
24
In the above example, we're are gathering all the n number of arguments into the numbers parameter and then returning the multiplication.
The ...Rest operator bundles all the extra parameters into a single array, therefore it does not contain any named argument defined before it, hence it should always be declared at the end of an array.
I hope you all understood the difference between the Spread and Rest operators.
Thanks for reading!!!
Have A Great Day, Good Luck
I'm sharing few resources which you can refer.