Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Деструктуризация 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 }

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


Аватары экспертов Хекслета

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
18 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
18 мая 16 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»