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

Деструктуризация в JavaScript

Деструктуризация (destructuring assignment) — это синтаксический сахар ES6, который позволяет «распаковывать» значения из массивов или свойства из объектов в отдельные переменные. Код становится короче и читаемее.

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

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

const user = { name: 'Иван', age: 25, city: 'Москва' };

// Без деструктуризации
const name = user.name;
const age = user.age;

// С деструктуризацией
const { name, age } = user;
console.log(name); // 'Иван'

Переименование и значения по умолчанию

const { name: userName, role = 'user' } = user;
// userName = 'Иван', role = 'user' (так как свойства нет в объекте)

Вложенная деструктуризация

const { address: { street } } = { address: { street: 'Арбат' } };
console.log(street); // 'Арбат'

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

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

const colors = ['red', 'green', 'blue'];

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

Пропуск элементов

const [, , third] = colors;
console.log(third); // 'blue'

Rest-оператор

const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]

Практические применения

Обмен переменных

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

Деструктуризация параметров функции

function greet({ name, age = 18 }) {
  return `Привет, ${name}! Тебе ${age} лет.`;
}

greet({ name: 'Анна', age: 22 }); // 'Привет, Анна! Тебе 22 лет.'

Деструктуризация возвращаемого значения

function getCoords() {
  return { x: 10, y: 20 };
}

const { x, y } = getCoords();

Важные нюансы

• При деструктуризации null или undefined выбрасывается TypeError — нужно защищаться дефолтным значением или проверкой.
• Значения по умолчанию срабатывают только если свойство равно undefined, но не null.
• Порядок важен для массивов, но не для объектов.