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!

Does it help when you see that const [ , , { count }] = [{ apple: 1}, {pear: 5}, {count: 13}, {delta: 2}] assigns 13 to count? — trincot
– trincot, Commented Feb 25, 2019 at 16:25
Right! Thanks @Bergi see, i didn't know you could do const [aVarName] = test; and that will be the equivalent of const aVarName = test[0];. I thought You're always unpacking values and you can assign defaults but any value you pass into the [] it sees as a param to destructor — pourmesomecode
– pourmesomecode, Commented Feb 25, 2019 at 16:31

adiga · Accepted Answer · 2019-02-25 19:28:24Z

9

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)

edited Feb 25, 2019 at 19:28

answered Feb 25, 2019 at 19:14

adiga

35.4k9 gold badges65 silver badges88 bronze badges

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

2 Comments

pourmesomecode Over a year ago

Wow thank you for this! So it's pretty much syntactic sugar for variable.key. That's why you can do the length destructuring. I assume in that case, I can also destructor any method off the String object So I could pull out the bind or prototype methods also?

adiga Over a year ago

@TryingToLearnJS you can get them like that. But, do note that you cannot execute the prototype methods like this forEach() because they need a this. Length works because it's a property. You can however execute the static methods of array like this:

const {from, isArray } = Array; var arr = from({ length: 5 }) // returns an array of length 5;  isArray(arr) // returns true

Jonas Wilms · Accepted Answer · 2019-02-25 17:47:32Z

1

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

answered Feb 25, 2019 at 17:47

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Collectives™ on Stack Overflow

Nested object in array - object destructing es6

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related