What is spread (…) syntax in javaScript | Explained with Examples

The spread operator is used to expand an array instance or a string instance over a list of arguments as individual elements, the arguments can also be zero or less than the length of the iterable array/string.

JavaScript released a lot of features with the release of the ES6 JavaScript back in 2015, one of the features that were new to JavaScript was the spread operator; the spread Operator has a similar identifier to the rest parameters which is the triple-dot “…” before the variable name.

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:

string = "GOOGLE";

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:

function printSum(a,b,c,d,e){



You are going to create an array with 5 integer values inside it using the following line:

numbers = [1,2,3,4,5];

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:

function printSum(a, b, c, d, e) {

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:


Numbers = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,1,2];

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.

array1 = [2, 3, 4, 5, 6, 6, 7, 7];

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”.

That is for the spread syntax in JavaScript.


Spread syntax was introduced in JavaScript as a new feature with the release of ES6. Spread syntax or commonly known as the spread argument is used to expand the elements of an iterable object -: Array or String – over a list of arguments of a function by individually passing each element. This functionality of the ES6 JavaScript programming language allows dealing with certain scenarios where you have more arguments than the parameters of the function. The spread operator can also be used to concatenate elements of the array which we examined with the help of an example.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.