Object Destructuring was introduced in ES6 version of Javascript
Destructuring simplifies extracting values from arrays and objects.
Before ES6
In order to access the properties of objects, we had to call them like this:
var person = {
name: 'sujay kundu',
age: 23,
role: 'software engineer'
}
var name = person.name;
var age = person.age;
var role = person.role;
console.log(name, age, role);
JavaScriptWith ES6
Now we can use object destructuring, we have simple syntax to access the properties of objects
Object destructuring uses object literals syntax {}
var person = {
name: 'sujay kundu',
age: 23,
role: 'software engineer'
}
let {name, age} = person;
console.log(name, age); //sujay kundu 23
let {name, age, role} = person
console.log(name, age, role); // sujay kundu 23 software engineer
let {name, role} = person;
console.log(name, role); // sujay kundu software engineer
JavaScriptWe can now access any properties from the object and assign it to the variable name and the property name is same so we are just destructuring it.
let {role} = person;
Removes the person.role and assign it the variable named role.
If we want to use a different variable name then we can do it like below:
let {name: fullName, age: completeAge, role: designation} = person;
console.log(fullName, completeAge, designation);
// sujay kundu 23 software engineer
JavaScriptlet {name: fullName}
pulls the person.name
property and assign it to the fullName
variable.
Defauly values can also be assigned to the variables.
let person = {
name: 'sujay kundu',
age: 23,
}
let {name: fullName, age: completeAge, role:designation = 'Engineer');
console.log(fullName, age, designation);
// sujay kundu 23 Engineer
JavaScriptNested objects destructuring
We can also use the destructuring for nested objects.
let person = {
name: 'sujay kundu',
age: 23,
address: {
street: 'random',
city: 'bangalore',
pincode: 560060
}
}
let { address: {street, city}} = person;
console.log(street, city); // random bangalore
JavaScriptCustom variables with nested objects destructuring.
let {address: {street: completeStreet, city: completeCity}} = person;
console.log(completeStreet, completeCity);
// random bangalore
JavaScript