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

Деструктуризация объектов — синтаксис ES6, позволяющий извлекать свойства объекта в переменные по именам ключей через паттерн { a, b } = obj.

Зачем нужно

Деструктуризация объектов делает код чище и компактнее: не нужно повторять obj.a, obj.b — достаточно один раз объявить нужные переменные. Особенно полезна в параметрах функций для документирования ожидаемых свойств и в импорте наборов утилит.

Где используется

  • Извлечение нескольких свойств объекта в локальные переменные
  • Параметры функций (вместо options.timeout, options.retries)
  • Импорт именованных экспортов из модулей
  • Переименование свойств при извлечении

Примеры

Базовая деструктуризация

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

const { name, age } = user;
console.log(name); // 'Иван'
console.log(age);  // 30

// city не деструктурирована — это нормально

Переименование

const { name: userName, age: userAge } = user;
console.log(userName); // 'Иван'
// name не определена в этой области

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

const { name, role = 'guest', active = true } = { name: 'Мария' };
console.log(role);   // 'guest' (значение по умолчанию)
console.log(active); // true

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

const config = {
  server: {
    host: 'localhost',
    port: 3000,
  },
  db: {
    name: 'mydb',
  },
};

const { server: { host, port }, db: { name: dbName } } = config;
console.log(host);   // 'localhost'
console.log(port);   // 3000
console.log(dbName); // 'mydb'

Rest в объекте

const { name: _, ...rest } = user;
console.log(rest); // { age: 30, city: 'Москва' }

// Удобно для исключения свойства при spread
const cleanUser = (({ password, ...safe }) => safe)(userWithPassword);

Параметры функции

// Без деструктуризации
function createUser(options) {
  const name = options.name;
  const role = options.role || 'user';
}

// С деструктуризацией (самодокументируется)
function createUser({ name, role = 'user', active = true }) {
  return { name, role, active, id: Date.now() };
}

createUser({ name: 'Иван', role: 'admin' });
createUser({ name: 'Мария' }); // role = 'user', active = true

В циклах

const users = [
  { id: 1, name: 'Иван' },
  { id: 2, name: 'Мария' },
];

for (const { id, name } of users) {
  console.log(`${id}: ${name}`);
}

Частые ошибки

  • Деструктуризация null или undefined — const { a } = null вызовет TypeError; проверяйте значение до деструктуризации или используйте || {}.
  • Переименование + умолчание одновременно — синтаксис: const { a: renamed = 'default' } = obj; — сначала : для псевдонима, потом = для умолчания.
  • Путать с деструктуризацией массивов — объект: {}, массив: ``.

Связанные темы

Ресурсы