In destructuring, we break down the data inside a complex array or object into simpler fragments. Here, we extract data from an array or object and then store them in a variable defined by us. Sometimes it’s also called ‘unpacking’.

Array Destructuring

Here are some examples to illustrate the same :

const arr = [cat, dog, goat, rabbit];

const [a, b, c, d] = arr;
// that's how we destructure using a const variable

console.log(a, c);
// returns 'cat' and 'goat' to the console

Now, here’s a rather complex example :

const employee = {
   name: 'Raghav Anand',
   location: '203,Church Gate, Delhi',
   departments: ['IT', 'front office', 'emp-welfare']
};

const [b,c] = employee.departments;

console.log(b,c);
//returns 'IT' and 'front office' to the console

Why the above code returns ‘IT’ and ‘front office’ is because b and c are the first two items inside the departments array inside the employee object.

Now let’s modify the code a little:

const employee = {
   name: 'Raghav Anand',
   location: '203,Church Gate, Delhi',
   departments: ['IT', 'front office', 'emp-welfare']
};

const [b, ,c] = employee.departments;

console.log(b,c);
//returns 'IT' and 'emp-welfare' to the console

Now in the code above we’ve added a space followed by comma in between b and c which completely changes the result.

Switching Variables using Array Destructuring

Here’s how you swap or switch variables easily using Array Destructuring :

let switchD = ['goat', 'rabbit'];
let [x,y] = switchD;

[x,y] = [y,x];
//switching variables

console.log(x,y);
// returns 'rabbit' and 'goat'

Note: Don’t use const if you want to switch, use var or let instead.

Object Destructuring

Just like arrays, we can destructure objects.

const companyEmployee = {
   name: 'Swati Dey',
   location: '203,Judges Field, Guwahati',
   departments: ['service', 'front office', 'emp-welfare']
};

const {name, departments} = companyEmployee;
// destructuring by creating two new variables

console.log(name, departments);

// returns the name and all three departments

The object destructuring is used for fetching API’s and making modern apps.

We can even change the names of variables above using object destructuring :

const companyEmployee = {
   name: 'Swati Dey',
   location: '203,Judges Field, Guwahati',
   departments: ['service', 'front office', 'emp-welfare']
};

const {name: Emp1, departments: Actions} = companyEmployee;
// destructuring by changing names of variables

console.log(Emp1, Actions);

// returns the name and all three departments

Switching Variables using Object Destructuring

Here’s how you switch variables using Object Destructuring :

let a = 'goat';
let b = 'calf';
let obj = {a: 'elephant', b: 'spider', c: 'monkey'};

({a,b} = obj);
//switch statement inside of '()'

console.log(a,b);
// we get 'elephant' and 'spider' rather than 'calf' and 'goat'

So, the switching here needs to be done inside ‘()’ otherwise the code runs into an error.