Why {…undefined} is not an error, but …undefined is an error

Question

JavaScript，第一行是错误，第二行是正确。

console.log(...undefined) // error console.log({...undefined}) // {}

Answer 1

console.log(...undefined) // error

is a standard ES6 spread, which requires the argument to be an iterable types. undefined is not iterable, thus you get an error.

console.log({...undefined})

is the proposed Object spread syntax. For this syntax, the argument passed in will have its properties copied into a new object. In this case, the spec defines the following :

1. If source is undefined or null , let keys be a new empty List.

so that's why. In this case, it sees undefined as "copy nothing", so it is not an erroneous case.

Answer 2

undefined can be defined as an object or as a rest parameter, without babel being defined

 "use strict"; const fn = (...undefined) => console.log(...undefined); fn(); fn({b: 7}); fn({g: 9, x: 10}); fn({opts: "busted"}) 

Where babel is defined, using object rest

  "use strict"; const fn = ({...undefined}) => console.log({...undefined}); fn(); fn({b: 7}); fn({g: 9, x: 10}); fn({opts: "busted"}) 

Attempt to reproduce error where babel is defined and spread element precedes undefined

 "use strict"; const fn = ({...undefined}) => console.log(...undefined); // no error fn(); fn({b: 7}); fn({g: 9, x: 10}); fn({opts: "busted"})