Categories
Javascript

Javascript : Make Your Code Elegant Using Object Destructuring

Object destructuring introduced in ES6 along with arrow functions, let, const, aysn/await.
This is one of the concept we will be using in every JavaScript file.

Object destructuring was introduced in ES6 along with arrow functions, let, const, aysnc/await. Since it’s arrival, it has become one of the core concepts that we are bound to use in almost every script on daily basis.

Object Destructuring enables us to retrieve values from the object properties and store them in different variables conveniently.

Let’s understand this with an example.

let obj = {
    name: 'John Wick',
    age: 45,
    address: 'USA',
    profession: 'Assassin'
}

In the above code, we have simply created an object with four properties and corresponding values assigned to each of them.

For instance, If we want to define different variables for each property like name, age, address and profession. And subsequently assign values of the object’s properties to those variables. Then we would normally need to write four lines of code as we can see in below code.

let name = obj.name
let age = obj.age
let address = obj.address
let profession = obj.profession

Now imagine, if there were 8 to 10 variables or even more than we need to write as many lines of code.

Object destructuring provides us a way to make this task a lot elegant and concise.

let {name, age, address, profession} = obj;

The above line of code summarizes the concept of object destructuring. Object destructuring simply maps the value of name property of object (obj) to a variable with same name. The same process is repeated for all the variables declared and at last we have our values stored in variables we have defined.

Object destructuring with custom name variable

In above example, we had kept the name of the variables exactly same to the object’s property names. But what if we wanted to keep the names different than the ones assigned to properties. As it happens, JavaScript has us covered in that aspect as well. Refer the below illustration.

let {name, age, address: add, profession: pro} = obj;

Here we have saved the values of address and profession properties in add and pro variable respectively. Moreover, for other variables the syntax remains same thus making it easy for us to implement our code.

Assigning default values

Let us understand this with an example.

let {name, age, address: add, profession: pro, company} = obj;

console.log(company); // undefined

Here, we are trying to fetch the company property from obj and assign it to company variable. Since, object (obj) does not have any property named company therefore company variable will be stored with undefined value.

In order to assign default value to a property if that property does not exist in the object, we can simply use below syntax. Refer the syntax used to assign value to company property:-

let {name, age, address: add, profession: pro, company = 'No Company'} = obj;

console.log(company);
 // No Company

Now let’s club both of our examples and try to assign custom name and default value together to company property at the same time. To that end, we can use below syntax as illustrated in the code :-

let {name, age, address: add, profession: pro, company: cmp = 'No Company'} = obj;

console.log(cmp);
 //No company
console.log(company);// error: company is not defined

Nested Object destructuring

Until now we have worked with simple objects that only had properties as it’s member. However, sometimes we need to create object that holds other objects as it’s member as well. As a result, we get nested objects with properties of their own.

To demonstrate the above concept we are going to take a create a nested object as our main obj object. To that end, our goal is to extract name, state and country properties from our obj object and a nested address object. Refer the below code to understand the practical application of this concept :-

let obj = {
    name: 'John Wick',
    age: 45,
    address : {
        state: 'New York',
        country: 'USA'
    }

}
let {name, address : {state, country}} = obj

console.log(name);
 // John Wick
console.log(state, country); // New York USA

Summary

In this article, we first learned about Object destructuring. Then explored how we can give custom names and assign default values to variables. And at last, we studied the working of Nested object destructuring with an example.

In conclusion, we now know some cool tricks using object destructuring.

Good Luck, Happy Coding.

Let the author know what's in your mind !!

This site uses Akismet to reduce spam. Learn how your comment data is processed.