Javascript Destructuring

destructuring

1The process of extracting the values from the array or object into the variables is known as destructuring.
2The two most used data structures in JavaScript are Object and Array, both allows us to unpack individual values into variables.

1The process of extracting the values from the object into the variables is known as object destructuring.
2All the key names provided on LHS are consider as variable and these variables should be declared and written inside curly braces.
3The variable name should same as object key name
4 Js engine will search for the key inside the object.
5 If the key is present , the value is extracted and copy into variable.
6 If the key is not present , undefined is store in the variable.
7After destructuring , we can directly access variable names , without using object reference.
8
Example :
1let obj = { 2name:"chombi" , 3age:16 , 4} 5 6let {name,age,country} = obj; 7console.log(name); 8// chombi 9console.log(age); 10// 16 11console.log(country ); 12// undefined
Here , we are trying extract name , age and country from obj. name and age is present in obj but country is not , so inside country js engine stored undefined and for name , and age we have respective values.

1The process of extracting the values from the array into the variables is known as array destructuring.
2All the key names provided on LHS are consider as variable and should bewritten inside square brackets.
3 Js engine will extract the array values and stored them variables in the same order as they are present inside array.
4if we try to access value which is not present inside array , js engine will store undefined inside that variable.
5
Example :
1let arr = [10,20,30,40,50] 2 3let [a,b,c,d,e,f] = arr; 4console.log(a); 5// 10 6console.log(b); 7// 20 8console.log(c); 9// 30 10console.log(d); 11// 40 12console.log(e); 13// 50 14console.log(f); 15// undefined
Here , we are trying to extract value from array into variables a,b,c,d,e,f. As we are already learnt values will be extracted and stored into variable in the same sequence they are available inside array , so we have value inside a,b,c,d,e but not inside f because at sixth position no value is present and js engine stored undefined in it.

1We can destructure array or object in function parameter so that we can access value directly.
2
Destructuring object in function parameter
At the time of object destructuring , we have to make sure variable name is same as object key name and write within curly braces.
1function details({name,age}) { 2console.log(name); 3// chombi 4console.log(age); 5// 16 6 7} 8 9let obj = { 10name:"chombi" , 11age:16 , 12} 13 14details(obj) // function call
Here , we have passed object as an argument to details function , and we have destructured values in parameter only.
3
Destructuring array in function parameter
At the time of array destructuring , we have to keep variables between square brackets. Values will be destructured in the same order , they are available in array.
1function details([a,b,c,d,e]) { 2console.log(a); 3// 10 4console.log(b); 5// 20 6console.log(c); 7// 30 8console.log(d); 9// 40 10console.log(e); 11// 50 12 13} 14 15let arr = [10,20,30,40,50]; 16details(arr) // function call
Here , we have passed array as an argument to details function , and we have destructured values in parameter only.