Technology Apr 21, 2026 · 3 min read

Master Destructuring in One Go

This is very surprising to me that i am using this feature of JavaScript but don't know the name of it. It is so powerful that it makes easier to extract values from array or properties from objects and assign them to a variable. Topics to Cover What destructuring means Destructuring arrays Dest...

DE
DEV Community
by Kunal
Master Destructuring in One Go

This is very surprising to me that i am using this feature of JavaScript but don't know the name of it.
It is so powerful that it makes easier to extract values from array or properties from objects and assign them to a variable.

Topics to Cover

  • What destructuring means
  • Destructuring arrays
  • Destructuring objects
  • Default values
  • Benefits of destructuring

What destructuring means

It is a JavaScript expression that helps us to extract data from array , objects map and sets.

lets take a look :


const person = { 

name = "kunal"
bio = "like this blog"
twitter = "@kunalmadoliya"
}

const name = person.name 
const twitter = person.twitter 

console.log(name , twitter)

If you can closely observe the code you find it pretty much repetitive. This type of code we write before ES6. Javascript makes it easier to extract the value from array or object.

we destruct them in a single line like :


const {name , twitter} = person 

console.log(name , twitter) //kunal @kunalmadoliya

The above code tells that give me a single variable called name and also a variable name twitter from person object.

Lets take a look how we can destruct the values from array

Destructuring arrays

Without destructing extracting values from an array can be a very verbose and difficult :


const arr = ["kunal" , "@kunalmadoliya" , "like this blog"]

const first = arr[0]
const second = arr[1]
const third = arr[2]


console.log(arr[0] , arr[1] , arr[2]) 

Here we can access each element using index and assign it to a variable.

We have a better alternate for it we can use a single code of line like this :


const arr = ["kunal" , "@kunalmadoliya" , "like this blog"]

const [first , second , third] = arr 

console.log(first , second , third) 

See how much easier it makes to understand and improve the readability of code
We can also use this for nested values lets take a look

Destructuring objects

Now you have undestand the concept of destructing objects above we have already took the example of it lets take a real world example where we use this .

First i want to give you a look what we use before ES6 to get value:


const user = {
  id: 1,
  name: "Kunal",
  contact: {
    email: "kunal@example.com",
    phone: {
      countryCode: "+91",
      number: "9876543210"
    }
  },

  skills: ["JavaScript", "React", "Node.js"]
};

const countryCode = user.contact.phone.countryCode
const phoneNumber = user.contact.phone.number

console.log(countryCode , phoneNumber)

We can use destructuring to do it one better!


const user = {
  id: 1,
  name: "Kunal",
  contact: {
    email: "kunal@example.com",
    phone: {
      countryCode: "+91",
      number: "9876543210"
    }
  },

  skills: ["JavaScript", "React", "Node.js"]
};

const [countryCode , phoneNumber] = user.contact.phone

console.log(countryCode , phoneNumber) // 91 987654321

This is one of the real use in which we extract data from nested object also known as JSON.

Using object destructuring, we can extract values from deeply nested JSON in a single line of code. This approach is cleaner, more readable, and more efficient compared to the older method of accessing each property step by step.

Default values

You can also provide default values for object properties


const { name, age, bio = "Unknown" } = person;
console.log(bio); // Output: Unknown

Here above we providing a default value "Unknown"for the bio property in case its not present in user object

Benefits of destructuring

  • Cleaner syntax – avoids long object paths
  • Better readability – code is easier to understand
  • Less repetition – no need to repeat object names
  • Extract multiple values in one line
  • Supports nested data – directly access deep properties

Thanks for reading ! if enjoyed this blog , you can read more on this 👇

DE
Source

This article was originally published by DEV Community and written by Kunal .

Read original article on DEV Community
Back to Discover

Reading List