DEV Community

Cover image for Array/Object Destructuring in JavaScript
cybo-neutron
cybo-neutron

Posted on

Array/Object Destructuring in JavaScript

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];
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
*/

Enter fullscreen mode Exit fullscreen mode

for object

const obj = {
  name: "Naruto",
  power: "Rasengan",
};

const { name, power } = obj;


/*
name -> Naruto
power -> Rasengan
*/

Enter fullscreen mode Exit fullscreen mode

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"};

Enter fullscreen mode Exit fullscreen mode

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)