DEV Community

Cover image for Destructuring and Nested Destructuring in ES6
Jack Harner πŸš€
Jack Harner πŸš€

Posted on • Originally published at jackharner.com on

Destructuring and Nested Destructuring in ES6

Have you ever had a JavaScript object that you needed to extract a bunch of different values out of? Today I'd like to introduce you to your new best friend: ES6 Destructuring.

ES6 brings with it a bunch of nifty new ways to do things with JavaScript. One of the things I use ALL THE TIME is Destructuring. It allows you to pick and choose properties out of an object and automatically assign them to a variable.

Take the following JavaScript Object for example:

let person = {
  name: "Bob",
  age: 26,
  married: false,
}
Enter fullscreen mode Exit fullscreen mode

Previously, if you needed to use and manipulate the different properties of that object you would have to assign each variable manually:

var person = {
  name: "Bob",
  age: 26,
  married: false,
}

var name = person.name,
  age = person.age,
  married = person.married

console.log(married) // false
Enter fullscreen mode Exit fullscreen mode

Now let's do that again with ES6. You'll find it's a whole lot cleaner.

let person = {
  name: "Bob",
  age: 26,
  married: false,
}

const { name, age, married } = person

console.log(age) // 26
Enter fullscreen mode Exit fullscreen mode

Not Just Objects Either!

Destructuring is not just for Objects, you can even use it on an Array!

let people = ["Jon", "Bon", "Jovi"]

const [first, second, third] = people

console.log(second) // "Bon"
Enter fullscreen mode Exit fullscreen mode

It assigns the items in your array, in order, to the corresponding variable in the destructuring array.

If, for whatever reason, you need to skip the first two items in the array you can do so with just a comma:

let people = ["Jon", "Bon", "Jovi"]

const [, , only] = people
console.log(only) // "Jovi"
Enter fullscreen mode Exit fullscreen mode

Nested Destructuring

In the real world, you're probably going to have more complex objects than just that, so let's take a look at a more complex object example.

let person = {
  name: "Robert",
  age: 60,
  married: {
    spouse: {
      name: "Roberta",
      age: 62,
    },
    anniversary: "01-01-1970",
  },
  kids: [],
}
Enter fullscreen mode Exit fullscreen mode

Given this more in depth Object, how would you go about getting just Robert's spouse's name? Any Ideas? With a little magical thing called "Nested Destructuring".

let {
  married: {
    spouse: { name },
  },
} = person

console.log(name) // "Roberta"
Enter fullscreen mode Exit fullscreen mode

With Nested Destructuring, you can cherry pick properties to get from as many levels down in your object as you need. Obviously this can get pretty messy pretty quickly so feel free to destructure more than once in order to keep your code clean.

Keep in mind, when you destructure down into a property, like the example above, it does not set the variable of the property you went down in to. So in this case both spouse and married are undefined.

let {
  married: {
    spouse: { name }, },
} = person

console.log(spouse) // undefined
Enter fullscreen mode Exit fullscreen mode

If you need spouse and name as separate variables you will have to destructure more than once:

let {
  married: { spouse },
} = person
let { name } = spouse

console.log(spouse) // {name: "Roberta", age: 62}
console.log(name) // "Roberta"
Enter fullscreen mode Exit fullscreen mode

What If I Need To Destructure To A Different Variable Name?

Sometimes in the real world, data comes in with weird property names, or you need to extract different nested properties that happen to have the same name. Don't worry though, ES6 has you covered.

Let's keep using our more complex person Object and extract BOTH his and his wife's name at the same time.

let person = {
  name: "Robert",
  age: 60,
  married: {
    spouse: {
      name: "Roberta",
      age: 62,
    },
    anniversary: "01-01-1970",
  },
  kids: [],
}
Enter fullscreen mode Exit fullscreen mode

Based on what we've gone over so far, your first thought might be to do something like this:

const {
  name,
  married: {
    spouse: { name },
  },
} = person
Enter fullscreen mode Exit fullscreen mode

However if you were to try this you'd be met with a nice fat "Duplicate Assignment" error because you're trying to set the name variable twice. Babel or whatever ES6 Compiler you're using won't like that at all, so you need to define custom variable names.

Check it out:

const {
  name: hisName,
  married: {
    spouse: { name: herName },
  },
} = person

console.log(hisName + " Is Married To " + herName) 
// Robert Is Married To Roberta
Enter fullscreen mode Exit fullscreen mode

All you're doing is saying "Take this property and extract as this specific variable". Which when compiled to regular JavaScript for your browser it looks like this:

var hisName = person.name
var herName = person.married.spouse.name
Enter fullscreen mode Exit fullscreen mode

Keep It Clean, and Keep It Simple

Using Destructuring allows you to cleanly and simply extract properties from objects in ES6 JavaScript into variables to be manipulated and modified. Keep It Simple Stupid and hit me up on Twitter @JackHarner if you learned something!


Featured Image by Ricardo Gomez Angel on Unsplash

Discussion (0)