Consider this simple example:

const someFunction = () => [1, 2, 3];

Now

const myArr = [...someFunction];

gives a run time error which is understandable since functions are not iterable. So

const myArr = [...someFunction()];

is the correct implementation.

However,

const myObj = {...someFunction};

results in {} and doesn't cause the same error.

Please help me understand this behavior and why the last case doesn't cause the same error.

Consider this simple example:

const someFunction = () => [1, 2, 3];

Now

const myArr = [...someFunction];

gives a run time error which is understandable since functions are not iterable. So

const myArr = [...someFunction()];

is the correct implementation.

However,

const myObj = {...someFunction};

results in {} and doesn't cause the same error.

Please help me understand this behavior and why the last case doesn't cause the same error.

• javascript
• function
• ecmascript-6
• iterable

• 1 Great question!! – T.J. Crowder Commented May 26, 2020 at 10:50

2 Answers 2

Your {...someFunction} works because functions are objects, and ... in an object literal is designed to work on objects, not iterables: It takes their own, enumerable properties and puts them in the object being created. Functions don't have any own, enumerable properties by default, so you'll get an empty object, but if you added a property to the function, then used ... in an object literal, that property would be copied to the new object:

const someFunction = () => [1, 2, 3];
someFunction.myProperty = "foo";

const obj = {...someFunction};

console.log(obj.myProperty);   // "foo"
console.log(Object.keys(obj)); // ["myProperty"]

... means different things in different contexts. The ... in an array literal is different from the ... in an object literal. In an array literal, as you say, it uses iteration to build up entries for the array, but that's not true in an object literal. ... in an object literal is property spread, added in ES2018. It doesn't rely on iteration at all; instead, it uses an internal operation called [[OwnPropertyKeys]] to find the keys of the properties to copy from the source object, then copies them (this is in the CopyDataProperties internal operation).

Javascript functions are objects and you spread the function (object) properties.

You could take the function and add a value like so:

someFunction.hello = 'world';
console.log(someFunction.hello);