Object destructuring is a JavaScript assignment expression that makes it possible to extract values from the properties of an object into distinct variables. This feature was added in the ES6 version of JavaScript.
Table of Contents
Need for Destructuring
Consider the following example. We extract the firstName & lastName from the person object and assign it to the firstName & lastName variable. As you can see that to extract values from the object, we need to assign one property at a time.
1 2 3 4 5 6 7 8 9 10 11 | const person = { firstName: "Bill", lastName: "Gates" }; //Without destructuring let firstName=person.firstName; let lastName=person.lastName; |
The Destructuring assignment simplifies the above into a single line of code.
We place the variables inside the curly bracket separated by a comma and assign the object to it. The JavaScript looks in the object for the properties corresponding to the variable name and assigns its values to them.
1 2 3 4 5 6 7 8 9 10 | const person = { firstName: "Bill", lastName: "Gates" }; //destructuring assignment let {firstName, lastName} = person; |
Object Destructuring
The following is the Syntax of Object Destructuring in JavaScript
1 2 3 | let {objectPattern1, objectPattern2, } = expression ; |
Where
expression should evaluate an object. If the expression is not an object, then JavaScript will coerce it into an object.
objectPattern is the pattern that we use for destructuring. Since the expression is an object, we place the objectPattern inside the curly braces. Each Pattern is separated by a comma.
Extracting Properties
The following syntax shows how you can extract a property from an object.
1 2 3 | let {propertyName1, propertyName2, } = <span style="background-color: inherit;">expression</span>; |
Where propertyName1 & propertyName2 are the Properties of the object returned by the expression. The JavaScript creates the similarly named variables and assigns the value from the object to them
Following example extracts values of firstName & lastName properties of the person object into a firstName & lastName Variables.
1 2 3 4 5 6 7 8 9 10 11 12 | const person = { firstName: "Bill", lastName: "Gates" }; //object destructuring let {firstName, lastName} = person; console.log(firstName); // Bill console.log(lastName); // Gates |
Selectively Picking Values
You can selectively pick the values that you want to restructure. The following example extracts only the firstName & employer property from the person object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const person = { firstName:'Bill', lastName:'Gates', age:'50', employer:'Microsoft' } let { firstName, employer} = person console.log(firstName) //bill console.log(employer) //Microsoft |
Aliases
Sometimes variables may have a different name than the property name. In such cases, you can use the aliases
The Syntax is as shown below. The propertyName1 is the name of the property that we want to extract. identifier1 is the variable where we want to store the value.
1 2 3 | const { propertyName1: identifier1, propertyName2: alias2 } = expression; |
The following example extracts the value from the name & employer property and assigns it to name & emp variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const person = { firstName:'Bill', lastName:'Gates', age:'50', employer:'Microsoft' } let { firstName:name, employer:emp} = person console.log(name) //bill console.log(emp) //Microsoft |
Default values
In the following example, we try to extract the age property. Since it does not exists in the person object it is initialed with undefined.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const person = { firstName:'Bill', lastName:'Gates', } let { firstName, age} = person console.log(firstName) //bill console.log(age) //undefined |
In such situations, we can set the default value to the variable. The Destructuring assignment uses the default value in the following cases.
- If the property does not exist
- Property exists but its value is undefined.
The basic syntax for setting the default value is as a follows
1 2 3 | const { propertyName1=default1, propertyName2=default2 } = expression; |
Where default1 & default2 are default values for the propertyName1 & propertyName2 respectively.
In the following example, we provide 0 as the default value for the age variable. The person object does not contain age property hence it sets the age variable value to 0.
1 2 3 4 5 6 7 8 9 10 11 | const person = { firstName:'Bill', lastName:'Gates', } let { firstName, age=0} = person console.log(firstName) //bill console.log(age) //0 Uses default because age does not exists |
If the age property exists and is undefined, then also it sets the age variable value to 0.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const person = { firstName:'Bill', lastName:'Gates', age:undefined } let { firstName, age=0} = person console.log(firstName) //bill console.log(age) //0 |
Expression as default value
You can also use any expression or function as a default value
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const person = { firstName:'Bill', lastName:'Gates', } x=10 y=20 let { firstName, age=x+y} = person console.log(firstName) //bill console.log(age) //30 |
JavaScript function as default value.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const person = { firstName:'Bill', lastName:'Gates', } let { firstName, age=getAge()} = person console.log(firstName) //bill console.log(age) //50 function getAge() { return 50 } |
The expression can also use the other variables in the pattern
1 2 3 4 5 6 7 8 9 10 | const person = { a:10, b:20, } let { a, b,c=a+b} = person console.log(c) //30 |
Coerce values to objects
If the assignment source is not an object, then JavaScript will coerce it into an object.
In the following example, we use a primitive string (xyz) as an assignment source. Before Destructuring the JavaScript will convert the primitive string to a String object. Length is a property of the String object. Hence it sets the variable x to 3.
1 2 3 4 | const {length : x} = 'xyz'; console.log(x) // 3 |
Nested objects
We can also extract the properties from the nested objects.
Here is the basic syntax. The nestedObject is the property name of the nested object. Follow it up with a colon and curly braces. The nestedProperty1 ,nestedProperty2 Inside the curly braces refer to the properties of the nested object.
1 2 3 | const { nestedObject : { nestedProperty1, nestedProperty2, } } = expression; |
The employeer is a nested object inside the person object. We extract the values of name & country property from the employer object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const person = { firstName:'Bill', lastName:'Gates', employeer : { name:'Micrsoft', country:'USA' } } let { firstName, employeer : { name , country } } = person console.log(firstName) //Bill console.log(name) //Microsoft console.log(country) //USA |
You can also use the aliases & default values in the nested Destructuring assignment.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const person = { firstName:'Bill', lastName:'Gates', employeer : { name:'Micrsoft', country:'USA' } } let { firstName, employeer : { name:employerName , city="New York" } } = person console.log(firstName) //Bill console.log(employerName) //Microsoft console.log(city) //New York |
Dynamic Properties
The object may have computed property names or we may add a new property dynamically. In such cases, the property name is known only at the runtime. We can use Object Destructuring to map to a dynamic property name.
The syntax for mapping a dynamic property is as follows. Instead of the property name, we use an expression inside the square brackets ([]). The expression must evaluate a string.
1 2 3 | const { [expression]: identifier } = expression; |
The following example shows how to map to a dynamic property name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | let prefix = "Book"; let book = { [ getAuthorName()]: 'Marijn Haverbeke', [ prefix + "Title"]: "Eloquent JavaScript", price:100 }; function getAuthorName() { return prefix+'Author' } priveVar="price"; let { [getAuthorName()]: author, [ prefix + "Title"] :title , [priveVar]:price } = book console.log(author) //Marijn Haverbeke console.log(title) //Eloquent JavaScript console.log(price) //100 |
Rest Operator
We can use the Rest Operator (... three full stops) to collect the remaining properties. The Rest operator must come last.
In the example below, ...otherinfo variable collects lastName & age as object.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const person = { firstName:'Bill', lastName:'Gates', age:60 } let { firstName, ...otherinfo } = person console.log(firstName) //Bill console.log(otherinfo) //{lastName: "Gates", age: 60} |
Rest Operator with the nested object.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const person = { firstName:'Bill', lastName:'Gates', employeer : { name:'Micrsoft', country:'USA' } } let { firstName, lastName, ...employerinfo } = person console.log(firstName) //Bill console.log(lastName) //Gates console.log(employerinfo) //{ employeer: {name: "Micrsoft", country: "USA"} } |
Read More
