JavaScript Spread Operator

The spread operator is one of the most important features in JavaScript. It is represented by three consecutive dots (…), and is very helpful to make the code look cleaner, shorter, and easier to understand. It is a very powerful tool that was introduced in ECMAScript 6 that helps to expand iterable objects (like arrays, strings, or object literals) into individual element properties. It is very useful in the situations where multiple elements or properties need to be handled at once. In this blog, you will understand spread operator in JavaScript, how it works, and its use cases in detail.

Table of Contents

• What is the Spread Operator in JavaScript?
  • Why Use the Spread Operator in JavaScript?
• Using Spread Operator with Arrays
  1. Adding Multiple Elements using the Spread Operator
  2. Find Min/Max Using Spread Operator
  3. Passing Array Elements as Function Parameters
  4. Copying an Array Using Spread Operator
  5. Concatenate Arrays using the Spread Operator
• Using the Spread Operator with Objects
  1. Copying an Object
  2. Merging Objects
  3. Adding Properties to an Object
• Spread Operator with Strings
• Spread and Rest Operator in JavaScript
• Best Practices for Spread Operator in JavaScript
• Conclusion

What is the Spread Operator in JavaScript?

The spread operator in JavaScript helps you expand elements of an array, object, or string into individual elements. You can think of it as “unpacking” values. Instead of looping through each element manually, the spread operator is used to spread the elements for you. You don’t need extra code to access each value one by one. The spread operator does it instantly, which makes your code look much shorter and easier to read.

The syntax for the Spread Operator in JavaScript is given below:

const newArray = [...oldArray];
const newObject = {...oldObject};

A sample code is given below for your reference:

Code:

Output:

Explanation: This code uses the JavaScript Spread Operator to unpack the array numbers and print their values as 1 2 3.

Why Use the Spread Operator in JavaScript?

You can use the spread operator in JavaScript to:

1. You can quickly make a copy of an array or object without changing the original.

2. With the help of the spread operator, you can join two or more arrays or objects together in one step.

3. You can easily pass multiple values into a single function at once.

4. You can keep your data safe from unwanted changes by working with new copies of the data.

5. You can write comparatively less code and not affect its readability.

Master Full Stack Development from Scratch

Master web development, deployment, and application management from the ground up.

Explore Program

Using Spread Operator with Arrays

Now, we will talk about the most common use of the JavaScript Spread operator with arrays:

1. Adding Multiple Elements using the Spread Operator

Sometimes when you put one array inside another, you will get a nested array (an array inside another array), which is actually not what you wanted. If you want to keep all the values inside a single flat array, you can use the JavaScript spread operator. It helps to spread out the elements in a neat way so that everything stays inside one array instead of being wrapped inside another.

Code:

Output:

Explanation: The above code keeps the new array as [10, 20] and then creates a new array b by spreading array a and adding 30 and 40.

Therefore, logging just shows [10, 20]. You can add new items at the beginning of an array, or even at both the start and the end at the same time.

Code:

Output:

2. Find Min/Max Using Spread Operator

If an array is passed directly to a Math method, it won’t work properly and will give NaN. But when you use the JavaScript Spread Operator, it expands the array into separate values, so that the Math method works correctly.

Code:

Output:

Explanation: The first Math.min(a) fails because it sees the whole array and gives NaN(Not-a-Number). But using Math.min(…a) spreads out the numbers. Therefore, it finds the smallest value directly.

3. Passing Array Elements as Function Parameters

When you want to pass all the elements of an array into a function, it is a very tiring task to write them one by one. This is where the JavaScript spread operator makes things easy for you. It takes the array and then expands its elements into individual values, so that those elements can be used by the function just like normal arguments. In this way, you can save time, write less code, and also keep everything clean and simple.

Code:

Output:

Explanation: The above code is used to spread the array a into separate numbers. After that, it passes them to the add function, which adds the numbers together and returns 60 as the output.

4. Copying an Array Using Spread Operator

When you copy an array directly, both arrays get linked to each other, and changing one array may also change the other. In order to avoid this, you can use the JavaScript Spread Operator, which helps to make a fresh copy of that array. In this way, the new array consists of the same elements, but it is completely independent. Therefore, updates in one array won’t affect the other.

Code:

Output:

Explanation: The above code uses the JavaScript Spread Operator to make a fresh copy of array a to b, so that b has the same values but is independent of a.

5. Concatenate Arrays using the Spread Operator

You can join two or more arrays easily using the JavaScript Spread Operator.  Instead of looping or using the complex methods, the spread operator is used to unpack the elements from each array and place those elements with a new one. This gives you a single array with all the values in order, without creating nested arrays.

Code: 

Output:

Explanation: The above code uses the JavaScript Spread Operator for joining arrays a and b into one single array. Therefore, a becomes [1, 2, 3, 4, 5].

Using the Spread Operator with Objects

Here we will talk about the most common use cases of JavaScript with Objects:

1. Copying an Object

When you copy an object directly, both objects may still point to the same data. Therefore, changing one object may affect the other. In order to avoid this, you can use the JavaScript Spread Operator, which allows you to create a new object with the same properties. In this way, the new object is independent, and any updates on the object will not affect the other one.

Code:

Output:

Explanation: The above code uses the JavaScript Spread Operator to create a new object named newUser. It consists of the same properties as a user, but it is completely independent of a user.

2. Merging Objects

You can also combine the properties of two or more objects into one object by using the JavaScript operator. Instead of writing extra code or using other methods, the spread operator allows you to unpack the properties of each object and then merge them into a new object. This makes it easier for you to bring different sets of data together without making any changes to the original objects.

Code:

Output:

Explanation: The above JS code uses the JavaScript Spread Operator to merge the properties of person and details into one single object called fullPerson.

3. Adding Properties to an Object

You can also easily add properties to an object using the JavaScript Spread Operator. Instead of changing the original object, you have to spread its existing properties into a new one, and then you have to add the extra key-value pairs. This way, you can keep the original object safe while also creating an updated version with the new information.

Code:

Output:

Explanation: The above code is used to copy all the properties of o1 into a new object. After that, it adds c: 4 while updating b to 3. This creates o2 with the new changes.

Spread Operator with Strings

Since strings can be iterated, you can also use the JavaScript spread operator to split characters in a string. A sample code is given below for your reference:

Code:

Output:

Explanation: This code uses the JavaScript Spread Operator to split the string “Hello” into individual characters and store them in an array [“H”, “e”, “l”, “l”, “o”].

Spread and Rest Operator in JavaScript

Both spread and rest operators in JavaScript are represented as “…“, but they work very differently depending on where they are used. The spread operator in JavaScript is used to expand values, like taking items out of an array or object and spreading them out. On the other hand, the rest operator is used to collect values, like taking multiple arguments and packing everything inside a single array. Hence, the spread operator “unpacks” while the rest operator “packs”. A sample code for both the spread and rest operators in JavaScript is given below for your reference:

Example: Spread Operator (Expands Values)

Output:

Explanation: The above JS code first unpacks the array named numbers into separate values. It then uses the JavaScript Spread Operator to create a new array by adding 4 and 5 to the original numbers.

Example: Rest Operator (collects values)

Output:

Explanation: The above JS code uses the rest operator to collect all the function arguments into an array named nums. After that, it sums them together to return the total.

The difference between Spread and Rest Operators in JavaScript is given below in tabular format:

Advantages of Using the Spread Operator in JavaScript

1. It helps to make your code shorter and easier to read.

2. It avoids errors while copying arrays or objects.

3. It is a perfect choice for combining multiple arrays or objects.

4. The Spread Operator in JavaScript can be useful for working with functions that take multiple arguments.

5. The spread operator works well with immutable data handling in modern JavaScript.

Disadvantages of Using the Spread Operator in JavaScript

1. Spread Operator in JavaScript only creates shallow copies, and not deep ones.

2. It can also slow down the performance of your device for very large arrays or objects.

3. If you want to create a completely separate copy (deep copy), the spread operator doesn’t work well. You need to use other methods or libraries for that.

4. While merging objects, if the objects have the same property names, the later one will overwrite the earlier one. This can lead to accidental loss of data.

5. Debugging can be hard for beginners using the spread operator in JavaScript.

Best Practices for Spread Operator in JavaScript

1. You can use the spread operator for copying objects or arrays safely without changing the original one.

2. You should prefer using the spread operator over manual loops for merging arrays or objects.

3. You should always remember that the spread operator only makes shallow copies. You should be careful with the nested data.

4. You can also use the spread operator to pass array values directly into functions so that you can get cleaner code.

5. You can also combine with other ES6 features in order to keep your code short and readable.

Conclusion

The JavaScript Spread Operator is a small feature that creates a massive difference in the way you write and organize the code. It helps you to create duplicate copies of arrays and objects, merge data, pass arguments to functions, and even handle strings in a much cleaner way. You should be careful about its limitations, such as shallow copying, and practice best practices to avoid errors. Once you are familiar with the spread operator in JavaScript, you will be able to write clean and efficient code.

Upskill today by enrolling in our Full Stack Development Course. Prepare for your next interview with our JavaScript Interview Questions.

JavaScript Spread Operator – FAQs