ES6 introduced a new operator to developers called spread operator. The spread operator spreads out an iterable such as an array, string, map, or set into individual elements. The spread operator consists of three dots(...) followed by an iterable.
The general format of the spread operator is
...iterable
You can use a spread operator in the following ways:
There is another variant of the spread operator, which is called the rest parameter. If you want to know more about the rest parameter, visit How to use rest parameter in JavaScript?
Note: ES2018 extended the functionality of the spread operator to objects. So now, you can use the spread operator to spread an object. For more information, visit this link.
If you want to combine two or more arrays, the easiest way is to use the spread operator. For example, suppose you have two arrays.
let arr1 = [1,2,3]; let arr2 = [4,5];
So to merge these two arrays, you have to use the spread operator with each array inside the array literals.
let newarr = [...arr1, ...arr2]; console.log(newarr); //[1, 2, 3, 4, 5]
Also, if you want to add new elements while combining two or more arrays, you can do this by putting them wherever you want.
let arr1 = [1,2,3]; let arr2 = [5,6]; let anotherarr = [0, ...arr1, 4, ...arr2, 7]; console.log(anotherarr); //[0, 1, 2, 3, 4, 5, 6, 7]
In addition to combing two or more arrays, you can also use the spread operator to copy an array.
let originalArray = [1,2,3]; let copiedArray = [...originalArray]; console.log(copiedArray); //[1, 2, 3]
Note: The spread operator creates a shallow copy of an array.
Changes made to the newly copied array will not affect the original array.
copiedArray[0] = 99; console.log(copiedArray); //[99, 2, 3] console.log(originalArray); //[1, 2, 3]
From this example, it is clear that any changes made to the copied array will not be reflected in the original array.
When you use a spread operator with a string, it converts that string into an array of characters. The spread operator does not modify the original string.
let str = "JavaScript"; let arr = [...str]; console.log(arr); //["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
When you use the spread operator with a function argument, it spreads out all the elements of that argument. These elements are passed to the function parameters. For example, suppose you have a function sum that computes the sum of all arguments passed to it.
function sum(a, b, c){
return a + b + c;
}
Now, you want to perform the addition of all elements of an array.
let arr = [1, 2, 3];
You have to call the sum() function and pass the array arr like this.
let add = sum(...arr); console.log(add); //6
By doing this, the zeroth element of an array is passed to parameter a. Similarly, the array's first and second elements are passed to the parameters b and c, respectively.
This functionality of the spread operator is mainly used while calling the built-in methods of the Math object.
let numbers = [23, 10, -4, 91, 57, 31];
let max = Math.max(...numbers);
let min = Math.min(...numbers);
console.log(`Maximum is ${max}`);
console.log(`Minimum is ${min}`);
Output
Maximum is 91 Minimum is -4
