Object Destructuring In JavaScript

Have you ever found yourself sifting through long, verbose code looking for a specific property or value within an object? Do you struggle to keep track of all the object properties and their values in your code? If so, you're not alone. These are common problems faced by many JavaScript developers, but thankfully, there's a solution: object destructuring. In this article, we'll show you how object destructuring can help you simplify your code, make it more readable, and improve your productivity as a developer. So, whether you're a beginner or an experienced JavaScript developer, read on to learn how you can benefit from object destructuring in your projects.

Introduction

Object destructuring is a powerful feature in JavaScript that allows you to extract properties from objects and assign them to variables. The syntax for object destructuring uses curly braces { } and follows the pattern of { property: variableName }.

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.

var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
var continent = myObject.continent;      
var country = myObject.country;      
var state = myObject.state;      
    
console.log("continent: ", continent);      
console.log("country : ", country );      
console.log("state : ", state );  

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

var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
var {continent, country, state }  = myObject;      
      
console.log("continent: ", continent);      
console.log("country : ", country );      
console.log("state : ", state );  

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:

var myObject = {continent: "Asia", country: "India", state: "Gujarat" };      
var { state, continent, country } = myObject;      
      
console.log("continent: ", continent);      
console.log("country : ", country );      
console.log("state : ", state );    

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.

var myObject = {continent: "Asia", country: "India", state: "Gujarat" };      
var { continent, ...rest } = myObject;      
      
console.log("continent: ", continent);      
console.log("rest: ", rest); 

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 =”.

var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
var continent, country, state ;      
{ continent, country, state } = myObject;      
      
console.log("continent: ", continent);      
console.log("country : ", country );      
console.log("state : ", state );   

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,

var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
var continent, country, state       
({ continent, country, state } = myObject);    
      
console.log("continent: ", continent);   

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.

var myObject ={continent: "Asia", country: "India", state: "Gujarat" };      
var { continent: firstValue, country: secondValue } = myObject;      
      
console.log("firstValue: ", firstValue);      
console.log("secondValue : ", secondValue );   

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.

var myObject ={continent: "Asia", country: "India" };      
var { continent = prompt("continent?", state = prompt("state?")} = myObject;      
      
console.log("continent: ", continent);      
console.log("state: ", state);   

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

  var { missing } = { };      
  console.log(missing);  

Any questions? Please post comments for any queries or suggestions.