Деструктуризация — JS: Объекты

Объекты в реальных приложениях часто имеют сложную структуру. Объекты, вложенные в объекты, которые вложены в объекты и так далее. Использовать глубоко вложенные объекты напрямую неудобно, если такое использование требует повторных обращений:

const greeting = `${user.company.name} was founded in ${user.company.createdAt}`;
console.log(greeting);

Разработчики стараются сократить такой код и создают промежуточные константы для вложенных данных:

const company = user.company;
const greeting = `${company.name} was founded in ${company.createdAt}`;
console.log(greeting);

Чем больше обращений к вложенным данным, тем полезнее эта техника. Но само извлечение данных может стать громоздким если этих данных много. Пример из реальной жизни:

const response = {
  data: {
    type: 'photos',
    id: '550e8400-e29b-41d4-a716-446655440000',
    attributes: {
      title: 'Ember Hamster',
      src: 'http://example.com/images/productivity.png'
    },
    relationships: {
      author: {
        links: {
          related: 'http://example.com/articles/1/author'
        },
      },
    },
    links: {
      self: 'http://example.com/photos/550e8400-e29b-41d4-a716-446655440000'
    },
  },
};

Это данные вымышленного приложения представленные в виде формата jsonapi. Он, например, используется на Хекслете для взаимодействия серверной и клиентской части сайта. Внутри клиента эти данные извлекаются и выводятся на экран. Представьте себе, как бы мог выглядеть код извлечения внутренностей этой структуры:

const user = response.data.attributes;
const links = response.data.links;
const author = response.data.relationships.author;

Чем больше данных нужно извлечь и чем они глубже расположены, тем больше однообразного и повторяющегося кода придется написать. В принципе, в этом нет никакого криминала и раньше так жили все. Но с развитием языка появилась возможность сделать код гораздо лучше.

Деструктуризация (destructuring) — специальный синтаксис, позволяющий извлекать части из составных данных. Это удобный способ раскладывать объекты на части. Он позволяет сократить код и сделать его более понятным.

const person = { firstName: 'Rasmus', lastName: 'Lerdorf', manager: true };

const { firstName, manager } = person;

console.log(firstName); // => 'Rasmus'
console.log(manager); // => true

https://repl.it/@hexlet/js-objects-destructuring-object-destructuring

Деструктуризация похожа на создание объекта. Абсолютно тот же самый синтаксис, но теперь не для создания объекта, а для разложения его на части. Деструктуризация позволяет "раскладывать" объект по частям, то есть не обязательно извлекать все части сразу. В примере выше у объекта три свойства, но извлекаются только два. Порядок описания свойств при извлечении не важен.

При деструктуризации можно переименовывать имена. Такое бывает нужно, если подобная константа уже определена выше.

const manager = /* ... */; // имя занято 

const person = { firstName: 'Rasmus', lastName: 'Lerdorf', manager: true };

const { manager: isManager } = person;

console.log(isManager); // => true

В случае отсутствия свойств в объекте, деструктуризация позволяет задавать значения по умолчанию для таких свойств:

const person = { firstName: 'Rasmus', lastName: 'Lerdorf' };

console.log(person.manager); // undefined
const { manager = false } = person;
console.log(manager); // => false

https://repl.it/@hexlet/js-objects-destructuring-default-value

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

// const user = response.data.attributes;
// const links = response.data.links;
// const author = response.data.relationships.author;

const { links, attributes: user, relationships: { author } } = response.data;

У spread оператора есть похожий, но выполняющий обратное действие оператор, называемый rest. С его помощью во время деструктуризации можно собрать все "оставшиеся" свойства в один объект:

const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };

const { name, ...rest } = user;

console.log(rest);
// => { email: 'support@hexlet.io', age: 44 }

Деструктуризация хоть и не является обязательным элементом и она не влияет на архитектуру программ, но ее использование делает код чище и понятнее (если не увлекаться глубиной).

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.