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
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
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.
There are three situations where you use object destructuring: