DEV Community

Charlie @ 90-10.dev
Charlie @ 90-10.dev

Posted on • Originally published at 90-10.dev on

JavaScript Spread Operator

ES6 version of JavaScript introduced a lot of great improvements, and amongst them was the spread operator. It's syntax is slightly unusual: three dots followed by a name of an iterable variable.

Its purpose is simple - to expand the said iterable variable, in place, where a list of values is expected.

Expanding Arrays

Let's see an example - given the 2 arrays of colours below:

let colours = ['red', 'blue', 'green'];
let pastels = ['pink', 'lavender', 'peach'];

Enter fullscreen mode Exit fullscreen mode

When we try to append pastels to colours using push:

colours.push(pastels);

Enter fullscreen mode Exit fullscreen mode

we get a slightly unexpected result:

console.log(colours); 
Enter fullscreen mode Exit fullscreen mode

Array(4) ["red", "blue", "green", (3) […] ]

The pastels array is added as the fourth element - that's because push simply appends the parameter given.

Spread operator to the rescue

To get the expected behaviour, we'll have to use the spread operator when passing pastels to push:

colours.push(...pastels);
console.log(colours); 
Enter fullscreen mode Exit fullscreen mode

Array(6) ["red", "blue", "green", "pink", "lavender", "peach"]

In our case, the spread operator is equivalent to pushing individual elements:

colours.push(pastels[0], pastels[1], pastels[2]);

Enter fullscreen mode Exit fullscreen mode

What if we want to create a new variable that holds both arrays? That's simple enough:

let colours = ['red', 'blue', 'green'];
let pastels = ['pink', 'lavender', 'peach'];
let allColours = [...colours, ...pastels];
console.log(colours); 
Enter fullscreen mode Exit fullscreen mode

Array(6) ["red", "blue", "green", "pink", "lavender", "peach"]

Object copy

Another common place where the spread operator can be useful is for when making copies of objects. Simply assigning an object value to another variable will reference to the same object:

let colour = { name: 'blue', score: 42};
let anotherColour = colour;
anotherColour.name = 'red';
console.log(colour.name); 
Enter fullscreen mode Exit fullscreen mode

red

To create a copy:

let colour = { name: 'blue', score: 42};
let anotherColour = { ...colour };
anotherColour.name = 'red';
console.log(colour.name);
Enter fullscreen mode Exit fullscreen mode

blue

Combine objects

Just like with arrays, the spread operators can be used to "combine" the properties of 2 objects:

let colour = { name: 'blue', score: 42};
let apiColour = { id: 25, isActive: true};
let fullColour = { ...apiColour, ...colour };
console.log(fullColour);
Enter fullscreen mode Exit fullscreen mode

Object { id: 25, isActive: true, name: "blue", score: 42 }

Passing Arguments

The spread operator can also be used to pass arguments to a function:

function sum(a, b, c) {
  return a + b + c;
}

const arr = [1, 2, 3];

console.log(sum(...arr)); // Output: 6

Enter fullscreen mode Exit fullscreen mode

In this example, the spread operator is used to pass the elements of arr as arguments to the sum function - this allows the use of an array to call a function that expects individual arguments.


The spread operator is a powerful tool in JavaScript that can simplify one's code and make it more readable. It can be used to expand arrays, copy and combine objects, and pass arguments to functions. With the spread operator, one can write more concise and efficient code.

Top comments (0)