Spread Operator in JavaScript

The spread operator in JavaScript spreads the array or object (or any iterable object) to its elements. It is represented by three dots (…). It’s a handy operator for copying, merging, or expanding elements. This guide will explore the spread operator, its benefits, how to use it, and everyday use cases.

What is the Spread Operator?

The spread operator takes an iterable object like an array, object, string, etc., and spreads its elements. An “iterable object” is anything we can iterate over item by item. For example, arrays, objects, and strings are iterable in JavaScript.

The syntax consists of three dot followed by name of the iterable. For example

Please take a look at the following example. Three numbers are in the array of numbers. To determine their sum, we wish to use the sum function. As demonstrated below, we can pass each array element as the argument to the sum method.

The spread operator makes it easier to spread out each array element. In the following example, instead of (numbers[0], numbers[1], numbers[2]), we can use the (…numbers), which have the same effect.

The following image shows how the spread operator worked in the above example.

How Spread Operator works in Javascript

Spread Syntax

There are many distinct ways we can use the spread syntax

Function arguments list 

Array literals 

Object literals

Examples of Spread Operator in Javascript

Spread Operator and Arrays

You can use the spread operator to copy an array, combine two or more arrays, or expand an array into individual elements.

Copying an array

To copy an array, you can use the spread operator. The below creates a new copy of the numbers1 array.

Remember that assigning the numbers1 to numbers2 array does not create a new one. Because when we use the assignment operator, it will copy only the reference to the array. Hence both numbers1 and numbers2 point to the same array.

The spread operator does not work correctly for multi-dimensional arrays. It only works for single-dimensional arrays.

Adding elements to array

You can also add new elements to the array at the end or the start of the array.

You can also use the push method to insert value at the end. And use the unshift method to insert the value at the start. But both these methods modify the original array.

Combining arrays

The spread operator is most helpful for combining or merging two or more arrays. The code below merges three arrays into a new array of numbers.

You can also use the concat method as another way to merge arrays. It will also create new array.

Spread Operator and objects

We can use the spread operator to expand objects. You can use the spread operator to copy an object, merge two or more objects, or expand an object into individual elements.

Copy an object

The following code uses the spread operator to copy the person object into a new object newPerson. The JavaScript expands the code …person to name: ‘John’, age: 25 and uses it in its place.

The code above creates a new object newPerson. Hence modifying the newPerson will not change the original object person

The code will not work correctly if the person object contains nested objects because the nested objects are copied by reference.

Merge Objects

Merging two or more objects is another valuable feature of the spread operator. We can use this feature to create a single object from multiple sources.

The code above merges three objects into a new single object.

Spread Operator and function Arguments

We can use the spread operator to expand the array or objects and pass it as an argument to a function. Here the numbers array is expanded into individual elements.

New operator

We can pass an array to a new operator easily. The code below creates a new date from the array.

Pitfall: Shallow Copy

The spread only creates shallow copies of the object. If the object contains a nested object, then the it will not spread it but copies the reference of the nested object.

Take a look at the following example. We utilize the spread operator to create a newPerson object from the person object. The person object contains a nested object address. 

The Spread operator does not copy the nested object address. Instead, it copies the reference. Hence both person and newPerson will refer to the same address object. If we change the address in the newPerson object, it will also modify the address of the person object as they both point to the same object.

Similarly, spread does not work for multi-dimensional arrays because it goes one level deep only. So if you are trying to spread out a multi-dimensional array, you need to look for other alternatives.


  1. The spread operator takes an iterable object like an array, object, string, etc., and spreads its elements.
  2. The syntax consists of three dot followed by name of the iterable i.e. [...numbers]
  3. There are many distinct ways we can use the spread syntax. Function arguments list myFunction(a, ...iterableObj, b), Array literals [1, ...iterableObj, '4', 'five', 6] and as Object literals { ...obj, key: 'value' }
  4. You can use it to clone an array, add elements to array, merge two or more arrays , clone an object and a new property to an object etc.


Spread syntax

Read More

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top