Tuesday 11 December 2018

What is Destructuring Assignment in JavaScript?

De-structuring assignment used to unpack values from arrays, or properties from objects, into distinct variables.

For example,
HelloWorld.js
var arr1 = [2, 3, 5, 7, 11]

var [a, b, c, d, e] = arr1;

console.log("a : " + a);
console.log("b : " + b);
console.log("c : " + c);
console.log("d : " + d);
console.log("e : " + e);

Output
a : 2
b : 3
c : 5
d : 7
e : 11


As you see, above script, I defined 5 variables a, b, c, d, e in one line using destructuring assignment.

Destructuring to Rest parameters
var [a, b, ...c] = arr1;

First two values of the array arr1 are assigned to a, b and remaining values are assigned to c.

HelloWorld.js
var arr1 = [2, 3, 5, 7, 9]

var [a, b, ...c] = arr1;

console.log("a : " + a);
console.log("b : " + b);
console.log("c : " + c);


Output
a : 2
b : 3
c : 5,7,9

Destructuring object data
HelloWorld.js
var obj = {name : "Krishna", "age" : 29};

({name, age} = obj);

console.log("Name : "+ name);
console.log("Age : " + age);

Output
Name : Krishna
Age : 29

Order of the properties in the object doesn’t matter.
({age, name} = obj);

Above statement assign obj.age to age, obj.name to name.


HelloWorld.js
var obj = {name : "Krishna", "age" : 29};

({age, name} = obj);

console.log("Name : "+ name);
console.log("Age : " + age);

Output
Name : Krishna
Age : 29

Assigning property values to new variable names
({age:myAge, name:myName} = obj);

In the above statement, myAge and age has same value, name and myName has same value.


HelloWorld.js
var obj = {name : "Krishna", "age" : 29};

({age:myAge, name:myName} = obj);

console.log("myName : "+ myName);
console.log("myAge : " + myAge);

console.log("Name : "+ name);
console.log("Age : " + age);

Output
myName : Krishna
myAge : 29
Name : Krishna
Age : 29

Destructuring and default values
You can assign default values to the destructured variables. If the value unpacked from the object is undefined, then this default value is used.


HelloWorld.js
var obj = {name : "Krishna", "age" : 29, id: undefined};

var {age, name, organization="ABC Corp", id = 123} = obj;

console.log("age : " + age);
console.log("name : " + name);
console.log("organization : " + organization);
console.log("id : " + id);

Output
age : 29
name : Krishna
organization : ABC Corp
id : 123

Assigning default values to new variable names

HelloWorld.js
var obj = {name : "Krishna", "age" : 29, id: undefined};

var {age, name, organization : myOrganization="ABC Corp", id:myId = 123} = obj;

console.log("age : " + age);
console.log("name : " + name);
console.log("organization : " + myOrganization);
console.log("id : " + myId);

Unpacking fields from objects passed as function parameter

HelloWorld.js
var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{
    city : "Bangalore",
    country : "India"
  }
}

function printPersonInfo({firstName, address}){
  console.log(`Hello Mr ${firstName}, you are from ${address.city}`)
}

printPersonInfo(person);

Output
Hello Mr Krishna, you are from Bangalore

You can even extract the nested properties using destructuring.
function printPersonInfo({firstName, address : {city}})


HelloWorld.js
var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{
    city : "Bangalore",
    country : "India"
  }
}

function printPersonInfo({firstName, address : {city}}){
  console.log(`Hello Mr ${firstName}, you are from ${city}`)
}

printPersonInfo(person);

Output
Hello Mr Krishna, you are from Bangalore

You can even pass default values and choose custom names to destructured parameters.


HelloWorld.js
var person = {
  firstName : "Krishna",
  lastName : "Gurram",
  age : 29,
  address :{

  }
}

function printPersonInfo({firstName, address : {city : myCity = "Hyderabad", country : myCountry = "India"}}){
  console.log(`Hello Mr ${firstName}, you are from ${myCity}, ${myCountry}`)
}

printPersonInfo(person);

Output
Hello Mr Krishna, you are from Hyderabad, India




Previous                                                 Next                                                 Home

No comments:

Post a Comment