Destructuring in js refers to unpacking of values from arrays and properties from objects into distinct variables.
Now what does this mean?
Lets say we have an array of two elements and we want to store the values in two variables.
Conventionally we would go with this approach.
const arr = [1, 3];
const a = arr[0];
const b = arr[1];
OR if we have an object and we want to get the properties from the array we will access the values using dot(.) operator
const obj = {
name: "Naruto",
power: "Rasengan",
};
const name = obj.name;
const power = obj.power;
Javascript introduced the concept of destructuring in ES6, which make it very easy to extract data from arrays/objects and store them in distict variables.
For the above problems we will use the following approaches.
For array
const arr = [1, 3];
const [a,b] = arr;
/*
a = 1
b = 3
*/
for object
const obj = {
name: "Naruto",
power: "Rasengan",
};
const { name, power } = obj;
/*
name -> Naruto
power -> Rasengan
*/
Default values
We can also assign some default values if the value we are trying to extract does not exist.
const [a, b, c = 1] = [1,3];
const { name, power,age=0 } = {name: "Naruto",
power: "Rasengan"};
In the above example the value of c
will be 1
as the array only has 2 elements and c
is trying to extract 3rd element.
AND age
will be 0
as age is not present in the object which is being destructured.
Top comments (0)