De-structuring assignment used to unpack values from arrays, or properties from objects, into distinct variables.
Output
HelloWorld.js
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.
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
This post first appeared on Java Tutorial : Blog To Learn Java Programming, please read the originial post: here
