Today we are here to talk about a new kind of operation that ES6 introduced, an operation that allows us to extract values from an array or an object in an easier way while using an array or object literal like syntax.

This feature is called destructuring assignment. Let’s start :

The old style

Back in ES5, if you wanted to extract values from an array you would have to do something like this :

const ingredients = ['apple', 'peach', 'banana'];
const apple = ingredients[0];
const peach = ingredients[1];
const banana = ingredients[2];
console.log(apple);
console.log(peach);
console.log(banana);

But with the new destructuring assignment you can instead do something like this :

const ingredients = ['apple', 'peach', 'banana'];
const [apple, peach, banana] = ingredients; // destructuring assignment
console.log(apple);
console.log(peach);
console.log(banana);

Super cool, right? So what’s happening here you might be wondering. Basically with this new syntax you can automatically assign the value of the corresponding indexes to a variable. You can also decide whether you assign the values to an existing variable or you can declare a new one by simply adding varlet or const in front of the assignment.

Destructuring assignment and rest parameters

You can also use this new special syntax with rest operators :

const ingredients = ['apple', 'peach', 'banana'];
const [apple, ...cake] = ingredients; // destructuring assignment
console.log(apple);
console.log(cake);

Destructuring assignment and objects

As mentioned earlier, we can also use this new feature with objects, the only big difference is that you have to specify the to be binded property. This whole process looks something like this :

const cake = {
ingredients : 'apples',
tools : 'oven'
}
const {ingredients : mainIngredient, tools : toolToUse} = cake; // destructuring assignment
console.log(mainIngredient);
console.log(toolToUse);

Shorthand syntax if you have no constraints on the variable name:

Bonus cases

And if the examples that I have shown you weren’t enough to convince you to start using this amazing feature, then here I propose you other useful cases to harness the power of destructuring assignment :

Multiple return values :

const getCakes = () => {
return [
{
ingredients : 'apples',
tools : 'oven'
},
{
ingredients : 'peaches',
tools : 'oven'
},
];
}
const [appleCakeRecipe, peacheCakeRecipe] = getCakes();
console.log(appleCakeRecipe);
console.log(peacheCakeRecipe);

Same thing, but now with objects :

const getCakes = () => {
return {
ingredients : 'apples',
tools : 'oven'
};
}
const {ingredients, tools} = getCakes();
console.log(ingredients);
console.log(tools);

Swapping values :

var x = 1, y = 2;// ES5 style
var temp = x;
x = y;
y = temp;// x = 2, y = 1// ES6 swap back
[x, y] = [y, x];// x = 1, y = 2

In the end

And that was it for this article, hope you enjoyed the examples and that from now one you will be able to write better code thanks to this amazing feature.

Stay tuned for more content,

Happy learning!

LEAVE A REPLY

Please enter your comment!
Please enter your name here