Объекты в реальных приложениях часто имеют сложную структуру. Объекты, вложенные в объекты, которые вложены в объекты и так далее. Использовать глубоко вложенные объекты напрямую неудобно, если такое использование требует повторных обращений:
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 }
Деструктуризация хоть и не является обязательным элементом и она не влияет на архитектуру программ, но ее использование делает код чище и понятнее (если не увлекаться глубиной).
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт