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.

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.

const person = {
  firstName: "Bill",
  lastName: "Gates"
};


//destructuring assignment
let {firstName, lastName} = person;

Object Destructuring

The following is the Syntax of Object Destructuring in JavaScript

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.

let {propertyName1, propertyName2, } = expression;

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.

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.

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.

const { propertyName1: identifier1, propertyName2: alias2 } = expression;

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

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.

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.

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

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.

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.

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

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.

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

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.

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.

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.

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.

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.

const { [expression]: identifier } = expression;

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

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.

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.

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"}  }