The spread operator

A spread operator is represented by the ... token. A spread operator splits an iterable object into its individual values.

An iterable is an object that contains a group of values and implements the ES6 iterable protocol to let us iterate through its values. An array is an example of a built-in iterable object.

A spread operator can be placed wherever multiple function arguments or multiple elements (for array literals) are expected in code.

The spread operator is commonly used to spread the values of an iterable object into the arguments of a function. Let's take the example of an array and see how to split it into the arguments of a function.

To provide the values of an array as a function argument, you can use the apply() method of Function. This method is available to every function. The following example demonstrates:

function myFunction(a, b) {
  return a + b;
}
var data = [1, 4];
var result = myFunction.apply(null, data);
console.log(result); //Output "5"

Here, the apply method takes an array, extracts the values, passes them as individual arguments to the function, and then calls it.

Here's an example using the modern way, that is, with the spread operator:

function myFunction(a, b) {
    return a + b; 
}
let data = [1, 4];
let result = myFunction(...data);
console.log(result); //Output "5"

During runtime, before the JavaScript interpreter calls the myFunction function, it replaces ...data with the 1,4 expression:

let result = myFunction(...data);

The previous code is replaced with:

let result = myFunction(1,4);

After this, the function is called.

Other uses of the spread operator

The spread operator is not just limited to spreading an iterable object into function arguments, but it can be used wherever multiple elements (for example, array literals) are expected in code. So it has many uses. Let's see some other use cases of the spread operator for arrays.

Making array values a part of another array

The spread operator can also be used to make array values a part of another array. The following example code that demonstrates how to make the values of an existing array a part of another array while creating it:

let array1 = [2,3,4];
let array2 = [1, ...array1, 5, 6, 7];
console.log(array2); //Output "1, 2, 3, 4, 5, 6, 7"

Consider the following code:

 let array2 = [1, ...array1, 5, 6, 7];

This previous code is equivalent to:

 let array2 = [1, 2, 3, 4, 5, 6, 7];

Pushing the values of an array into another array

Sometimes, we may need to push the values of an existing array into the end of another existing array.
This is how programmers used to do it:

var array1 = [2,3,4];
var array2 = [1];
Array.prototype.push.apply(array2, array1);
console.log(array2); //Output "1, 2, 3, 4"

But from ES6 onward we have a much cleaner way to do it, which is as follows:

let array1 = [2,3,4];
let array2 = [1];
array2.push(...array1);
console.log(array2); //Output "1, 2, 3, 4"

Here the push method takes a series of variables and adds them to the end of the array on which it is called.
See the following line:

array2.push(...array1);

This will be replaced with the following line:

array2.push(2, 3, 4);

Spreading multiple arrays

Multiple arrays can be spread on a single-line expression. For example, take the following code:

let array1 = [1];
let array2 = [2];
let array3 = [...array1, ...array2, ...[3, 4]];//multi arrayspread
let array4 = [5];
function myFunction(a, b, c, d, e) {
  return a+b+c+d+e;
}
let result = myFunction(...array3, ...array4); //multi array spread
console.log(result); //Output "15"