What is Object Destructuring in JavaScript and How to use it?

Object destructuring allows you to extract the value of the object's property and assign them to a variable. Before object destructuring, you assign the values of object properties to variables in the following way:

Suppose you have a product object and want to assign the value of pdtName property to the productName variable. You can do this in the following way:

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let productName = product.pdtName,
	productPrice = product.pdtPrice,
	productQuantity = product.pdtQuantity;

Object destructuring is an alternate way of assigning the values of the object's properties to distinct variables.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let { pdtName:productName, pdtPrice:productPrice, pdtQuantity:productQuantity } = product;

Object destructuring has the following form:

let {property1: variable1, property2: variable2, ..., propertyn: variablen} = object

In object destructuring, the righthand side of the equals sign is an object. On the left-hand side, you specify variables using object literals notation.

Here, property1 refers to the object property you want to extract, and variable1 is the variable to which you wish to assign the value of property1.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let {pdtName:productName} = product;
console.log(productName); //Amazon Echo Dot

In the above code, pdtName is the property whose value is assigned to a productName variable.

You can destructure more than property by separating them with a comma.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let {pdtName:productName, pdtPrice:productPrice} = product;
console.log(productName); //Amazon Echo Dot
console.log(productPrice); //39.99

When the property of an object and a variable have the same name, in that case, you can omit colon and variable and make the code more concise.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let {pdtQuantity, pdtPrice} = product;
console.log(pdtQuantity); //25
console.log(pdtPrice); //39.99

Suppose you try to assign a property that does not exist in an object to a variable. In that case, undefined is set to that variable.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let {pdtName, quantity, pdtPrice} = product;
console.log(pdtName); //Amazon Echo Dot
console.log(quantity); //undefined
console.log(pdtPrice); //39.99

How to set default values in object destructuring?

While destructuring, if a property does not exist in the object, then undefined is assigned to a variable. Instead of undefined, you can assign a default value to that variable.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25
};
let {pdtName, pdtPrice, discount=0.0, available:inStock=true} = product;
console.log(discount); //0.0
console.log(inStock); //true

In the above code, you can see that discount and available properties do not exist in the product object. The discount variable is assigned a default value of 0.0, and inStock is set to true.

It is important to note that the default value is ignored when a property exists in an object.

let product = {
  pdtName:'Amazon Echo Dot',
  pdtPrice:39.99,
  pdtQuantity:25,
  discount:0.2
};
let {pdtName, pdtPrice, discount=0.0} = product;
console.log(discount); //0.2

How to do nested object destructuring?

To perform nested object destructuring, you have to follow the structure of an object.

let product = {
  name:'Apple iPhone 12',
  price:800,
  features:{
    connectivity:{
      wifi:'802.11ax/b/g/n',
      bluetooth:'V5'
    }
  }
};
let {
  name: pdtName, 
  features:{
    connectivity:{
      wifi, 
      bluetooth
    }
  }
} = product;
console.log(pdtName); //'Apple iPhone 12'
console.log(wifi); //'802.11ax/b/g/n'
console.log(bluetooth); //V5

In the above example, wifi and bluetooth properties are destructured by following the way product object is defined.

How to use object destructuring in JavaScript?

There are three situations where you use object destructuring:

1. You can use destructuring as function parameters.
2. In Node.js, object destructuring is used in named imports for importing the exported functions, classes, objects, arrays and other variables. To learn about how to use object destructuring in importing modules in Node.js, refer to Node.js modules.
3. You can destructure the object returned from the function. To understand it in a detailed manner, visit How to return multiple values from a function in JavaScript?