Object Destructuring In JavaScript

Introduction

 
We can unpack the values from the array or various properties of an object into variables.
 
Why should we use destructuring? Destructuring saves you from creating temporary references for those properties.
 
Let’s take an example of getting the properties from an object before the introduction of Object destructuring.
  1. var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
  2. var continent = myObject.continent;      
  3. var country = myObject.country;      
  4. var state = myObject.state;      
  5.     
  6. console.log("continent: ", continent);      
  7. console.log("country : ", country );      
  8. console.log("state : ", state );   
Object Destructuring In JavaScript
 
The properties of an object are accessed by using the dot operator as “objectName.propertyname”.
 
Here the properties of the object “myArray” are first assigned to a variable individually and then those variables are printed in the console.

Basic Destructuring

  1. var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
  2. var {continent, country, state }  = myObject;      
  3.       
  4. console.log("continent: ", continent);      
  5. console.log("country : ", country );      
  6. console.log("state : ", state );    
Object Destructuring In JavaScript
 
This example demonstrates how to destructure an object. Here we declare an object first, then that object is destructed by using the properties of an object. Then those values can further be used by just using the name of the property as we have the same name of the variable as of the property.
 

An order doesn’t matter

 
Here the order of properties doesn’t matter while destructuring the object:
  1. var myObject = {continent: "Asia", country: "India", state: "Gujarat" };      
  2. var { state, continent, country } = myObject;      
  3.       
  4. console.log("continent: ", continent);      
  5. console.log("country : ", country );      
  6. console.log("state : ", state );    
Object Destructuring In JavaScript
 
Order of the variables declared doesn’t matter while destructuring as shown in the above example.
 

The rest “...”

 
As we saw in array destructuring, the use of “...” to assign all the following values to a single variable, we can do the same for objects as well.
  1. var myObject = {continent: "Asia", country: "India", state: "Gujarat" };      
  2. var { continent, ...rest } = myObject;      
  3.       
  4. console.log("continent: ", continent);      
  5. console.log("rest: ", rest);    
Object Destructuring In JavaScript
 
We assign the value of country and state properties in the rest variable. The value which will be returned will also be in the object form.
 

Declaring variables

 
Yes, we can declare the variables before assigning the destructured object to them. 
 
Some error occurs while destructuring as “Uncaught SyntaxError: Unexpected token =”.
  1. var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
  2. var continent, country, state ;      
  3. { continent, country, state } = myObject;      
  4.       
  5. console.log("continent: ", continent);      
  6. console.log("country : ", country );      
  7. console.log("state : ", state );    
Object Destructuring In JavaScript
 
This problem occurs because { } on the Left-hand side is considered as the block and not as the object literal. To solve this we need to wrap the statement in ( ) as follows,
  1. var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
  2. var continent, country, state       
  3. ({ continent, country, state } = myObject);    
  4.       
  5. console.log("continent: ", continent);    
Object Destructuring In JavaScript
 
Yes, it is necessary to wrap the statement in ( ), to show JavaScript that it’s not a code block. It should be kept in mind to precede the ( ) syntax with “;” otherwise it will be meant as the statement to execute the function from previous line.
 

New variable name

 
We can assign new names to the variables by using “:” when destructuring. An example is shown below.
  1. var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
  2. var { continent: firstValue, country: secondValue } = myObject;      
  3.       
  4. console.log("firstValue: ", firstValue);      
  5. console.log("secondValue : ", secondValue );   
Object Destructuring In JavaScript
 
Here we have renamed the continent to firstvalue and country to secondvalue and then we can use the new names of the variables.
 

Using prompt

 
We can use the prompt function to assign the value to some property. Here is the value.
 
Object Destructuring In JavaScript
  1. var myObject ={continent: "Asia", country: "India" };      
  2. var { continent = prompt("continent?", state = prompt("state?")} = myObject;      
  3.       
  4. console.log("continent: ", continent);      
  5. console.log("state: ", state);   
Object Destructuring In JavaScript
 
Here the value for the missing property state will be taken from the value entered in the prompt. We entered Gujarat in the prompt which is then printed in the console.
 

Keep in mind

  • It's helpful when the property names and variable names are the same.
  • When you destructure properties that are not defined, you get undefined
    1. var { missing } = { };      
    2. console.log(missing);   
    Object Destructuring In JavaScript
Any questions? Please post comments for any queries or suggestions.