Объектная деструктуризация

Объектная деструктуризация

Технический фундамент объектной деструктуризации

Деструктуризация — это синтаксис привязки переменных к свойствам объекта за один шаг.
Она поддерживает переименование, значения по умолчанию и вложенный доступ.

const user = { name: 'Ann' };
const { name, role = 'student' } = user;

console.log(name); // Ann
console.log(role); // student

Ключевой момент: деструктуризация сокращает «шум» доступа к полям, но требует аккуратности с undefined/null.

Базовый синтаксис

const user = { id: 1, name: 'Ann', city: 'Minsk' };

const { name, city } = user;
console.log(name); // Ann
console.log(city); // Minsk

Это эквивалентно ручному чтению user.name, user.city, но компактнее.

Переименование переменных

const { name: userName } = user;
console.log(userName); // Ann

Полезно, когда имя поля конфликтует с уже существующей переменной.

Значения по умолчанию

const { role = 'student' } = user;
console.log(role); // student

Если свойства нет или оно undefined, сработает default.

Проверь себя: сработает ли default, если свойство равно null?

Подсказка: нет. Default применяется только когда значение undefined.

const u = { role: null };
const { role = 'student' } = u;
console.log(role); // null

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

function printUser({ name, city }) {
  console.log(`${name} from ${city}`);
}

printUser(user);

Это удобно для функций, принимающих объект конфигурации.

Смотри, что важно: если функцию могут вызвать без аргумента, добавляют значение по умолчанию {}:

function printUserSafe({ name, city } = {}) {
  console.log(`${name} from ${city}`);
}

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

const order = {
  id: 101,
  customer: { name: 'Max' },
};

const {
  customer: { name: customerName },
} = order;

console.log(customerName); // Max

Смотри, что важно: вложенная деструктуризация упадет, если промежуточного объекта нет. Часто добавляют fallback:

const order2 = { id: 1 };
const { customer: { name } = {} } = order2;
console.log(name); // undefined

Типичные ошибки

  • Деструктурировать undefined или null (будет ошибка).
  • Путать переименование (name: userName) с вложенностью.
  • Ожидать, что default сработает для null.
  • Делать слишком глубокую деструктуризацию, ухудшая читаемость.

Анти-провал: если источник может быть пустым, ставь безопасный fallback: const {name} = obj || {};.

Краткий итог

  • Деструктуризация извлекает свойства объекта в переменные.
  • Можно переименовывать поля и задавать значения по умолчанию.
  • Часто используется в параметрах функций.
  • Удобна, но требует аккуратности с undefined/null.
  • Делает код с объектами компактнее и чище.