CuteMachine

JavaScript Spread Operator

The JavaScript Spread Operator is simply three dots: ...

Be aware that the spread operator is not a real operator like for example + and -. The array spread operator has been introduced in ES6.

Initially, the spread operator could only be used with arrays. But since ES2018, there is also a spread operator, which can be used with objects. Therefore we call it the object spread operator.

Array Spread Operator

Here is a simple example using the array spread operator to make a shallow copy of an array:

const values = [3, 4, 5]
const copiedValues = [...values]

values    // [3, 4, 5]
copiedValues    // [3, 4, 5]
values === copiedValues    // false

The arrays are indeed two distinct arrays, as we can see in the highlighted line.

But we need to be aware that when we copy an array with the spread operator, we only create a shallow copy. That means that we do not create new instances of nested items. An example will illustrate this.

const values = ['one', 'two', { x: 18 }]
const shallowCopy = [...values]

values    // [ 'one', 'two', { x: 18 } ]
shallowCopy    // [ 'one', 'two', { x: 18 } ]

values[2].x = 42    // change the object in the values array

values    // [ 'one', 'two', { x: 42 } ]
shallowCopy    // [ 'one', 'two', { x: 42 } ]

Although we only changed the object in the values array, the object in the shallowCopy array has also changed. When we copied the object with the spread operator, we didn't create a new instance of the enclosed object, but only copied the reference to that object. Therefore the object reference in values and shallowCopy is pointing to the same object.


We already saw one application of the array spread operator. Here is another use case for the operator. We can merge arrays, which is very convenient.

const values = [3, 4, 5]
const copiedValues = [1, 2, ...values, 6, 7]

values    // [3, 4, 5]
copiedValues    // [ 1, 2, 3, 4, 5, 6, 7] 

Another excellent example of the spread operator is eliminating duplicates in an array with the help of Set.

const foo = [1, 2, 3, 3, 2, 1]
const bar = [...new Set(foo)]

foo    // [ 1, 2, 3, 3, 2, 1 ]
bar    // [ 1, 2, 3 ]

The spread operator works on any iterable object. And because a string is iterable in JavaScript, we can use the spread operator to create an array of chars from a string.

const c = [..."hello"]

c    // [ 'h', 'e', 'l', 'l', 'o' ]

Object Spread Operator

ES2018 introduced the object spread operator. It works accordingly to the array spread operator.

Like the array spread operator, you can use the object spread operator to create shallow copies of objects.

Before ES2018 we were used to create copies of objects with Object.assign():

const o = {
  foo: 12,
  bar: 'aString'
}
const o2 = Object.assign({}, o)

o    // { foo: 12, bar: 'aString' }
o2    // { foo: 12, bar: 'aString' }

We can now use the object spread operator to do the same with a more elegant syntax:

const o = {
  foo: 12,
  bar: 'aString'
}

const o2 = { ...o }

o     // { foo: 12, bar: 'aString' }
o2    // { foo: 12, bar: 'aString' }

You can use the object spread operator to merge different objects into one.

const name = {
  first: 'John',
  last: 'Travolta' 
}

const telephone = {
  mobile: '123'
}

const person = { ...name, ...telephone }

person    // { first: 'John', last: 'Travolta', mobile: '123' }

Spread Operator And Functions

The spread operator can be used together with variadic functions1. These functions can be called with a variable number of arguments. Math.min() is such a function.

const values = [2, 4, 8, 6, -3, 5]
const minimum = Math.min(...values)

minimum    // -3

Please do not confuse the spread operator with the rest parameter. I will add a tutorial about rest parameters soon.

Conclusion

With the addition of the spread operators in JavaScript, we can now write much cleaner and readable code. At first, you have to get used to it, but when you are, you do not want to miss these language features.


  1. Also called vararg functions or variable arity functions.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer