What is the usefulness of the spread operator in JavaScript?

The spread operator was first introduced in the ES6 JavaScript Standard. The spread operator literally spreads the contents of an array into its elements, which makes operations like concatenation and array manipulation easier.

Let’s say we want to concatenate two arrays; we either do this by using the concat function, like this:

a = [1,2,3]
b = [4,5,6]
c = a.concat(b)
console.log("c: ", c)

Or, we can do the same thing using the spread operator:

const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b] //spread operator
console.log("c: ", c)

Why is the spread operator so useful?

  • You can easily add elements in the middle of the two arrays: [...a, 'something', ...b];.
  • It’s simple to use and also gives you a visual idea of what your array looks like.
  • You can clone arrays in a single line: b = [...a];.
  • You can clone objects in a single line: b = {...a};.
  • You can combine two objects using the spread operator and add extra properties to that object too. Suppose we have two objects, a and b. We can combine these two objects and create a new one with all the properties present in both objects. Moreover, we add two more properties to the new object. See the example below:
const person = { name: "Mike", age: "21"};
const student = { id: "109", cgpa: "3.5"};
const new_object = { ...person, ...student, major: "Computer Science", academic_level: "Junior"};
console.log(new_object);

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved