How to use destructuring in JavaScript (ES6) to its full potential
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: