Destructuring in JavaScript

Back to: ReactJS Tutorials

Destructuring in JavaScript:

In this article, I am going to discuss Destructuring in JavaScript with Examples. Please read our previous article where we discussed Spread and Rest Operators in JavaScript.

Destructuring in JavaScript:

There is another next-generation feature that we want to cover in this article and that is called destructuring. Destructuring allows you to easily extract array elements or object properties and store them in variables. When you first hear about that it might sound like the exact thing the spread operator does but actually it’s a different thing.

The Spread operator takes out all elements or all properties and distributes them in a new array or object or wherever you are using it. Destructuring allows you to pull out single elements or properties and store them in variables. Now for arrays, it looks like this,

If we have an array with two elements i.e. ‘Hello’ and ‘Max’ then we can use this strange-looking syntax on the left side of the equals sign which looks like we are creating an array but we are not. To assign the variables a and b to ‘Hello’ and ‘Max’ respectively.

For object destructuring, it is the same syntax with curly braces. In array destructuring, the order defines which property we take, and for object destructuring, it is the property name. So {name} on the left side targets the name property of the object on the right side and pulls out the value and that’s why age would yield undefined. We are not pulling this out of the object here. So, this is destructuring. Let us jump to the JSBIN editor and see an example of destructuring.

const numbers = [1, 2, 3];
[num1, num2] = numbers;
console.log(num1, num2);

Here we have created an array of numbers i.e. 1, 2, 3. Then we used the array syntax on the left side of the equal sign and choose any variable names of your choice like num1 and num2 and we assign this equal to the number as an array. The output of the above code is,

Here you can see 1 and 2 being logged because we have pulled these two out of the array. We have not pulled 3. If we want to get three, we have to add num3 as [num1, num2, num3] or if we don’t want 2 so, [num1, , num3]. We just have to leave space between commas on the left side.

Now if you run the code then you will get 1 and 3. That’s array destructuring. Now object destructuring is also supported by our project as we will use it in our articles. However, it is not supported by JSBIN here. So, we cannot show it to you. But we have shown the syntax on the slide.

In our upcoming articles, we will not use these destructuring syntaxes too often but we want you to be aware of their existence of them and they are nice ways of conveniently pulling out certain elements from an array or properties with their values from an object.

In the next article, I am going to discuss Reference and Primitive Types Refresher in JavaScript with Examples. Here, in this article, I try to explain Destructuring in JavaScript with Examples. I hope you enjoy this Destructuring in JavaScript article.