110

While developing my react App, I needed to send a conditional prop to a component so I found somewhere a pattern to do so, although it seems really weird to me and I couldn't understand how and why it worked.

If I type: 

console.log(...undefined)   // Error 
console.log([...undefined]) // Error
console.log({...undefined}) // Work

When the spread operator is activated on undefined an error is raised, although when the undefined is inside an object, an empty object returned.

I'm quite surprised regarding this behavior, is that really how it supposed to be, can I rely on this and is that a good practice?

strider
  • 5,674
  • 4
  • 24
  • 29
omri_saadon
  • 10,193
  • 7
  • 33
  • 58
  • I think anything that relies on an Iterator will throw with `null` or `undefined` because there's no way to implement the required methods on those values. I don't know why the object spread syntax works. – llama Oct 26 '17 at 14:46
  • Come to think of it, I guess it makes sense that Object literal spread syntax doesn't fail, since what it's spreading is often another plain object, and those aren't Iterators by default, so they almost have to make an exception in that case. – llama Oct 26 '17 at 14:48
  • `{...undefined}` This won't even compile with Babel, so not something I would use. – Keith Oct 26 '17 at 14:49
  • 1
    Actually scrap that, it needs `stage-0` so I assume is not ES6.. Is this spread feature going to be ES7? – Keith Oct 26 '17 at 14:54

1 Answers1

130

This behavior is useful for doing something like optional spreading:

function foo(options) {
  const bar = {
    baz: 1, 
    ...(options && options.bar) // options and bar can be undefined
  } 
}

And it gets even better with optional chaining, which is in Stage 4 now (and already available in TypeScript 3.7+):

function foo(options) {
  const bar = {
    baz: 1, 
    ...options?.bar //options and bar can be undefined
  } 
}

a thought: its too bad it doesn't also work for spreading into an array

axmrnv
  • 964
  • 10
  • 23
strider
  • 5,674
  • 4
  • 24
  • 29