Nested object in array - object destructing es6

Question

So I know you can do object destructing like: const { item } = data;

Also array destructing like: const [ item ] = data;

You can also do this in function params like: const x = ({ item }) => item;

And I've seen lots of questions and answers on it. However I haven't seen an example and a good explanation of nested objects in an array.

---

const test = [{ count: 1 }];

const [{ count }] = test;

I'd normally do:

const x = test[0];

const { count } = x;

It was only today while testing in codepen that I figured out you could destructor them both within the same assignment.

Could anyone explain what's going on when I'm doing [{ count }]? Because I'm doing array destructing with the const [] = test but I'm not destructing anything so that obviously fails. If I then { count } within that I get the value out I want.

I can't break it down enough to understand how it's working. I'd assume [] = test is the same as test[0] then i do { count } = test[0]. But I'd just like to understand how it's working more.

I did have a look through some of the MDN docs and stuff but I can't find a good explanation on the above scenario I mentioned.

Thanks!

Answer 1

Nested destructuring can be confusing sometimes. You can always check on the Babel compiler to get the ES5 equivalent and understand how it works

So, this code:

const test = [{ count: 0 }, { whatever: 1 }, { total: 2 }];
const [{ count }, , { total }] = test

console.log(count, total)

Gets trasnpiled to:

var count = test[0].count;
var total = test[2].total;

As you can see, index = 1 item is ignored (MDN) and we are only destructuring the 0th and 2nd index properties

Since, we are on the topic of destructuring array objects, this can be used in much more advanced ways. You can destructure an item at any index like this:

const test = [{ count: 0 }, { count: 1 }, { count: 2 }];

const { 2: { count } } = test;

console.log(count)

This gets the count at index 2. This code is equivalent to:

var count = test[2].count;

Note that, we are using {} here instead of []. This instructs the compiler to get the count at the key: 2. You can also get the length of the array using this type of destructuring:

const { length } = test; // same as test.length 

You can make it even more dynamic with a computed object property name:

const test = [{ count: 0 }, { count: 1 }, { count: 2 }];
const index = 2;

const { [index]: { count } } = test;

console.log(count)

Answer 2

It might make things easier if you think of Object & Array destructuring as the reverse operation of object & array creation:

 ({ key: value  } = // reverses building object with "key"
  { key: "test" }); // builds up object with "key"

 ([{ nested: value2 }] = // reverses building an array containing an object
  [{ nested: "test" }]); // builds up an array containing an object