I just launched a new course on ES6! Use the code WESBOS for $10 off.

Strengthen your core JavaScript skills and master all that ES6 has to offer. Start Now →

A Dead Simple intro to Destructuring JavaScript Objects

Destructuring is a huge part of ES6. If you want to learn all about the different parts of destructuring check out my ES6.io video tutorials or read some of the other articles on this blog. This post is a dead simple introduction to what destructuring actually is .

Along with arrow functions, let, and const, destructuring is probably something you’re going to be using every single day. I find it to be extremely useful whether I’m writing client side or Node.

What does destructuring mean? It’s a JavaScript expression that allows us to extract data from arrays, objects, maps and sets — which we’re going to learn more about in a future ES6.io video —into their own variable. It allows us to extract properties from an object or items from an array, multiple at a time.

Let’s take a look at what problem JavaScript destructuring really solves. Sometimes you need top level variables like so:

const person = {
  first: 'Wes',
  last: 'Bos',
  country: 'Canada',
  city: 'Hamilton',
  twitter: '@wesbos'
};
const first = person.first;
const last = person.last;

You get the point. You’ve got this pretty much repetitive code over and over again, where you need to make a variable from something that is inside of an object or inside of an array. What we could do instead of creating multiple variables, we destructure them in a single line like so:

const { first, last } = person;

Curly bracket on the left of the equals sign?! That is not a block. That is not an object. It’s the new destructuring syntax.

The above code says, give me a variable called first, a variable called last, and take it from the person object. We’re taking the first property and the last property and putting them into two new variables that will be scoped to the parent block (or window!).

console.log(first); // Wes
console.log(last); // Bos

Similarly, if I also wanted twitter, I would just add twitter into that, and I would get a third top level variable inside of my actual scope const { first, last, twitter } = person;

That’s really handy in many use cases. This is just one nested level, but for example, in React.js often you want to use destructuring because the data is so deeply nested in props or state.

Let’s say we have some deeply nested data like we might get back from a JSON api:

const wes = {
  first: 'Wes',
  last: 'Bos',
  links: {
    social: {
      twitter: 'https://twitter.com/wesbos',
      facebook: 'https://facebook.com/wesbos.developer',
    },
    web: {
      blog: 'https://wesbos.com'
    }
  }
};

I want to be able to pull out Twitter and Facebook URLs here. I could do this like it’s 1994 and we’re all running around with walkmans:

const twitter = wes.links.social.twitter;
const facebook = wes.links.social.facebook;
// Annoying!

We can use destructuring to do it one better!

const { twitter, facebook } = wes.links.social;
console.log(twitter, facebook); // logs the 2 variables 

Notice how we destructure wes.links.social and not just wes? That is important because we are destructuring a few levels deep.

This entry was posted in ES6, JavaScript. Bookmark the permalink.

31 Responses to A Dead Simple intro to Destructuring JavaScript Objects

  1. Jason says:

    Wes, this is the most concise/effective explanation of Destructuring that I’ve seen! It now makes perfect sense; thank you.

  2. Hardik says:

    Wes, This is really interesting. This is similar to how PHP handles objects.

  3. Esteban says:

    hey there great article, when I started reading I though that someone had the “great” idea of creating the php extract function for javascript, luckly is not the case 🙂
    but I wonder, whats the recommended way to set default values? lets say twitter doesn’t exists in this expression?

    const { twitter, facebook } = wes.links.social;

    will I get just an undefined value?

    thank you!

  4. Esteban says:

    LOL I found your other article where you expain how to set default values right after I submitted my comment

  5. Matt Wood says:

    Short and simple write-up. Thanks, Wes!

  6. Dan S says:

    Using the term “variable” when referring to a const values can be misleading. It doesn’t make a difference in this case but “constant” or even better “value” would be consistent. NIce intro and comment link to default values is good too.

  7. Jon Eyrick says:

    This is a really good explanation, thank you for sharing.

  8. Smith Samuel says:


    const { links: { social: { twitter, facebook } } } = wes;

    Is that not a valid way to destructure? I have used that in react and Aurelia.

    What do you think?

  9. AB says:

    Nice Article. I remember reading about a similar construct in D.Crockford Javascript:The good parts. Here is a re-factor with the ‘with’ statement:

    with (wes.links.social) {
    const tw = twitter;
    const fb = facebook;

    console.log(tw);
    console.log(fb);
    }

    This introduces some scoping issues, hence the console.log inside the *with* statement Any thoughts on why one should be used over the other? Thanks for the article.

  10. Marjorie Oszman says:

    Ooooooo

  11. Rarex says:

    const twitter = wes.links.social.twitter;
    const blog = wes.links.web.blog;

    const {twitter, blog} = ?

  12. Jamshed Iqbal says:

    Hey Wes! Your tutorials are so fascinating that entertain me a lot whenever I play them or play with them!!! Keep it up…

    One thing, Is there any other difference between const and let, besides that const can’t be re-assigned but let can?!

  13. Sam says:

    So what if i want to name my vatiables different than the name of the properties.
    Lets say i have a property first in person and i want it to destructure into a variable with a name firstName instead of name

  14. Justin Nipper says:

    Well, that really clears things up. What a great explanation.

  15. Kegan says:

    Great article Wes. Thank you!

  16. Jim says:

    Best description of destructuring I’ve seen!

  17. Jim says:

    I would love to see an example of a nested object as well.

  18. Himad says:

    You’re great! thanks for the explanation

  19. Great explanation Wes! I’d like to add that it is important to know that the brackets used on the left-side { twitter, facebook } is a block NOT to an object literal.
    Another interesting aspect is that you can actually omit the const or var declaration IF you add in a parenthesis like so ({ twitter, facebook } = wes.links.social)

    Why would you want to do that? Well, then twitter and facebook can be added on the top for brevity together with all other variable declarations (i.e. const twitter,facebook).

  20. Jonathan says:

    Great intro, thank you. Will likely look into more of your stuff because of how concise this was. Great site design too. Thanks again.

  21. Lance says:

    Love the sparseness of this post and still gave your audience some flavor: walkmans. And man, did we ramble! I wonder…. Did people take walkmans to work to listen to tunes like we do now with smartphones?

  22. Enver says:

    we can also use nested version like below

    { links : { social: {twitter, facebook}}} = wes

  23. Thomas says:

    Wes in 1994 we weren’t really running around with walkmans any more 😉😂

  24. kiran says:

    Nice, simple and understandable. Great work, keep it up!

  25. Lauri says:

    Thanks, very well explained

  26. Ty says:

    Thanks for the simple explanation, I understand destructuring a lot better now!

  27. Joe says:

    Look — all I want to say is THANK YOU for this super deadass simple explanation of destructuring. For a JS newbie, I was really struggling to make sense of it and no other resources I found online were helpful. Great stuff, man.

  28. Alex says:

    Thanks so much for explaining this clearly! I’ve seen this syntax for months but never truly understood what it was doing. Great read as well.

  29. Steve Johnson says:

    A shame it is restricted to creating top level variables. A more useful variant (to me anyway) would be the ability to create an object with a subset of another object properties.

    Like `let newObj = {“a”,”c”,”k”}(existingObj);`

Leave a Reply

Your email address will not be published. Required fields are marked *