JavaScript Destructuring

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.

// 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.

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

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.

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

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.

// 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

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

let key = "fullName";
let {[key] : fn} = {fullName : "kiran raj"};
console.log(fn);   //kiran raj

What happened here is

{fullname : fn} = {fullname : "kiran raj"}
// fn get value "kiran raj"