Spread syntax(…) in JavaScript(ES6) – Explained

Spread syntax helps to expand iterables (Arrays, Objects, Strings) in places where zero or more entities are expected.

Consider an example with array.

Here 3 arguments are expected and we store them into an array

Now we use spread syntax to provide arguments in the array

The expected result is 6



Now while working with spread syntax on objects

Merge two objects with spread syntax.

For cloning the object



Now working with spread syntax on strings
Strings are also iterable and using spread operators will make them spread into individual characters.

JavaScript objects and arrays are mutable. If you assign a JavaScript array into another variable and push a value into it, both the first one and second one will change. Actually, this is happening because both the variables have the same reference.

See the example below

In the above example, a new number,5 is pushed into the array. Here you can see both the variables have changed because both have the same reference.

The spread operator creates a new copy of the array with different reference. Using the spread(…) operator we can achieve what we need without this mutation issue.


Here you can see that the variable b is a new variable

The functions like map(),reduce(),filter(),slice() does not change both variables. You can use the aforementioned functions along with the spread operator to do immutable operations with  arrays

For example



One Comment

  • kenneth martins June 23, 2018 at 8:14 am

    Thanks for tthis awsome explanation…..Never clearly understood this

Leave a Reply

Your email address will not be published. Required fields are marked *