DEV Community

5 Uses for the Spread Operator

Laurie on July 10, 2019

The spread operator is a favorite of JavaScript developers. It's a powerful piece of syntax that has numerous applications. So many, in fact, that...

Read full post

Tom Butterwith • Jul 10 '19 • Edited

Great examples!
Note that for merging objects, the keys in the later objects take precedence. e.g.

let obj1 = { a:1, b:2, c:3 };
let obj2 = { a:2 };

let obj3 = {...obj1, ...obj2};
// obj3 is { a:2, b:2, c:3 }

Drew Town • Jul 10 '19

This is usually how I do optional options in an object.

If I have a function that accepts an object of options I'll spread them into the default options. It works great because all of the latter keys take precedence like you stated.

Jordan Kicklighter • Aug 6 '19

This totally works, but have you tried using default values in the function signature? I believe that was added in ES6, but I can't remember for sure.

function (name: 'John', id: 5) {
  ...
}

Drew Town • Aug 6 '19

I have and it works well for simple function signatures. But, when you reach a point where you have 5, 6, 7 optional parameters and you need to change the last one this pattern becomes a real pain. The problem is there is no way to invoke named function parameters, you have to do it by order.

Jordan Kicklighter • Aug 6 '19

If you add curlies, you can still specify the arguments in the signature but treat it as an object. Best of both worlds.

Felippe Regazio • Jul 10 '19

i do the same ;P

Laurie • Jul 10 '19

Absolutely important to point out! Thanks for mentioning it.

Douglas Barbosa de Lima • Jul 10 '19

I like to use the Set Object with Spread Operator to display non-repeat data into Array:

const arr = [1, 2, 3, 1, 2, 3];
const newArr = [...new Set(arr)]; // [1, 2, 3]

Spread is a awesome feature.
Congratulations for the post!

Milos Protic • Jul 11 '19

Note that this only works if you have an array of primitive types

Will Vincent • Jul 10 '19

Was going to leave the same comment :)

Laurie • Jul 10 '19

Nice one!

Fernando Doglio • Jul 10 '19

Nice quick round up! Thanks! A quick word of warning, when copying an array, it does a shallow copy, so doing:

let myarr = [[1],[2]]
let copyArr = [..myarr]
copyArr[0][0] = 12

This will change myarr as well.

Laurie • Jul 10 '19

Definitely. My understanding is that this only applies because the example above is multidimensional. So the first level is copied, but the deeper levels are referenced. If it's one-dimensional it is a deep copy.

Jonathan Silvestri • Jul 10 '19

Hey Laurie!

Good post, but just letting you know that your error example does work and will not throw an error.

  let arr = [1,2,3,4]
  let copy = {...arr}

Arrays are objects, where the index is the key. What you end up with in this example is:

  console.log(copy) // { 0: 1, 1: 2, 2: 3, 3: 4 }

Laurie • Jul 10 '19

Oops! I think I meant to flip that around. Will fix, thanks for catching it.

Jonathan Silvestri • Jul 10 '19

No problem!

Lukáš Doležal • Jul 11 '19 • Edited

Great stuff. Note that spread operator works also in deconstruction too, not only construction:

Take first (or n first) fields of an array:

let [first, ...rest] = [1, 2, 3, 4, 5];
// first == 1
// rest == [2, 3, 4, 5]

Or as function definition:

function giveMeAllTheParams(...params) {
  console.log(`You gave me ${params.length} params`);
}

giveMeAllTheParams(1, 2, 3, 4, 5);
// You gave me 5 params

Atul Rawat • Jul 11 '19

Good one😍

Greg Bacchus • Aug 9 '19 • Edited

Likewise for objects, can be used to create a new one that omits certain properties.

const {a, ...rest} = {a: 1, b: 2, c: 3};

Laurie • Jul 11 '19

All great examples!

Jordan Kicklighter • Aug 6 '19

I always forget this since there seem to be more places to use the construction functionality. Thanks for the reminder!

Miguel Rodriguez • Jul 10 '19

Hi Lauri, thank you for this post, I'm just learning JS and this really helped me to understand the spread operator.

As I'm a beginner in JS I have a question: in the "Pass arguments as arrays" part, I understand that x=0, y=1, and z=2. What would happen if my function is expecting 3 parameters but for some reason, the array has 2 or 4 elements? Or we would simply try to make sure that the size of the array and the parameters expected by the function are equal?

Laurie • Jul 10 '19

The name of a function and the number of parameters it takes (the placeholders for arguments) represent something called a function signature. This is unique within the current scope of the program. If you were to pass too many arguments it would throw an error because it would not find a corresponding function signature, i.e. a function with that name taking 2 (or 4) elements.

Aaron Klein • Jul 11 '19

That may be the case in other languages, but not in JS. In JS, if you pass too many arguments, the extras will be ignored (but accessible through the variable named arguments). If you pass too few arguments, the missing arguments will be given the value undefined (which may result in an error, but not definitely).

Laurie • Jul 11 '19

You're correct, I put my Java hat back on and shouldn't have!
Looks like this has some good explanations. stackoverflow.com/questions/126940...

Miguel Rodriguez • Jul 10 '19

Got it, thank you!

J3m5 • Jul 11 '19

You can also use it to conditionally add properties to objects.

const obj = {
  a:1,
  ...true && {b:2},
  ...false && {c:3}
}

// {a:1,b:2}

Robin Kretzschmar • Jul 10 '19

I am using it in the React environment quite often and I'm curious if you have a clue about how the performance is compared to the equal methods like copying an array with spreading vs copying it via slice()?

Laurie • Jul 10 '19

It depends on the JS engine running, i.e. chrome vs safari. My understanding is that slice used to be more performant but that gap has been cut significantly and on many browsers, the spread operator is the same, or possibly better performance wise.

And since slice() only works for arrays, the spread operator is a more powerful piece of syntax.

Robin Kretzschmar • Jul 10 '19

Thanks for the answer, wasn't aware of it but a quick research confirmed it :)

Jordan • Jul 13 '19

Also, here's a nice quick way to go from Map to array of entries.

let map = new Map([['a', 1], ['b', 2], [{foo: 'bar'}, 3]]);
let entries = [...map]; // [['a', 1], ['b', 2], [{foo: 'bar'}, 3]]

// maybe useful to quickly stringify a map?
JSON.stringify([...map])

Ken Bellows • Jul 11 '19

Great summary! Two extra thoughts:

Another handy use is to convert iterable objects to Arrays when you need the Array methods:

  /* Filtering a Set */
  const fruit = new Set(['apple','banana','avocado','watermelon'])
  // No no no!
  fruit.filter(f => f.startsWith('a')) // TypeError: fruit.filter is not a function
  // Instead...
  [...fruit].filter(f => f.startsWith('a')) // ["apple", "avocado"]

  /* Mapping over a generator's output */
  // counts from low to high-1
  function* range(low, high) {
    for (let i=low; i<high; i++) {
      yield i
    }
  }
  // No no no!
  range(1,10).map(n => n**2) // TypeError: range(...).map is not a function
  // Instead...
  [...range(1,10)].map(n => n**2) // [1, 4, 9, 16, 25, 36, 49, 64, 81]

Just a thought I had: I sort of wish that your error example worked like Object.entries, and in fact that Objects were iterable as entries the way that Maps are. I wish I could do stuff like this (but to be clear, this does NOT currently work):

  const o = {'a': 10, 'b': 20}
  [...o] // [["a", 10], ["b", 20]]
  for (const entry of o) console.log(entry)
  // ["a", 10]
  // ["b", 20]

Sigh... but I dream...

JulietteR • Jul 12 '19

Thank you for this article!

One note--I noticed a small typo in the Merge Objects example.
The second object should be named obj2

let obj1 = {a: 1, b: 2, c: 3}
let obj1 = {d: 4, e: 5, f: 6}

let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Laurie • Jul 12 '19

Thanks! I’ll fix that when I have a moment.

Florian Klampfer • Aug 6 '19

Missing my favourite use, which is to conditionally and declaratively add keys to objects, which isn't possible otherwise.

const obj = {
  a: 3,
  ...condition === true ? { b: 4 } : {},
}

Same for arrays

const plugins = [
  new BasicPlugin(),
  ...env === 'production' ? [new ProductionPlugin()] : [],
];

Pranat • Jul 11 '19

What is the way you always use to prevent error when data is null or undefined?
For my case, I always face this when 'initVar' is null or undefined. Or at lease 'aaa' is null or undefined.

const {aaa: {bbb, ccc}} = initVar

Lukáš Doležal • Jul 11 '19 • Edited

Maybe you could actually use the spread to start with default values and override with initVar:

const { aaa: { bbb, ccc } } = {
  aaa: { 
    bbb: "default bbb", 
    ccc: "default ccc", 
    ...(initVar && initVar.aaa) 
  }
}

But not sure if that is really useful in maybe more complex deconstructions? :D

Laurie • Jul 11 '19

So that example is desrructhring assignment. I look at that in a different post which is linked at the bottom of this one.

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Jul 11 '19 • Edited

Copying an array

Why would you copy an array like this, rather than let copy = arr ?

Laurie • Jul 11 '19 • Edited

Because of it being a shallow copy.

let copy = [1, 2, 3]
let arr = copy
copy.push(4)
// copy is [1,2,3,4]
// arr is [1,2,3,4]

The spread operator would mean this

let copy = [1, 2, 3]
let arr = [...copy]
copy.push(4)
// copy is [1,2,3,4]
// arr is [1,2,3]

However, this only works for flattened arrays. Multidimensional arrays will be deep copies at only the top level.

Seanmclem • Jul 11 '19

It does a deep copy for an array only, but does a shallow copy when used on an object. Is that right? Doesn't mention it in your article

Laurie • Jul 11 '19

That is correct. And yes, it's something that I likely should have mentioned!

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Jul 11 '19

Thank you for explaining! :)

Jacob Evans • Jul 10 '19

I would love some real-world use cases for Rest as well. I rarely use it but I feel like thats because I lack enough understanding. Same goes with Switch though, I need to just use them more lol

Ken Bellows • Jul 11 '19

I find rest parameters super useful for writing wrapper functions. For a super simple example, I often like to define small logger functions as wrappers around console.log() that always add certain context, such as a label that tells me where the log was issued:

const log = (...args) => console.log('MyFile.js ::', ...args)

// ... later
const payload = {
  name: 'Ken',
  job: 'Web dev'
}
log('Sending:', payload)
// => MyFile.js :: Sending: { "name": "Ken", "job": "Web dev" }

This is a pretty trivial example, but I've used it for much more complicated cases where I basically always use the same default arguments for calls to library functions with lots of arguments, and I want a wrapper that supplies all but the last couple arguments for me. I'll write a wrapper that gathers arguments into a rest array, then spreads them into the end of my call to the library function, like I did with console.log above