Destructuring in JavaScript

JavaScript destructuring is an easy and fast way to create variables. The values of the created variables come from the values in an array of properties in an object. The advantage of destructuring is efficient and readable code.

Let's start with a simple object. In the script, we are going to use the destructuring syntax to store values from the object in variables. The object looks like this:

const person = {
   first name: "Josh",
   surname: "Smith",
   telephone number: 0123456789,
}

An example without object destructuring

Without object destructuring, we can create variables by writing the name of the object, putting a period after it, and then writing the property of the object. See line 8 and line 9:

const person = {
   first name: "Josh",
   surname: "Smith",
   telephone number: 0123456789,
}

// Without object destructuring
const first name = person.firstname
const phone number = person.phone number

console.log (first name) // Josh
console.log (phone number) // 0123456789

An example with object destructuring

By applying object destructuring we can create variables more easily. Take a look at the example on line 8:

const person = {
   first name: "Josh",
   surname: "Smith",
   telephone number: 0123456789,
}

// With object destructuring
const {first name, phone number} = person

console.log (first name) // Josh
console.log (phone number) // 0123456789

So with object destructuring, we can store the value of a specific property in an object in a variable. It is important to know that with object destructuring we are looking for the name of the property. So, in our example, we can store the properties first name, last name, and phone number in variables.

Pay attention! You are not obliged to use all features. In the example above, on line 8 we skipped the second property within the object (phone number), and it still works as expected.

An example of array destructuring

We can apply destructuring to JavaScript Arrays and JavaScript Objects. The syntax for without array destructuring looks like this:

const notice = ["McLaren", "Renault", "Williams", "Ferrari", "Honda"]

// without array destructuring
const brand = brands [0]

console.log (brand) // "McLaren"

The syntax with array destructuring looks like this:

const notice = ["McLaren", "Renault", "Williams", "Ferrari", "Honda"]

// With array destructuring
const [brand] = brands

console.log (brand) // "McLaren"

Taking the first value from the array is simple as seen above, but suppose we don't want to get the string Alfa Romeo, but the string BMW from the array. This value is in the second key of the brand array (brands [2]), but we cannot include an index in the destructuring syntax. Therefore we have to count manually and replace the 'unused' keys with space:

const notice = ["McLaren", "Renault", "Williams", "Ferrari", "Honda"]

// Store the third value of the array ("Williams") in variable "brand"
const [,, brand] = brands

console.log (brand) // "Williams"

A combination of array and object destructuring on an array of objects

One of the most commonly used data types in JavaScript is an array of objects. Suppose we have to work with the following complex object:

const persons = [
   {
     first name: "Josh",
     surname: "Smith",
     telephone number: 0123456789,
     accounts: {
       ing: "NL69INGB0123456789",
       rabobank: "NL44RABO0123456789",
       abnamro: "NL02ABNA0123456789",
     }
   },
   {
     first name: "John",
     surname: "Smith",
     telephone number: 0627700071,
     accounts: {
       ing: "NL69INGB1123456789",
       snsbank: "NL12SNSB0123456789"
     }
   }
]

If we want to have the ING account specifically for people Dave and John, we can write the following to store the account numbers in two variables: ingRekeningDave and ingRekeningJohn:

// A combination of array and object destructuring
const [
   {
     accounts: {ing: ingRekeningDave},
   },
   {
     accounts: {ing: ingRekeningJohn},
   },
] = persons

console.log (ingRekeningDave) // NL69INGB0123456789
console.log (ingReningJohn) // NL69INGB1123456789

Comments

[diek]

Hi Naveen, all that spaces on a key names... may be a way to confussion for newbies, can you do a revision of the post? :P

It is very well expressed and worked, thank you for share your knowledge.