Destructuring is a powerful feature in JavaScript that came along with ES6. Destructuring allows you to extract values from arrays or objects and assign them to variables.

Let’s start with some basic array destructuring –

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor); // red
console.log(secondColor); // green
console.log(thirdColor); // blue

The array’s first element will be assigned to the first variable in the list of left-hand side operands. red will be assigned to firstColor, green will be assigned to secondColor, and so on.

You can also choose to get only those variables that you need. In the above case, you can extract only firstColor from this array.

const colors = ['red', 'green', 'blue'];
const [firstColor] = colors;
console.log(firstColor); // red

Skipping Items in an Array

If you want to get only the first and third element from the array, you can do this using the below syntax –

const colors = ['red', 'green', 'blue'];
const [firstColor, ,thirdColor] = colors;
console.log(firstColor); // red
console.log(thirdColor); // blue

Assigning the Rest of an Array

You can choose to collect the remaining elements into a new array.

const colors = ['red', 'green', 'blue'];
const [firstColor, ...colorlist] = colors;
console.log(firstColor); // red
console.log(colorlist); // ["green", "blue"]

Swapping Variables

 You can swap the values of two variables using destructuring.

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

Object Destructuring

const person = { firstName: 'Alice', lastName: 'Smith', age: 25 };
const { firstName, age } = person;
console.log(firstName); // Alice
console.log(age); // 25

In this example, we have an object person with properties firstName, lastName, and age. By using object destructuring, we create variables firstName and age that directly take the values of the corresponding properties from the person object.

The variable names should match with the key of the object. If names are different it will be undefined. There is a way to use different names however, let’s see how to do that.

Using Different Names

To use a different name just use colon (:) after the variable name. For ex,

const person = { firstName: 'Owen', lastName: 'Smith', age: 30 };
const { firstName: name, age } = person;
console.log(name); // Owen
console.log(age); // 30

Use Default Values

You can provide default values when destructuring in case the property is undefined or missing.

const person = { age: 25 };
const { name = 'Anonymous', age = 25 } = person;
console.log(name); // Anonymous

Nested Destructuring

Destructuring works with nested objects and arrays as well.

const person = {
  name: 'John',
  address: { city: 'New York', country: 'USA' }
};
const { name, address: { city, country } } = person;
console.log(city); // New York