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: