Since ECMAScript 6 (or ES6 for short), you can descructure objects in JavaScript. As a JavaScript developer, you’ll likely destructure objects as part of your daily work.

Let's learn about why we use destructuring, and then we'll learn how to destructure JavaScript objects.

Why destructure an object?

Let's go over an example to help us understand why we would want to destructure an object in the first place. Let's create an object with the name of pet:

const pet:  = {
 name: 'Captain',
 food: 'Kibble',
 color: 'Black'
};

Let's say we want to simply print out the pet's food. We could do so like this:

console.log(pet.food);

This would output kibble to the console. However, it's tedious to write out pet.name every time we need the food value. So before ES6, JavaScript developers would do this:

const food = pet.food;

Here, we declare a variable named food and said to point that variable at the value stored inside of pet.food, which is kibble. We can demonstrate that we've done this by adding this line of code:

console.log(food); // output: kibble

However, say we want to do the same with the rest of our properties in the pet object:

const name = pet.name;
const food = pet.food;
const color = pet.color;

This starts to get verbose. This is where destructuring comes in.

How to Destructure An Object in JavaScript

Instead of writing out const food = pet.food, we can utilize destructuring and simply write:

const { food } = pet;

Now if we print out food again, we can see we've created the food variable:

console.log(food); // output: kibble

Using destructuring, our code is now more concise and dry. This is why JavaScript developers started using destructuring once it was introduced in ES6.

Let's pause for a moment and look at this line again:

const { food } = pet;

What is happening here?

Remember, within a JavaScript object, a property is a key/value pair. The key is a string, and the value can be any data type. In the pet object, one of the keys is food, and its corresponding value is kibble.  

When we wrap our food variable in brackets, we look inside of our pet object for a property with the same name. We create a new variable with the name food, and we set its value to kibble, the corresponding value of that key.

If you'd like to destructure multiple properties and their keys from an object, you can do so like this:

const { name, food, color } = pet;

Now if you print out these variables, you'll see that they all now exist:

console.log(name, food, color) // output: captain chewtoy black

In this article, we've learned how to destructure objects and why we'd want to. We've also learned how to destructure multiple properties from an object.

Thank you for reading!

If you enjoyed this post, join my coding club, where we tackle coding challenges together every Sunday and support each other as we learn new technologies.

If you have feedback or questions on this post, or find me on Twitter @madisonkanna.