Destructuring assignment is a special syntax that allows unpacking arrays or objects into a bunch of variables. Destructuring an Object In general, if you want to get the value of the name
and the color
properties from the car
object, you have to create two variables, name
that has a value of car.name
.
const name = car.name;
And the color
that have a value of car.color
const color = car.color;
You can go, for the other values, by creating variables for each property you
want to access to. This leads to a repetitive code, so what you can do, instead
of creating multiple variables, is go for a const
open the
brackets
, this is not an object, this is the destructuring syntax,
and put name
and color
equal to the object
car
const { name, color } = car;
This syntax is telling your program, giving me a variable name
and
a variable color
, and take it from the car
object. Now
if you console log the variables name
and color
,
you’ll get the values Fiat
and red
.
console.log(name);
console.log(color);
Accessing the values Similarly, if I want to access to the
weight
property value, same thing here, I’ll add the
weight
variable.
const { name, color, weight } = car
Console log the weight
console.log(weight);
Okay, This way of unpacking values from an object can be helpful in case of
accessing nested data, let’s rename the property color
to
colors
, and the value of colors
will be an object of
multiple colors plus their status, in this case, a boolean of
true
or false
.
const car = {
name: "Fiat",
model: 500,
weight: 850,
colors: {
red: true,
green: false,
white: false,
},
};
To access, as an example the value of red
from the object
car
, first, create a new const
, add the destructuring
brackets
, and, add the red
variable, equal to the
car
object.
const { red } = car;
If you try and console log the value of red
, you’ll get undefined,
because the red
property is inside the
colors
property, so you’ve two solutions to access to a deepest
nested property, the first one, pulls out the red
from the
car.colors
object. Go for a const
, and, add the
destructuring syntax using brackets
, equal to
car.colors
instead of a car
.
const {
red,
} = car.colors;
Console log the red variables
console.log(red);
The value is true
, so if I want to get the
green
value, same here, add the green
variable
const {
red,
green,
} = car.colors;
Console.log the green
variable
console.log(green);
And the result is false. The Other solution to destructure a nested object, is
by going level by level, in our case, we want to access the
red
property, so first you get into the colors
and
we’ll go deeper into red
, now instead of doing an equal
car.colors
, you can go to an equal car
, now you’re
destructuring the whole object car
, instead of one part of it.
const {
colors: { red },
} = car;
Renaming Variables Let’s now take a look to renaming variables as you
destructure them, so the basic syntax to achieve that is, you tell, I want this
property, but I want to change its name, to redColor
.
const {
colors : { red: redColor }
} = car;
Now if I console log redColor
I will get the value of the
car
colors
red
property.
console.log(redColor);
Still, I can’t access the red
variable name, it’s inaccessible now,
because I change its name.
console.log(red);
I’ll get red
is not defined. Set a default value What about now, if
I want to set a default value to a non-specified property. As an example I want
to add some specific color brown
which is not already defined on
the car
object, so I’ll add a new property brown
to
the colors
, and, to set a default value to this variable, you’ve to
use the equal sign, plus the value you want to assign to it.
const {
colors: { red: redColor, brown = true },
} = car;
Console log the brown
variable
console.log(brown);
Cool, the value is true
. You can update the value to
false
.
const {
colors: { red: redColor, brown = false },
} = car;
And console log will show false. Rename the variable, and set a Default value to
it The other interesting thing, that you can even rename variables as you
destructure them, plus, you can also assign a specific value to them, go for a
white
variable, rename it to whiteColor
, and set a
default value to false
, same for brown
variable,
rename it to brownColor
, and, the value is already set to
false
const {
colors: {
red: redColor,
white: whiteColor = false,
brown: brownColor = false,
},
} = car;
Console log booth whiteColor
and brownColor
, cool, the
values are correct, as respectively specified, false
and
false
.