DEV Community

Destructuring JavaScript objects like a pro

Will Soares on June 16, 2019

Hello there! For a long time now I've been wanting to take notes on a couple of tricks I currently use at work regarding the concept of Destructur...

Read full post

Laurin Quast • Jun 17 '19

You can even do this wizardry:

const object = { prop1: "value1", prop2: "value2" };

const  propName = "prop1";

// destructure dynamic property
const { [propName]: value } = object;

value === "value1" // true

Will Soares • Jun 17 '19

Yes! Dynamic destructuring!

Vitor Reis • Jul 2 '19

js wizardry... That's pretty cool I haven't thought of that

Paulo Roberto Rosa • Sep 25 '19

It is possible to do it nested???

Laurin Quast • Sep 26 '19

You mean the following?

const object = { prop1: "value1", prop2: { a: "abc" } };
const  propName1 = "prop2";
const propName2 = "a";
const { [propName1]: { [propName2]: value } } = object;
value === "abc" // true

Sergey S. Volkov • Jun 16 '19 • Edited

Good article, thanks ! :)

But one moment

We have small but important difference between default value of destructed property and ||

const { foo = "bar" } = baz

In this case runtime compiler (as I know) checks value only on undefined and because of this some falsy value like false or '' is not been replaced to default value "bar"

But in other case

const foo = baz.foo || "bar"

|| checks first operand on any possible falsy value and if we have .foo like null then variable will been equals to "bar"

Andrey Vladikin • Jun 16 '19

let a = 1;
let b = 2;
[a, b] = [b, a];
=)

Timkor • Jun 16 '19

Nice, didn't realise one could easily use this to swap variables!

Will Soares • Jun 16 '19 • Edited

Congrats :)
I should probably tell people not to look at comments before trying 😄

Vesa Piittinen • Jun 16 '19 • Edited

I'd advice against deeply nested destructures like the given example:

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    } = {}
  } = {}
} = homoSapiens;

There is classs there, which could be a typo and it would easily go totally unnoticed.

Another point I'd like to make is that it is very hard to read the above. Just do:

const homoSapiensInfraClass = homoSapiens['class'].infra.name || ''

Or if you want to allow all objects to miss:

import get from 'lodash/get'

const homoSapiensInfraClass = get(homoSapiens, 'class.infra.name', '')

Much easier to understand what is happening. If you want to get multiple items you could use array destructuring:

const [homoSapiensInfraClass, homoSapiensFamily] = [
    'class.infra.name',
    'family'
].map(item => get(homoSapiens, item, ''))

Although this makes sense only if you have a whole lot of those. This example is good because it retains the normal reading order, while renaming while destructuring fights against the normal reading order. Rename in destructuring should be used sparingly to keep code easy to read.

Will Soares • Jun 16 '19

Hey Vesa, thank you for the suggestion. I appreciate your contribution.

As for your concern on legibility I would take that more as a preference matter, I personally don't see that as a very hard thing to read but I understand your point.

I think the option you gave it's nice if you want things to explicitly fail so you'd be aware of possible typos. In a context in which you don't know what to expect for the structure of the homoSapiens object for instance I'd prefer to be safe and set default values for each object being destructured, instead of receiving errors like Cannot read property 'x' of undefined.

And yeah, if you can use lodash then go for it ;)

Timkor • Jun 16 '19

I think it's by purpose. class is a reserved keyword. Although possible to use in some modern browser, I bet IE doesn't like this.

Brittan McGinnis • Jun 19 '19

I would agree with you. I think that just because you can doesn't necessarily mean that you should. I do appreciate the knowledge sharing though and it is interesting to see the different ways that it's possible to destructure.

Kyle Agronick • Jun 17 '19

Thats cool. I didn't know you could do that with the default values. It seems backwards to me though with the variable to assign from on the left of the colon and the variable to assign to on the right.

Chris Watson • Jul 5 '19

I found that slightly counterintuitive to start with, too, when you're used to name = value. The easiest way I find to remember the order is { from: to } = obj. Also, it wouldn't make much sense to use { to: from } = obj because you're no longer putting the from in the same position as the key is in the object.

Alain Van Hout • Jun 17 '19

A very nice explanation 😁

Just because it makes my inner biologist cringe: could you possible replace 'specie' with 'species' (because that's both the singular and the plural form: en.wiktionary.org/wiki/species)?

Will Soares • Jun 17 '19

Updated! Thanks for that :D

Laurie • Jun 16 '19

Haha, we had the same idea this week! Nice post :)

3 Powerful Examples of Destructuring Assignment

Laurie ・ Jun 11 ・ 2 min read

#javascript #webdev #productivity #beginners

Will Soares • Jun 16 '19

Ah yeah! Great post! The more the merrier :)

Laurie • Jun 16 '19

I mean, it’s clearly one of the best bits of modern ES syntax. Everyone must know!

mehdibenhemdene • Oct 23 '19 • Edited

I don't know if anyone already posted this answer but from what I see must people used objects to do it instead of arrays.

My solution :

var foo = "foo";
var bar = "bar";

[bar, foo] = [foo, bar];

Kabue Charles • Dec 4 '19 • Edited

You actually don't need dynamic de-structuring to swap values of two variables without using any extra variable:

const { prop1: prop2, prop2: prop1 } = { prop1: "value1", prop2: "value2" }

console.log(prop1) // value2
console.log(prop2) // value1

Sam Atkinson • Jun 16 '19

Did not know you could destructure an array. Very cool! Thanks for the post.

Timea Kiss • Jun 21 '19

I have one serious issue with this article -> wanna give it more than one <3s :D Thanks!

Will Soares • Jun 21 '19

Thanks Timea. I'm glad you liked it 🎉

Sergei Sarkisian • Jun 20 '19

In the complex cases it seems just like another bad spaghetti code.

But in the simple cases it’s pretty usable and clean.