Коротко: запись
const { x } = y
означает «взять из объекта y свойство с именем "x" и положить его значение в новую переменную x». Это — объектная деструктуризация (ES6).
Дальше — практические примеры и полезные случаи.
1) Простая деструктуризация
const obj = { x: 1, y: 2 };
const { x } = obj; // x === 1
// переменные называются как имена свойств
2) Переименование переменной
const { x: a } = obj; // переменная a === 1, свойства в obj не меняются
3) Значения по умолчанию
const { z = 10 } = obj; // z === 10, если свойства z нет в obj
4) Несуществующее свойство → undefined
const { missing } = obj; // missing === undefined
5) Вложенная деструктуризация и защита от undefined
const nested = { a: { b: 5 } };
const { a: { b } } = nested; // b === 5
// Но если nested.a === undefined — получим ошибку. Чтобы избежать:
const { a: { b } = {} } = {}; // b === undefined, без ошибки
6) Оператор rest (собирает оставшиеся свойства)
const o = { x: 1, y: 2, z: 3 };
const { x, ...rest } = o;
// x === 1, rest === { y: 2, z: 3 }
7) Деструктуризация в параметрах функций + значение по умолчанию для аргумента
function greet({ name = 'Guest' } = {}) {
console.log('Hello,', name);
}
greet({ name: 'Alice' }); // Hello, Alice
greet(); // Hello, Guest (важно: = {} для защиты от undefined)
8) Динамические (вычисляемые) имена свойств
const prop = 'x';
const { [prop]: value } = { x: 42 };
console.log(value); // 42
9) Присвоение существующим переменным (без объявления) — нужны скобки
let x;
({ x } = { x: 7 }); // x === 7
// без внешних скобок JS воспримет { x } = ... как блок
10) const — связывает переменную, а не сам объект
const { x: v } = obj;
// v — константа (не переназначить), но если v — объект, его внутренние поля можно менять.
// Также изменение obj.x после деструктуризации не поменяет v (присвоение произошло в момент выполнения).
11) Ошибки/подводные камни
- Деструктуризация выбросит TypeError, если справа null или undefined:
const { a } = null; // TypeError
Решение: задать объект по‑умолчанию: const { a } = maybeObj || {}; или при параметрах функции — { } = {}.
- Порядок свойств не важен (в отличие от массивов): const { a, b } = obj — берутся по именам.
Короткие примеры для наглядности:
const user = { id: 1, name: 'Ann', prefs: { theme: 'dark' } };
const { id, name: username = 'User', prefs: { theme } } = user;
// id === 1
// username === 'Ann' (переименование с дефолтом)
// theme === 'dark'
Если нужно — могу привести больше примеров на конкретных задачах (функции, React props и т.д.).