JavaScript Destructuring
Tags: javascript, beginners, webdev, programming
Published: 2021-04-02 08:01:15

`Destructuring = unpacking`. In JavaScript, destructuring is the process by which we unpack values from array or objects into distinct variables. Lets look at a destructuring assignment example.

```javascript

// Array Destructuring
let arr_name = ["kiran", "raj"];
let [fname, lname] = arr_name;
console.log(fname, lname);      //kiran raj

let arr = [1,2,3,4,5];
let [a,b,c] = arr;
console.log(a,b,c);             //1  2  3
```
When we assign the array *arr_name* to fname and lname variables the values in the *arr_name* is passed to the variables. What happened there can be explained as following.

```javascript
fname = arr_name[0];
lname = arr_name[1];
```  

The value passed is based on the position of the variables with that of the array. Let me explain it with an example 

```javascript
let [x,,z] = [1,2,3]
console.log(x,z);               // 1 3

[z,,x] = [1,2,3]
console.log(x,z);               // 3 1
```
In the above code you can see that the 'z' get value 3, because we did not provide any variable to catch the second value so the value is skipped and third value is assigned to variable 'z'. Value is passed based on the position of the variable that is why 'z' get different value when the position of the variable 'z' is changed. Let's look at another code snippet.

```javascript
let arr = [1,2,3,4,5];
let [a2=10, b2, c2] = arr;
console.log(a2,b2,c2);          // 1  2  3

let [a3, b3, c3=30] = [1,2];
console.log(a3,b3,c3);          //1  2  30
```
We can pass default values to variables if the variable get *undefined* then the default value is used. Look at the code we can see that 'a2' is assigned a value of 10 but console.log statement shows that the value of 'a2' is 1 because after value 10 is provided to 'a2', 'arr' pass a value 1 to it, which overwrites the current value. But in the second block we can see that c3 is provide a value of 30 and no value is passed by the 'arr', so the value remains as 30, the passed default value.

We can also destructure the return value of a function,  check the code below
```javascript
function numberOut(){
    return [100, 200, 300];
}
let [x,y,z] = numberOut();
console.log(x,y,z);             // 100 200 300  
```
Till now we look at the array destructuring now lets look at the examples below. I will not be explaining those, hope you can understand it by comparing with array destructuring.

```javascript

// Object destructuring
let obj = { fn: "kiran", ln: "raj"}
let {fn, ln} = obj;
console.log(fn, ln)                   //kiran raj

// Object literal destructuring assingment
let x, y;
({x,y} = {x:100, y:200});
console.log(x,y);                      // 100 200
({x,y} = {y:200});       
console.log(x,y);                      // undefined 200
let{ a = 10, b = 20} = {a:100};
console.log(a,b);                      // 100 20
```
Let's look at another example
```javascript
let obj2 = {a4: "apple", b4: "ball"};
let {a4: aa, b4: bb} = obj2;
console.log(obj2.a4, obj2.b4);          //apple ball
console.log(aa, bb);                    //apple ball
```

Here we created a object "obj2" with two properties a4 and b4. In next step we created an object with same key name as of object "obj2" (the values of key's are two variables aa, bb respectively) then we assign the obj2 to the newly created object. What happened here is variables passed as values of the newly created object assign with the value of obj2's value.

One more example, computed object property name
```javascript
let key = "fullName";
let {[key] : fn} = {fullName : "kiran raj"};
console.log(fn);   //kiran raj
```
What happened here is 
```javascript
{fullname : fn} = {fullname : "kiran raj"}
// fn get value "kiran raj"
```