Destructuring objects
Destructuring on objects lets you bind variables to different properties of an object. You specify the property being bound, followed by the variable you are binding its value to.
var data = {
name : "Uzair",
age : 17,
gender : "male"
}
destructuring object items name into name and so on..
var {name,age,person} = data
console.log(age)
it is also possible to retrive values to a object that is not declared
var {name,age,gender} = {name:"Catty" , age:"21" , gender:"female"}
console.log(age)
it is also possible to assing value to variable that are declared before
the name of new variable should be same as the keys of object otherwise it will be undifined
var data = {
name : "Uzair",
age : 17,
gender : "male"
};
var name,age,gender;
({name,age,gender} = data);
console.log(age);
if we want to use a new variable name and assing it object key value
var data = {
name: "Uzair",
age: 17,
gender: "male",
};
//changing key names with new variables
var { name: nickname, age: umer } = data;
console.log(nickname); //it will render uzair
using default value , it will assing only in-case when key is not there / undefined
var data = {
name : "Uzair",
age : 17,
gender : "male"
}
var {name="usama" , friend ="wahab"} = data
console.log(name); // name is same as the object value
console.log(friend); //friend is with default value of wahab
we can also set default value when assinging with a new name
if the variable will match with the object key it will assing values from object otherwise it will
var data = {
name: "Uzair",
age: 17,
gender: "male",
};
var {
name: nickname = "uzey",
age: umer = "barahogya",
friend: dost = "some text",
} = data;
console.log(name); //here name will be assigned the uzair because it
exits in object
console.log(dost); //it will assing some text
computed property name
you can specify the name of a property
var data = {
name: "Uzair",
age: 17,
gender: "male",
};
var prop = "name"; //here we are assinging object key name in prop
var { [prop]: myname } = data;
the value of myname will be the value of data.name prop has key name in it
it will find value from abject**
console.log(myname); //we will get Uzair in result
rest method means you can assing more the one value to a variable
var data = {
name: "Uzair",
age: 17,
gender: "male",
friends: ["faiq", "ibad", "wahib"],
};
var { name, ...others } = data;
console.log(name); //result will be uzair
console.log(others); //result will be { age: 17
gender: "male"
friends:["faiq", "ibad", "wahib"]
}
Hope you find this article useful. Please share your thoughts in the comment section.
Top comments (0)