Introduction

The advent of ECMAScript 6 (ES6) in 2015 made JavaScript more exciting and brought about various fascinating features, including destructuring. This new feature was created to aid in the handling of arrays and objects.

This article will take a deep dive into what destructuring is all about and the many operations you can carry out with it.

What Exactly is Destructuring?

Destructuring is a way of extracting data from arrays and objects, thereby putting it into distinct variables. In other words, it helps in accessing the values of an array and the properties of objects, thereby allowing the use of these preferred values or properties in the writing of a particular piece of code.

If that was a bit complex to understand, a fictional scenario will help you understand it better. Let’s say you have a wardrobe full of clothes and want to donate the old ones to charity. If you want to do that, you would have to take all your clothes and separate the old ones from the new ones. That is exactly what destructuring is all about.

Moving on, you will learn how to use destructuring in arrays and objects.

Destructuring in Arrays

Destructuring in arrays involves giving variable names to each value in the array. You do that by using square brackets ([]) to enclose these variables, and the position of the variables then matches the values in the array.

const arr= ["boy", "girl"];
const [one, two]= arr;

The code above demonstrates how to destructure arrays. Now, let’s take a look at the various operations that can be carried out during destructuring in arrays.

Accessing the Values of an Array

Let’s say that you created an array, which you want to unpack, so you can use its values. Destructuring makes it super easy when you create a variable name for each value of the array.

const arr= ["boy", "girl"];
const [one, two]= arr;
console.log(two)

Output:

The array was destructured, and "girl" was printed out to the console.

Omitting Variables Using Commas

Destructuring allows you to use commas without variable names to skip certain variables, and there is no limitation to the number of variables you can skip.

Let’s say you have an array of six elements, and you want to ignore the third and fourth elements in the array. Destructuring uses the comma sign (,) to ignore these two elements when the array values are set as variables:

const arr= ["one", "two", "three", "four", "five", "six"];

const [un, deux, , , cinq, six]= arr;
console.log(cinq);

Output:

As you can see, omitting variables is relatively straightforward, and with practice, you can learn to omit variables any way you like.

Swapping Variables With Destructuring

If you have created the variables associated with the values of an array, destructuring also allows you to swap these variables.

Let’s imagine you have an array of two elements, “boy” and "girl." You can swap the variables representing these elements in two simple steps.

const arr= ["boy", "girl"];
let [one, two]= arr;
[one, two]= [two, one];

console.log(one, two);

Output:

If you try out that code, you’ll find it much quicker than using a temporary variable, which is a longer way of swapping variables. It should be noted that you should use the let keyword to create the variables in this instance to avoid an error.

Using the Rest operator to Re-assign Array Elements

You might want to name a few variables and put the remaining ones into an array. The rest operator can be used for this operation.

The rest operator allows infinite arguments to be packed into an array, and it does something similar during restructuring.

const arr= ["one", "two", "'three", "four"];
const [un, ...rest]= arr;
console.log(rest);

Output:

If you have a good understanding of the rest operator, you will see that this destructuring operation is quite easy.

Setting a Default Value for an Undefined Value

If an array has an undefined element, it can be assigned a value using a variable name after the array has been restructured.

const arr= ["one", undefined, "three, "four"];
const [un, deux="two", trois, quatre,]= arr;
console.log(deux);

Output:

As shown in the code above, the array’s second element was initially undefined, but it was eventually given a value.

Destructuring in Objects

Destructuring in objects is similar to destructuring in arrays when it comes to the usage of variable names, but there are some slight differences. You have to use variable names that match the property names of the object. You also have to use curly brackets ({}) to enclose these variables. It should be noted that arrays do not have limitations on the usage of variable names.

const obj=  {
    name: "john",
    age: 23
};

const {one, two}= obj;

console.log(one)

Output:

The code didn’t run exactly as you might have expected. So, you must make sure the variable names match the property names. However, there is a way to rename properties, and this will be touched upon.

Accessing the Values of an Object

When you want to destructure an object, you unpack it in a way that’s a bit similar to that of arrays. You create variable names for the property names of the object and use the variables in your code.

const obj=  {
    name: "john",
    age: 23
};

const {name, age}= obj;

console.log(age)

Output:

This shows how destructuring in objects is similar to destructuring in arrays but with a little twist.

Renaming the Properties of an Object

If you want to give an object’s property a different variable name rather than naming it exactly after the property in question, destructuring makes this easy.

All you have to do is use the colon sign (:) to rename it by writing a new name in front of the colon. This code snippet below will help you understand it better:

const obj=  {
    name: "john",
    age: 23
};

const {name: alias, age}= obj;

console.log(alias)

Output:

The only way to rename object properties is to use the syntax described above.

Setting a Default Value for an Undefined Property

You might have an object with a property, whose value is undefined, and you want to correct this anomaly. You can use destructuring to give that property, a real value.

const obj=  {
    name: undefined,
    age: 23
};

const {name="john", age}= obj;

console.log(name)

Output:

Looking at the code above, it is important to use the equal sign (=) to change the property’s undefined value.

Conclusion

Destructuring is quite easy to understand, and with constant practice, you will become a master of it. So, keep practicing, and the sky will be your limit.