Object Destructuring in ES6

Object Destructuring in ES6

The term destructuring is referred to as the breakdown of the complex entities into simpler parts. It works like array destructuring. In the array destructuring, the values are discarded from an array. On the other hand, in object destructuring, the keys (properties) and comparable values can be discarded from an object.

When we work with object destructuring, we consider keys or values as the variable names. The property name of the object and the variable name must be the same in object destructuring. If they don’t have any match, it returns an undefined value. In the object destructuring, we can extract the values with the help of keys instead of their index (position).

Example

Here, we have an example to define the simple assignment in object destructuring.

const value = {p: 200, q: 400};
const {p, q} = value;
console.log(p);
console.log(q);   

Output

After the successful execution of the above code, we got the following output:

Here, we are going to discuss the basic assignment of object destructuring.

Example

Const employee ={name: “Jacob”, position: “Manager”, age: “28”};
Const {name, position, age} = employee;
Console.log(name);
Console.log(position);
Console.log(age);

Output

After the execution of the above example, we got the following output:

Default values and Object Destructuring

In object destructuring, a default value can be allotted to a variable if the value discarded from the object like array destructuring.

Example

We will try to understand above concept with the help of following example.

const {a = 50, b = 100} = {a = 200};
console.log(a);
console.log(b);

Output

After the execution of the code, we got the following output:

In the above example, we have defined two variables (a, b), which havedefault values 50 and 100. Then, we reassigned the value of variable a (200). We did not reassign the value to variable b. So,the variable b holds its original value.

Assignment of New variable name

Unlike the property of an object, we can easily assign a variable with various names.

Example

Here, we have discussed the above concept with the help of the following example.   

const number = {r: 20, s: 25};
const {r: new1, s: new2} = number;
console.log(new1);
console.log(new2);

Output

After the execution of the above example, we got the following:

Assignment without Declaration                                                        

If we did not assign the value of a variable during the variable declaration, we can easily assign it at the time of destructuring.  

Example

Here, we have an example to understand the above concept.     

let name, age;
({name, age} = {name: “Stuart”, age: “30”}) ;
Console.log(name);
Console.log(age);                    

Output

After the execution of the above code, we got the following output:

Rest operator with Object Destructuring

In Object Destructing, the rest parameter (…)  is used to store the persisting keys of an object into a new object variable.

Example

Here, we have discussed the above concept with the help of following example:

let {u, v, …args} = {u: 10, v:20, w: 30, x: 40, y: 50}
console.log(u);
console.log(v);
console.log(args);  

Output

After the execution of the code, we got the following output:

Assigning Variable Name and Providing Default Values

We can assign a discarded property of an object to a variable with a different name. In the object destructuring, we can assign the default values to the variable, if the discarded value is undefined.  

Example

Here, we have an example to understand the above concept.

const {l:number1=25, m: number2=35} = {l: 45};
console.log(number1);
console.log(number2);

Output

After the execution of code, we got the following output: