Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Nested Destructuring

By  on  

Destructuring in JavaScript can initially feel confusing but the truth is that destructuring can make your code a bit more logical and straight forward. Destructuring does look a bit more complex when you're looking for a property several objects deep, so let's have a look at how to do that!

Simple destructuring looks as follows:

const { target } = event;

Here we use {} and = to name a variable the same as the property name (you can also use an alias while destructuring!). Grabbing a nested object value is a bit more complicated, however:

// Object for testing
const x = { y: { z: { a: 1, b: 2} } }

// Get "b"
const { y: { z: { b } } } = x;

console.log(b); // 2
console.log(z); // z is not defined
console.log(y); // y is not defined

Here we an object-like syntax with {} and : to set a var based on the nested obect property. Note that only the last nested property is given as a variable; the parents we reference along the way do not.

To get a reference to both b and y, for example, you can use a comma:

const { y, y: { z: { b } } } = x;

console.log(b); // 2
console.log(y); // {z: {…}}

Destructuring can take a while to get used to but, the more I use it, the more I appreciate how simple my code can be: no "dot" hell and less overall code!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Facebook Sliders With Mootools and CSS

    One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and...

  • By
    Optimize Your Links For Print Using CSS — Show The URL

    When moving around from page to page in your trusty browser, you get the benefit of hovering over links and viewing the link's target URL in the status bar. When it comes to page printouts, however, this obviously isn't an option. Most website printouts...

Discussion

  1. Steven Parker

    I find the second solution much more readable and I think it scales better when the destructuring gets even more complex.

  2. Filip Voska

    You say “no “dot” hell and less overall code”. This example is in contradiction to your statement.
    1. It is not less code, it is actually more code
    2. You also mention “dot” hell, but you just replaced each dot character with TWO curly braces characters. So you are in even deeper hell now.

    I honestly don’t think that 

    const { y: { z: { b } } } = x;

    is nicer than simply writing 

    const b = x.y.z.b

    Don’t get me wrong, (nested) destructuring is cool, but for me personally this is a poor example of good usage of nested destructuring. For me personally this would actually be an example where I would rather use dot notation instead of destructuring.

    • Ben C

      I agree, I would use the second, “traditional” method in this or a similar case. Like many examples, it is contrived, and hence doesn’t look terribly sensible. But the thing about object destructuring is that it is most useful for concisely grabbing multiple properties from an object with minimal repetition.

        const data = {
    category: "motoring",
    articles: [],
    categories: {
      motoring: {},
      fishing: {},
      sports: {}
    },
    user: {
      name: "...",
      bio: "...",
      avatar: {},
    }    
  };

  const { 
    articles, 
    categories: { [data.category] } : category, 
    user: { name }    
  } = data;

      which is arguably slightly preferable to:

        const articles = data.articles;
  const category = data.categories[data.category];
  const name = data.user.name;

      …and could be even better in an even less contrived real world case!

  3. kia

    What do you do if you want y, z, and b to be defined?

    • David Walsh

      Simply separate by comma — I added an example to the post. Great question!

  4. Ben C

    Great! I use object and array destructuring extensively but have never actually thought about whether you could get nested properties.

    Might be a good idea to add some array examples too?

  5. Anjan

    The way you have covered this topic is very nice. Thanks.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!