“JavaScript ES2015's Object Destructuring” may sound scary at first, but it’s really very simple: it lets you access an object’s keys more easily. Before we get into what it is, let’s explain why its so helpful.

Working with nested objects

Lets say we have a big user object with several layers of other objects. In our hypothetical program, we’ll keep on using their name, age, and level, but really not much else. To save time, we’ll want to store those values in variables. Keeping in mind that we want to write DRY code and not repeat ourselves, how would we accomplish this? Let’s look at some options:

What are we really doing here? We’re essentially taking the nested keys and then assigning them to a local variables. That’s it. Option 1 has us going through and defining them each as they are in the original user object, but that feels like a “cure is worse than the disease” situation.

Option 2 is a bit better, we would have to make a local description variable as a shortcut. This would let us type out “description” and not “user.attributes.description” every time. But that still feels like a lot of typing.

Destructure it

As of ES2015, here’s all we need to do:

With the new syntax, we can skip over the part where we define a new object in order to use its keys. Instead, we’re just defining the keys, since we don’t actually care about the object. It looks weird with the {} on the left of the equal sign, but think of it like we’re just reaching directly inside of our old description object, and pulling out the keys, then tossing out the useless description .

Those key names are just as important as ever though; there must be a name , age , and level key in the user.attributes.description object for this to work. And don’t forget to actually define them as variables with let or const ! (we don’t speak of var , but that technically also works…)

// yes

let {name, age, level} = user.attributes.description // no

{name, age, level} = user.attributes.description

// you wouldn't intentionally do this,

// it's just a common mistake

One other thing to consider: impossible variable names. What do you do when your object has key names that aren’t valid JS variable names? This is common when working with APIs, you’ll find “-” in a lot of key names:

let data = {

/* more keys*/

"name": "tommy",

"obj-id": 2

}

Luckily, it’s very simple. Just put the offending key name in quotes, then use a colon to give it a usable name. It’s sort of like you’re creating another mini object to reassign the key:

let data = {

/* more keys*/

"name": "tommy",

"obj-id": 2

}

const {name, "obj-id": objId} = data console.log(name) // "tommy"

console.log(objId) // 2

Also, fun fact, you can destructure arrays, and things get even more fun when you make variables that correspond to different levels of your original object.

Using it with React

While my example above is just the slightest bit contrived, it’s not uncommon to deal with deeply nested objects when using libraries, frameworks, or APIs. Especially React, which puts deeply nested data in the state and props objects. But do not get confused, object destructuring is pure, vanilla JS, you don’t need a framework or something to use it. It’s simply another great improvement that we got when we updated a few years ago.

Hopefully, this neat little tool will help you in your next coding project. Feel free to copy the code into the console and play around with it in the mean time.

happy coding everyone,

Mike