The Spread Operator (…)
The triple-dot identifier when used before a variable name in an argument is known as the spread syntax or a spread argument. The spread argument breaks the iterable object (array or a string) and passes them on to the arguments.
To understand the difference between normal variable output and the spread variable out, take a look at the figure below:
How spread works with console.log()
To understand the basic functionality of the spread operator, you are simply going to create a string object and pass it inside the console.log() function. Afterward, use the spread operator to pass it inside the console.log() to examine the behavior of the spread operator:
console.log("Normal Syntax result: "+ string)
console.log("Spread syntax result: ");
You will get the following output when you execute the code snippet above:
The arrow is pointing at the normal string output and the red rectangle is enclosing the output of the spread syntax. You can notice gaps between each character of the spread syntax output that is because each character is being treated as a different element.
Passing spread syntax in arguments of a function
The whole purpose of the spread syntax and the spread operator is to create the spread arguments and pass them inside the function. To demonstrate this you are going to create a function that will take 5 arguments and will print the result of the values passed inside the arguments with the following lines of code:
You are going to create an array with 5 integer values inside it using the following line:
For the last step, you are going to call this function using the spread arguments and pass in the numbers array using the spread syntax like a single argument with the following line:
The complete snippet would be:
console.log(a + b + c + d + e);
numbers = [1, 2, 3, 4, 5, 6];
After executing the code, you will get the following output:
All the elements inside the numbers array were passed as individual arguments to the function and then each argument was added printed on the console.
But, What if your numbers array has more elements than the arguments of the function?; Well, in that case, only the first 5 elements of the array will be used and others will be discarded, thus, preventing any error.
To showcase this, take the above-mentioned function and pass in the following array inside it:
By using the following command:
You will see the following result on the console:
You can see, even though we had more elements inside the array that were passed into the argument’s list with the spread syntax, the extra elements were all discarded, and therefore, we did not get any errors.
How to concatenate arrays using spread?
We can even use the spread syntax or the spread operator to concatenate array elements with other elements by passing in the complete array within a single element.
array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
finalArray = [...array1, ...array2];
You will get the following output:
You can see that the finallArray has both the array1 and array2 concatenated inside it and we only gave two elements in the “finalArray”.