Getting array length by destructuring assignment

After reading the MDN doc with examples of Destructuring assignment, and there is an example like:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const [a, b, ...{ pop, push }] = [1, 2];
console.log(a, b); // 1 2
console.log(pop, push); // [Function pop] [Function push]

<!-- end snippet -->

and it says: This allows you to simultaneously unpack the properties and indices of arrays.

I took a second thought, isn't it will be fascinating if I could get the length of the array by doing this assignment at the same time getting the indices values out, so I tried this in my console:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const [x, y, ...{length}] = arr
console.log(x) // 1
console.log(y) // 2
console.log(length) // 0 | ??? isn't it should give me 2?

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// how about this...
const arr = [1, 2]
const {length} = arr
console.log(length) // 2 | ok well, it did work this way, but why not the destructuring assignment?

<!-- end snippet -->

So, does anybody know why the length did not got assigned with value 2 in the first destructuring assignment? or did I found a bug in JavaScript?

What this does

[a, b, ...something] = someArray

is it takes the rest of the elements (index 2 and after) from someArray and puts them into a single variable as an array.

Doing

...{ pop, push }

takes two properties from that array: Array.prototype.pop and Array.prototype.push. But there aren't any more elements, because the original array had only 2 items, so doing

...{ length }

will give you 0.

If the original array did have more items, you'd see a length. For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2, 3, 4, 5]
const [x, y, ...{length}] = arr;

console.log(length);

<!-- end snippet -->

The first two items are put into x and y. The last three items are taken as an array and then the length property is destructured from that array - so the length is 3.

Either add the number of destructured items previously to the length to get the actual length

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const [x, y, ...{length}] = arr
const actualLength = length + 2; // because 2 items were destructured; x and y
console.log(x) // 1
console.log(y) // 2
console.log(actualLength);

<!-- end snippet -->

Or use object destructuring syntax instead

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const { 0: x, 1: y, length } = arr;
console.log(x) // 1
console.log(y) // 2
console.log(length);

<!-- end snippet -->

Or, more understandable at a glance than either of the above - just do const { length } = arr on a separate line.

Let's see what happens when you only take one element off

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const [x, ...{length}] = arr
console.log("x", x) // 1
console.log("length", length) // 1

<!-- end snippet -->

Notice how the length is one, because you start with 2 elements, then get rid of 1, and 2 - 1 is 1.

Why does this happen? ... means "rest", so it's the rest of the properties.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const [x, ...rest] = arr
console.log("x", x) // 1
console.log("rest", rest) // [2]

<!-- end snippet -->

When you use { } you get a property off of the rest, so it's the same as saying

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const arr = [1, 2]
const [x, ...rest] = arr
console.log("x", x) // 1
const {length} = rest;
console.log("rest", rest) // [2]
console.log("length", length) // 1

<!-- end snippet -->