Consider the following example:
In the example given above,
we have two objects fruit and animal
with keys of the same names
name and color.
When destructuring these objects
and storing the values in separate variables
we get an error because
we cannot have two variables named name
as well as two variables named color.
We can use a colon : to
specify another name for the variable
in which the value of a property
from a destructured object is stored.
Let's rewrite the above example:
In the example give above:
-
The value of the name property
from the fruit object is copied
and
assigned to fruitName.
-
The value of the color property
from the fruit object is copied
and
assigned to fruitColor.
-
The value of the name property
from the animal object is copied
and
assigned to animalName.
-
The value of the color property
from the animal object is copied
and
assigned to animalColor.
The ability to rename destructured properties
is useful in cases where
the key name of an object
is not a valid variable name,
as shown in the example given below:
In the example given above,
we get an error because "full-name"
is not a valid variable name.
So we need to rename the destructured property
to a valid variable name,
as shown in the example given below: