Object Destructuring in JavaScript

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.

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.

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.

Object Destructuring

The following is the Syntax of Object Destructuring in JavaScript

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.

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.

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.

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.

The following example extracts the value from the name & employer property and assigns it to name & emp variable.

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.

In such situations, we can set the default value to the variable. The Destructuring assignment uses the default value in the following cases.

  1. If the property does not exist
  2. Property exists but its value is undefined.

The basic syntax for setting the default value is as a follows

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.

If the age property exists and is undefined, then also it sets the age variable value to 0.

Expression as default value

You can also use any expression or function as a default value

JavaScript function as default value.

The expression can also use the other variables in the pattern

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.

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.

The employeer is a nested object inside the person object. We extract the values of name & country property from the employer object.

You can also use the aliases & default values in the nested Destructuring assignment.

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.

The following example shows how to map to a dynamic property name.

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.

Rest Operator with the nested object.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top