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.