What is Destructuring in JavaScript? Example Tutorial

Arrays and objects play a very important role in programming. Every major programming language supports arrays and objects. Both arrays and objects are used to store data. The concept is simple but very powerful. JavaScript also supports arrays and objects. In fact, they are a very important part of modern JavaScript development. It does not matter if you are working on the frontend or backend, you are going to use arrays and objects. Over time, more and more features were added in JavaScript to make it easy to work with arrays and objects. 

Destructuring the assignment is one of the most useful arrays and object features in JavaScript. It is basically a syntax using which we can work with arrays and objects with more ease. 

In this article, we will discuss what destructing in JavaScript is and how we can use it with arrays and objects. This is also one of the frequently asked JavaScript interview questions and knowing this concept can help you during interviews. 

By the way, if you are new to the JavaScript world and looking for resources like the best online courses, books, and tutorials then you can also check out my earlier post about the best JavaScript courses, books, and websites. I have also shared free courses to learn JavaScript, in case you are interested in free online courses from Udemy and Coursera. 

What is Destructuring in JavaScript?

In simple words, destructuring is a syntax in JavaScript that is used to unpack values from objects and arrays into different variables. Destructuring makes it easy to work with arrays and objects. 

Let's understand what is the need for destructuring. Observe the following code. 

let arr = [1, 2, 3, 4, 5];

If we need to assign the value of the second and third indexes from the above array to two different variables, we might do something like the following.

let arr = [1, 2, 3, 4, 5];

let a = arr[2];

let b = arr[3]

This is how we assign the value from an array to a variable. Similarly, if we need to access a property from an object, we can do something like the following. 

let obj = { name: "John", age: "21" }

let a = obj.name;

These methods work fine but destructuring is a better way to do a similar thing. 

2. Array Destructuring Example in JavaScript

Array destructing is done using the square brackets. Observe the following code. 

let arr = [1, 2, 3];

let [a, b, c] = arr; // a = 1, b = 2, c = 3

In the above code, array destructing is used on "arr" to assign its values to different variables - a, b, and c. The value of a is 1, b is 2, and c is 3. So, the destructuring syntax assigns the value according to the order of variables in the square brackets. 

Now suppose, you want only the second and third values, not the first one. 

let arr = [1, 2, 3];

let [ , a, b] = arr; // a = 2, b = 3

A comma is used to skip an element. So in the above code, 2 is assigned to a, and 3 is assigned to b.

3. Object Destructuring Example in JavaScript

Object destructuring is more popular than array destructuring. In object destructuring, curly brackets are used. Observe the following code.

let obj = { name: "Max", age: 24, available: true}

let {name: a, age: b, available: c} = obj; // a = "Max", b = 24, c = true

For object destructuring, the variable name is written on the right side of the colon while the property name is written on the left side. So, the value of a is "Max", b is 24, and c is true. We can also use the short-hand property in which the variable names are omitted and we can simply create variables of the same name as of the corresponding property. 

let obj = { name: "Max", age: 24, available: true}

let {name, age, available} = obj;  

In the above code, the value of the name is "Max, age is 24, and available is true. There is no order like the was in array destructuring. Observe the following code. 

let obj = { name: "Max", age: 24, available: true}

let {age} = obj 

This time only age is destructured from the object. So this is how object destructuring works in JavaScript. We can use the shorthand property to directly carve out the values with the property name or it is also possible to assign the values to the new variables. 

Here is another example of Destructuring in JavaScript using bot ES5 and ES6 syntax:

That's all about Object destructuring in JavaScript. In this article, we discussed how to use destructing in javascript. It is a simple concept but a very useful one. Instead of writing new variables in new lines, we can simply use destructuring in one line to achieve the same functionality. 

Though destructuring does not look like a big deal it is very useful when you work in real-time, especially in the cases of objects. Array destructuring is also used often but object destructuring has become very common in modern JavaScript development. 

Other JavaScript and Web Development Articles and ResourcesYou May like to explore

• Top 5 Modern JavasCript features for Beginners
• 5 Courses to Learn Ruby and Rails for Free
• 10 Books and Courses to learn Angular
• The React Developer RoadMap
• 5 Best courses to learn React Native for Beginners
• 5 Online training courses to learn Angular for Free
• 3 Best and Free Svelete.js courses for beginners
• 5 Free Courses to learn Kubernetes for Beginners
• My favorite free Courses to learn Angular and React
• My favorite books to learn React.js
• Top 5 Websites to learn React.js for Beginners
• 5 Free Docker Courses for Java and DevOps Engineer
• How to use state in React.js? Example

Thanks for reading this article so far.  If you like this JavaScript destructuring tutorial and examples of Object and Array Destructuring then please share them with your friends and colleagues. If you have any questions or feedback, then, please drop a comment.

P. S. - If you want to learn JavaScript in depth I also suggest you go through comprehensive Javascript courses to learn them in detail. If you need an online course, you can also check out my articles about the best JavaScript courses. It has many hands-on courses to learn modern JavaScript features.