Что такое деструктуризация в JavaScript?

Деструктуризация — это синтаксический сахар в JavaScript, который позволяет извлекать свойства объектов или элементы массивов в отдельные переменные. Это делает код более читаемым и лаконичным.

Деструктуризация объектов:

// Исходный объект
const user = { name: 'Alice', age: 30 };

// Деструктуризация
const { name, age } = user;

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

При деструктуризации можно переименовывать переменные:

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

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

Можно задавать значения по умолчанию:

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

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

Деструктуризация массивов:

// Исходный массив
const colors = ['red', 'green', 'blue'];

// Деструктуризация
const [firstColor, secondColor] = colors;

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

Можно пропустить элементы:

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

console.log(thirdNumber); // 3

Использовать оператор rest (...):

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

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

Можно комбинировать методы и задавать значения по умолчанию:

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

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

Деструктуризация также часто используется при работе с аргументами функций.