Spread the love

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