Destructuring in javascript

ES6 introduced a new feature called destructuring. To better understand it let’s look into the basics of javascript objects.To add single property to an object we use a dot notation.

By the nature of dot notation we can add properties one at a time. To extract property we need to use the same syntax . If we want to add multiple properties to an object we need to use object literal notation during time of initialisation

We have a way to add multiple properties at a time but we do not have a way to exact multiple properties at a time until destructuring was introduced in es6 .

So as object literals allows us to add multiple properties in an object, destructuring allows us to extract multiple properties from an object. This reduces the amount of code we have to write dramatically using destructuring

Before destructuring

Using destructuring

They both create and initialise 3 variables name, age and email.

Another feature of destructuring is that we can destructure the result of function invocation

Rather than invoking “getUser” and grabbing all the properties off it one by one we could use destructuring

Why is destructuring important?

It provides a quicker and neater way to assign values: 

Consider a scenario where we have data of stores in an object to be shown on a map. 

We can achieve the result from above code but there are a few cautions to be taken care of – we can easily make a typo , instead of writing locations we can write location which will give undefined and again if the object is deeply nested, the chain to access the inner values become longer and more code has to be written which makes the coding complex and expensive. With destructuring we can shorten the code, make it less complex and more readable. 

Another Example:

We often use axios to do a HTTP request to get data from services. It returns the following object: 

Data gives us the response provided by the server. Consider a scenario where we need to get data of all the users we would use axios  

Request object will have the same structure as shown above . To get the data provided by the server we would get request.data. Suppose we want to get data for a particular user with an id= 1730 which needs to be passed in the request getuser/user/:userId and it returns an array .To extract data we can do request.data[0]

We can also use destructuring here :

How to destructure properly? 

Suppose we have an object 

Destructuring it –

We need to add or empty object {} because destructuring throws error if the value is undefined or null as we shown in example : 

This will throw an error –

Uncaught TypeError: Cannot destructure property ‘personName’ of ‘name’ as it is undefined.

But if we set it to an empty object

Another example:

Name is within object, details is within name and finally title is destructured from details. We are assigning a variable named title for title. This works untill all the properties in the object exists and none of them are undefined or null. We can deal with undefined by setting defaults value.

Providing default values using destructuring works if variable is either undefined or doesn’t exist.  All other values like null, false, 0 are not dealt by setting default values.

while for null: 


To identify each item in the array we need to create variable  for each item

This can be tedious. Using destructuring we can more effectively extract items from the array


1. Nested array and Objects

Still this will be a lot of work. To simply it we can use destructuring –

Using this name prints john , age prints 25 and gender prints male.

Destructuring helps to break complex code into simpler code. It makes the code less complex and cleaner.

2.Naming functional arguments 

Suppose we have a function which accepts multiple parameters

Whenever another developer uses this function he has to take care of 2 things – the order in which arguments are passed  and read documentation to filter out the arguments he doesn’t need.

For simplifying it we can pass parameters as Objects and use destructuring so that we don’t need to worry about the order of the parameters and ignore the arguments we do not want.

Even if the order in which the parameters are sent are not the same, the function will know which parameter is associated with which value.We can also ignore the arguments we don’t want into consideration

CONCLUSION – Destructuring simplifies the code complexity and makes the code cleaner and readable. It works great with complex functions which have a lot of parameters and default states. Destructuring makes it easier to read and use the code as it breaks down the complex object . It also increases performance as we use variables and use them multiple times.


About The Author