Объектная деструктуризация
Объектная деструктуризация
Технический фундамент объектной деструктуризации
Деструктуризация — это синтаксис привязки переменных к свойствам объекта за один шаг.
Она поддерживает переименование, значения по умолчанию и вложенный доступ.
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. - Делает код с объектами компактнее и чище.