Object Destructuring with Rest Parameter, on Array

Question

I have a decent handle on Rest, Spread, and Destructuring in Javascript.

Even so, I have been unable to figure out what exactly is happening in the following code:

const { ...foo } = [1, 2];
console.log(foo);

I have broken down the steps in my head, as follows:

...foo creates a new array, a copy of [1, 2]
The object destructuring should, to my understanding, unpack an object on the right-hand-side, and place it into new variable(s). This is where I fall off. Above, the code behaves such that an array from the right-hand-side is seen as an object, and a new object is created with each property equal to each element of the array. That does not happen in a destructuring assignment without rest: const { foo } = myObj; <-- No new object is created here, foo becomes a constant equal to the foo property in myObj.

Questions

What exactly is happening in the destructuring assignment?
Could someone demonstrate the steps that occur above, without using destructuring?
Is there a place in the ECMA spec (or similar) where the behavior is explained?

try console.log({...[3,4]}) . since arrrays are also object in js such that you can say that first key is 0 and so on. this is how i understood. also you can access arrays as if you would access an object. for example [3,4][0] would give 3 and {0:3,1:4}[0] would also give 3 — cmgchess
– cmgchess, Commented Nov 26, 2022 at 15:17
It is almost as if no destructuring really happens. That, in fact, what is going on is simply that we create an object literal, and then iterate through the array to create properties for each array element. Bizarre.. — Magnus
– Magnus, Commented Nov 26, 2022 at 15:24
Thanks @cmgchess, but that does not explain what is actually happening here, step by step. The destructuring assignment somehow creates a new object, where it has converted each array element into a property. I am trying to understand what happens under the hood. — Magnus
– Magnus, Commented Nov 26, 2022 at 15:31
The bizarre part is when you destructure an array into an object like that you would expect that foz has a length property but it doesn't. I guess that array has some special treatment in this scenario. — Eldar
– Eldar, Commented Nov 26, 2022 at 15:31
Since the first assignment is clear to you, I believe it should not be part of the question. — trincot
– trincot, Commented Nov 26, 2022 at 15:36

trincot · Accepted Answer · 2022-11-26 15:58:59Z

3

What exactly is happening in the destructuring assignment?

A destructuring assignment where the left side has [ ...rest] notation will create an array for rest. When it has { ...rest} notation, it will create a plain object for rest.

In the first case, the array values from the right hand side are iterated, and these populate the left hand array.

In the second case, the object entries from the right hand side are iterated, and these define the key/value pairs of the left hand object.

Could someone demonstrate the steps that occur above, without using destructuring?

Like this:

let foo = {};
for (const pair of [1, 2].entries()) {
    foo[pair[0]] = pair[1];
}

console.log(foo);

Is there a place in the ECMA spec (or similar) where the behavior is explained?

The ECMA Script reference is at Destructuring Assignment, and the ObjectAssignmentPattern with AssignmentRestProperty. In that section you'll find Runtime Semantics: RestDestructuringAssignmentEvaluation.

There you see a plain object is created (in step 2). In step three the procedure CopyDataProperties ( target, source, excludedItems ) is executed. This copies enumerable (see step 4.c.ii) properties of the source object (in your case an array object) into the target object.

It is important to stress that only own, enumerable properties are included, which explains why for instance the length property is not copied into the target object.

answered Nov 26, 2022 at 15:58

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eldar Over a year ago

Thanks this also answers my question. It is funny that length property is an example for Object.prototype.propertyIsEnumerable() method.

Magnus Over a year ago

Awesome, the ECMA pointer completed the picture for me. Thank you!

Collectives™ on Stack Overflow

Object Destructuring with Rest Parameter, on Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related