This post was originally published on webinuse.com
Object destructuring means: extracting values, by key, from existing object.
Object destructuring was introduced in ES6. Prior to that, when we wanted to extract some values
from object it required a lot of typing. As a result, we had to do additional work, and often
this lead to mistakes.
One example of extracting data the old way would be following example.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
let name = obj.name;
let surname = obj.surname;
With ES6 object destructuring became a lot easier. It uses the following syntax: const {properties} = obj
.
We can use as many properties as we want, as long as those properties exist inside an object.
If we use key that does not exist in object, it will return undefined
.
When we use destructuring method, every property that we pass inside {}
will be created as variable.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
let {name, surname} = obj;
console.log(name);
console.log(surname);
//Result:
//John
//Doe
Default value in object destructuring
If we are not sure whether some key will be defined we can pass default values, like in the example below.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
const {name, surname, age=18} = obj;
console.log(name);
console.log(surname);
console.log(age);
//Result:
//John
//Doe
//18
How to use alias
Alias means substitute name for key without modifying the key. This is useful when we have variables with similar, or same
names as object keys, so we want to differentiate them.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
const {name: nameAlias} = obj;
console.log(nameAlias);
//Result:
//John
Extracting properties from nested objects
Not all objects are created with one level. Sometimes we use objects with multiple levels. By using object destructuring we can
extract data from all levels.
let obj = {
id: 123,
name: {
firstName: "John",
lastName: "Doe"
}
}
let {name: {firstName, lastName}} = obj;
console.log(firstName);
console.log(lastName);
//Result:
//John
//Doe
Dynamic key object destructuring
Sometimes we need to destructure object where we do not know property name in advance, but it is known at runtime.
We can use object destructuring for that, also.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
let prop = 'name';
let {[prop]: name} = obj;
console.log(name);
//Result:
//John
Combination of rest operator and object destructuring
If we need to separate some properties from the rest of the object, but we also need the rest of the object, we can use rest (...) operator.ž
Syntax for destructuring object this way is as following:
let {identifiers, ...rest} = obj.
After we destructure object this way, identifier(s) contain property value, while ...rest
contains remaining properties.
let obj = {
id: 123,
name: "John",
surname: "Doe"
}
let {id, ...names} = obj;
console.log(id);
console.log(names);
//Result:
//123
//{name: 'John', surname: 'Doe'}
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to use localStorage API.
Top comments (2)
Hello, nice article !
I think you should also talk about destructuring Arrays since it's pretty similar ;)
That is something I have intention to do in the next few articles.
Thank you for your appreciation and support. Really appreciate it.