How to use destructuring in JavaScript (ES6) to its full potential

by Joanna Gaudyn

Destructuring was a new addition to ES6. It took inspiration from languages like Python and allows you to extract data from arrays and objects into distinct variables. It might sound like something you’ve done in the earlier versions of JavaScript already, right? Have a look at two examples.

The first one extracts data from an object:

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};

const name = meal.name;const type = meal.type;const price = meal.price;

console.log(name, type, price);

Prints:

pizza marinara 6.25

And the second one from an array:

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];const flavor1 = iceCreamFlavors[0];const flavor2 = iceCreamFlavors[1];const flavor3 = iceCreamFlavors[2];console.log(flavor1, flavor2, flavor3);

Prints:

hazelnut pistachio tiramisu

The thing is, though, that neither of these examples actually uses destructuring.

What is destructuring?

Destructuring lets you specify the elements you want to extract from an array or object on the left side of an assignment. This means much less code and exactly the same result as above, without losing readability. Even if it sounds odd at first.

Let’s redo our examples.

Destructuring objects

Here’s how we destructure values from an object:

const meal = {  name: 'pizza',  type: 'marinara',  price: 6.25};

const {name, type, price} = meal;

console.log(name, type, price);

Prints:

pizza marinara 6.25

The curly braces { } stand for the object which is being destructured and name, type, and price represent the variables to which you want to assign the values. We can skip the property from where to extract the values, as long as the names of our variables correspond with the names of the object’s properties.

Another great feature of object destructuring is that you can choose which values you want to save in variables:

const {type} = meal; will only select the type property from the meal object.

Destructuring arrays

Here’s how our original example would be handled:

const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];

const [flavor1, flavor2, flavor3] = iceCreamFlavors;

console.log(flavor1, flavor2, flavor3);

Prints:

hazelnut pistachio tiramisu

The brackets [ ] stand for the array which is being destructured and flavor1, flavor2 and flavor3 represent the variables to which you want to assign the values. Using destructuring we can skip the indexes at which the values live in our array. Convenient, isn’t it?

Similarly as with an object, you can skip some values when destructuring an array:

const [flavor1, , flavor3] = iceCreamFlavors; will simply ignore flavor2.

Long live laziness as a potent motivator for the invention of new shortcuts!

Did you like this article? Maybe you’ll find these interesting too:

What does yoga have to do with programming?
You might be surprised.medium.freecodecamp.orgSpread operator and rest parameter in JavaScript (ES6)
Both the spread operator and the rest parameter are written as three consecutive dots (…). Do they have anything else…medium.comAn overview of JavaScript iterators
The difference between for, for…in and for…of loopsmedium.freecodecamp.org