Object and array destructuring are some of the fancy features of Javascript(ES6). Hello Developers, How are you doing? In this tutorial, I’ll show you How to destructure Object and Array in JavaScript. Javascript array and object destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables. You will also learn destructuring nested objects and arrays in Javascript with a couple of examples. So here we go
What is Object and Array Destructuring in JavaScript

Let’s see a couple of examples on a single object
let obj = {
title : 'This is an object',
date : new Date(),
count: 10
}
let objTitle = obj.title // 'This is an object'
let objCount = obj.count // 10
If we use destructuring object method then our code looks like the below code.
let {title} = obj // 'This is an object'
let {count} = obj // 10
Well, if you want to use a custom variable for the default property name then your code will be like this
let {title : heading} = obj // 'This is an object'
Well, now you may think if our object is nested then how to we can Destructure the values. Don’t be panic in this example I will show you how you can destructure nested objects.
Examples of Object’s Destructuring
let post = {
title : 'This is a post',
date : new Date(),
view: 10,
comment : {
userName : 'Shahin'
}
}
let {comment : {userName}} = post
console.log(userName) // Shahin
// if you want another name instead of default property name
let {comment : {userName:title}} = post
console.log(title) // Shahin
More Nested Object’s Examples for your convince
let post = {
title : 'This is a post',
date : new Date(),
view: 10,
comment : {
userName : 'Shahin',
nestedObj :{
text : 'More nested Object'
}
}
}
let {comment : {nestedObj:{text}}} = post
console.log(text) // More nested Object
for your convinience
let {comment : {nestedObj:{text:customTitle}}} = post
console.log(customTitle)
Well, I hope you can understand how to Destructure nested objects with custom variables. Now time to see how you can Destructure an array. Let’s see a couple of examples.
Normal way how to we use array’s value
let arr = [10,20,30,40,50]
let firstValue = arr[0] // 10
let fourthValue = arr[3] // 40
But if you use array Destructure then how can you get this value easily? Let’s see this example
let arr = [10,20,30,40,50]
let [val1,,,val4,] = arr
console.log(val1) // 10
console.log(val4) // 40
How easily you can get the value of an array. It’s really awesome. Right? Well, now time to see how to Destructure a nested array.
Destructure nested array
let arr = [10,80,[100,200,300],20,30,40,50]
let [val1,,[nes1,,nes3],,val5] = arr
console.log(val1) // 10
console.log(nes1) // 100
console.log(nes3) // 300
console.log(val5) // 30
Well, think deeply. How actually it works. I hope you can understand how to Destructuring Object and Array in JavaScript