What is destructuring in JavaScript?

Destructuring is a syntactic sugar in JavaScript that allows extracting properties of objects or elements of arrays into separate variables. It makes the code more readable and concise.

Object Destructuring:

// Original object
const user = { name: 'Alice', age: 30 };

// Destructuring
const { name, age } = user;

console.log(name); // Alice
console.log(age); // 30

Variables can be renamed during destructuring:

const user = { name: 'Bob', age: 25 };
const { name: fullName, age: userAge } = user;

console.log(fullName); // Bob
console.log(userAge); // 25

Default values can be set:

const user = { name: 'Charlie' };
const { name, age = 20 } = user;

console.log(name); // Charlie
console.log(age); // 20

Array Destructuring:

// Original array
const colors = ['red', 'green', 'blue'];

// Destructuring
const [firstColor, secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

Elements can be skipped:

const numbers = [1, 2, 3, 4];
const [, , thirdNumber] = numbers;

console.log(thirdNumber); // 3

The rest operator (...) can be used:

const fruits = ['apple', 'banana', 'cherry', 'date'];
const [firstFruit, ...remainingFruits] = fruits;

console.log(firstFruit); // apple
console.log(remainingFruits); // ['banana', 'cherry', 'date']

Methods can be combined, and default values can be set:

const animals = ['cat'];
const [animal1, animal2 = 'dog'] = animals;

console.log(animal1); // cat
console.log(animal2); // dog

Destructuring is also frequently used when working with function arguments.