Object destructuring

It is similar to array destructuring except that instead of values being pulled out of an array, the properties (or keys) and their corresponding values can be pulled out from an object.

When destructuring the objects, we use keys as the name of the variable. The variable name must match the property (or keys) name of the object. If it does not match, then it receives an undefined value. This is how JavaScript knows which property of the object we want to assign.

In object destructuring, the values are extracted by the keys instead of position (or index).

First, try to understand the basic assignment in object destructuring by using the following example.

Example - Simple assignment

snippet
const num = {x: 100, y: 200};
const {x, y} = num;

console.log(x); // 100
console.log(y); // 200

Output

Output
100 200

Let us understand the basic object destructuring assignment.

Example - Basic Object destructuring assignment

snippet
const student = {name: 'Arun', position: 'First', rollno: '24'};
const {name, position, rollno} = student;
console.log(name); // Arun
console.log(position); // First
console.log(rollno); // 24

Output

Output
Arun First 24

Object destructuring and default values

Like array destructuring, a default value can be assigned to the variable if the value unpacked from the object is undefined. It can be clear from the following example.

Example

snippet
const {x = 100, y = 200} = {x: 500};

console.log(x); // 500
console.log(y); // 200

In the above example, the variables x and y have default values 100 and 200. Then, the variable x is reassigned with a value of 500. But the variable y is not reassigned, so it retains its original value. So, instead of getting 100 and 200 in output, we will get 500 and 200.

Output

Output
500 200

Assigning new variable names

We can assign a variable with a different name than the property of the object. You can see the illustration for the same as follows:

Example

snippet
const num = {x: 100, y: 200};
const {x: new1, y: new2} = num;
 
console.log(new1); //100 
console.log(new2); //200

In the above example, we have assigned the property name as x and y to a local variable, new1, and new2.

Output

Output
100 200

Assignment without declaration

if the value of the variable is not assigned when you declare it, then you can assign its value during destructuring. You can see the illustration for the same as follows:

Example

snippet
let name, division;
({name, division} = {name: 'Anil', division: 'First'}); 
console.log(name); // Anil
console.log(division); // First

In the above example, it is to be noted that the use of parentheses () around the assignment statement is mandatory when using variable destructuring assignment without a declaration. Otherwise, the syntax will be invalid.

Output

Output
Anil First

Object destructuring and rest operator

By using the rest operator (…) in object destructuring, we can put all the remaining keys of an object in a new object variable.

Let us try to understand it with an example.

Example

snippet
let {a, b, ...args} = {a: 100, b: 200, c: 300, d: 400, e: 500}
console.log(a); 
console.log(b); 
console.log(args);

Output

Output
100 200 { c: 300, d: 400, e: 500 }

Assigning new variable names and providing default values simultaneously

A property that is unpacked from an object can be assigned to a variable with a different name. And the default value is assigned to it in case the unpacked value is undefined.

Example

snippet
const {a:num1=100, b:num2=200} = {a:300};
console.log(num1); //300
console.log(num2); //200

Output

Output
300 200
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents