In this section, we will learn what the object destructuring is and how to use it in JavaScript.

Note: we’re assuming you’re already read the destructuring section first.

What is Object Destructuring in JavaScript?

Object destructuring means extracting data from the properties of an object and storing them into variables via a new syntax.

JavaScript Object Destructuring Syntax

Here’s the syntax of object destructuring:

let|| const|| var {
        property_1:var1,
        property_n: varn
      } = target_object;

`declaration`: if the variables that we want the values to be assigned to them are not declared already, we need to put either of the keywords: `var`, `let`, `const` in front of the open brace `{` to declare the variables.

`{}`: For destructuring an object, we use a pair of braces `{}`.

`property_1, property_n`: the property of the target object that we want its value, will be set here on the left side of the colon `:`.

`var1, varN`: On the right side of the colon `:` we set the variables that we want the values to be assigned to them.

`:`: The separation of properties from variables is done via colon `:`.

Each pair of `property: variable` is separated from the other via comma `,`.

`target_object`: This is the object in which we want to extract its data.

Example: using object destructuring in JavaScript

const obj = {
  firstName: "John",
  lastName: "Doe"
}
const{
  firstName:var1,
  lastName: var2
} = obj;
console.log(var1,var2);

Output:

John Doe

Via the object destructuring in this example, we’ve created two identifiers named `var1` and `var2` and then assigned the value of the properties `firstName` and `lastName` of the `obj` object to the identifiers, respectively.

Note: if the variables in the pair of braces `{}` are already declared in the program, there’s no need to use the `let`, `const`, or `var` keyword in front of the braces.

Example: JavaScript Object destructuring

const obj = {
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
}
let eml; 
({
  email:eml 
} = obj);
console.log(eml);

Output:

[email protected]

Note: we also need to put the object destructuring on a pair of parentheses if we didn’t use the `const`, `let`, or `var` keyword in front of the pair of braces. Otherwise we will get syntax error.

JavaScript Object Destructuring with the Same Names

If the variable that we want to create in the object destructuring has the same name as the name of the property in the target object, we can shorten the syntax and only use the name of the property in the pair of braces `{}`.

Example: the same name in JavaScript Object destructuring

const obj = {
  firstName: "John",
  lastName: "Doe",
  email: "[email protected]"
}
const{
  firstName,
  lastName
} = obj;
console.log(firstName,lastName);

Output:

John Doe

Here, just by putting the `firstName` and `lastName` in the pair of braces, the engine will create two identifiers with these two names. After that, the engine assigns the values of the `firstName` and `lastName` properties of the `obj` object to the identifiers `firstName` and `lastName` respectively.

For this reason, when the engine called the `console.log(firstName, lastName);` statement, we got the value `John Doe` on the browser’s console.

Alright, now a question: What do you think would happen with the following code?

let {first,second} = undefined

If you’re thinking it’s an error, that’s exactly right. It’s a TypeError to try to read a property from `undefined` or `null` value.

Now, what’s the result here?

let {first, second} = 42;

Actually, the result of this statement won’t be an error!

What we did here is equally the same as:

const temp = 42;

let first = temp.first, second = temp.second;

Just like any other time, if we treat a number as an object, the primitive number will be coerced to a Number object and so in the example above, the properties `first` and `second` are read from that object. They don’t exist, of course, and so `first` and `second` get the value `undefined`.

JavaScript Object Destructuring and Default Values

This is explained in the JavaScript Destructuring and default values section.