Header Ads Widget

Responsive Advertisement

Javascript Destructuring | how it works

Javascript Destructuring 
javascript destructuring

Hello guys, Today we learned about JS destructuring and how it works in daily coding.

let's start with its meaning 
destructing means unpacking the element from an array or an object and assign to different variables.

now start with the coding point of view 

// in array destructuring
let arr = ['name', 22, 'India', ['male', 20000]];
var [user, age = 9, country, [gender, salary]] = arr;//age default value 9
console.log(user); //name
console.log(age);// 22

In the above

 We can understand what happens in the code 
first, we define the array called "arr" and give some value to an array.

In the next line, we destructure the array and assign value to variables.
and in the last line, we use to console to print the variable's data.

in the age case we provide some default value is 9 if in the array we don't receive age then this default value will be printed.

The second example of array destructure

let arr2 = ['name, 22, 'India', ['male', 20000]];
var [user, ...args] = arr2;
console.log(args[2][1], 'argu');//20000 argu

In this example,
 we use the rest parameter to assign any amount value to the args variable.
and print data with the help of the console we try to print the value inside the args variable at the third index's first index value which is "20000".

Destructuring with object

let obj = {
    name: "qwert",
    age: 22,
    address: { a: "india", b: { c: "inside", d: { e: "finally" } } }

let { name: n, age: a, address: { a: example, b: { c: pop } } } = obj;
// console.log(b)//

In above the example
 where we use to obj variable to declare the object and give property called name a, age, and address.

inside the address object, there are nested objects as well 

so we destructure to unpacking the object  and assign the property of obj to different variables like 
name is assigned to "a", age is assigned to "a" inside address object a is assigned to "example" and inside "b" variable,  c assigned to "pop" variable 

and then we print the data for all this 
here the point to note that key is the same at the destructuring of the object and after we assign this is variable to different variables.

if you have any doubt feel free to drop the message.

Post a Comment