Last week we talked about array destructuring here. Now let's finally understand object destructuring!
Contents:
- Basic Syntax
- Renaming Properties
- Default Values
- Renaming and Default Values
- Nested Objects
- Mutating Variables
Basic Syntax
Destructuring is a simple way to extract data from arrays or objects into separate variables. Now, let's delve into the workings of object destructuring.
Consider this object as an example:
const user = {
userName: 'Ada',
age: 28,
city: 'São Paulo'
};
Now let's extract the data
for city
and age using destructuring:
const { city, age } = user;
Here, we've created two variables: city
and age
. These variables will hold the values corresponding to properties of the same names found in the user
object.
And now we can work independently with this information:
console.log(city); // output: 'São Paulo'
console.log(age); // output: 28
Some important details should be noted:
Note that the
userName
property was omitted in the destructuring. Unlike array destructuring, it's not necessary to manually skip properties.The order of the variables listed in the destructuring doesn't matter. You'll see that I placed
city
beforeage
, which won't result in an error. This is because in objects, properties do not follow a fixed order!Variable names can be changed while destructuring! For this, see below:
Renaming Properties
We can easily change the names of the properties extracted from the object at the same time as the destructuring assignment. This feature is particularly useful when you want to avoid naming conflicts:
const { city: c, age: a } = user;
console.log(c); // output: 'São Paulo'
console.log(a); // output: 28
Default Values
It's possible that some of the values extracted may be undefined
, which can be a source of bugs in your code. We can avoid this quite easily.
Let's assume we want to extract a nationality
property, which hasn't been defined. To avoid the variable being assigned undefined
, we can assign it a default value, like this:
const { city, age, nationality = 'Brazilian' } = user;
Renaming and Default Values
It is possible to combine the above syntaxes. So we can combine the process of renaming variables and setting default values simultaneously:
const {
city: c = 'Belo Horizonte',
age: a = 18,
nationality: n = 'Brazilian'
} = user;
And in the case of the user
object, the output will now be this:
console.log(c); // output: 'São Paulo'
console.log(a); // output: 28
console.log(n); // output: 'Brazilian'
Note that the default value will only be applied to n
, since the other values were already defined.
Nested Objects
If the object in question contains another object within it, it's also possible to destructure the nested object. Let's add grades
for subjects to the user
object:
const user = {
userName: 'Ada',
age: 28,
city: 'São Paulo',
grades: {
math: 9.5,
portuguese: 9.2,
chemistry: 10,
history: 7.5,
geography: 7.8,
}
};
To work separately with the grades, we can destructure like this:
const {
grades: {
math,
portuguese,
chemistry,
history,
geography
}
} = user;
And now, the values can be accessed separately:
console.log(math) // output: 9.5
console.log(portuguese) // output: 9.2
console.log(chemistry) // output: 10
console.log(history) // output: 7.5
console.log(geography) // output: 7.8
Mutating Variables
Next, let's explore the scenario where variables are already declared and initialized, such as a
and b
below:
let a = 55;
let b = 77
const object = {
a: 41,
b: 27,
c: 14
};
How can we assign a
and b
the values contained in the object? We can't write let {a, b} = object
or const {a, b} = object
, since we would be redeclaring the variables. But we also can't write {a, b} = object
, as JavaScript interprets any line starting with curly braces {}
as a block of code, resulting in a syntax error in the code.
The solution is to wrap the code using parentheses:
({a, b} = object);
console.log(a); // output: 41
console.log(b); // output: 27
This way, JavaScript will understand it as destructuring and not a block of code.
Thank you for making it this far! =)
Questions, comments, suggestions? Comment below!
Top comments (0)