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

Слияние JS: Объекты

Слияние (merge) – операция над объектами, выполняющая их объединение. Она появляется там, где необходимо данные одного объекта перенести в другой объект.

Слияние часто используется при работе с веб-формами. Например, когда пользователь меняет свои персональные данные в настройках аккаунта, измененные данные приходят в приложение в виде объекта. Данные из этого объекта нужно перенести в объект пользователя. Так происходит обновление пользователя:

// Такой пользователь есть в системе
const user = { name: 'Tirion', email: 'support@hexlet.io', age: 44 };

// Из формы пришли данные
const data = { name: 'Tirion 2', age: 33 };

// В результате должно получиться
// { name: 'Tirion 2', email: 'support@hexlet.io', age: 33 };

Решение в лоб – перенести каждое свойство отдельно:

user.name = data.name;
user.age = data.age;

// Где-то тут сохраняем пользователя в базе данных

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

if (Object.hasOwn(data, 'name')) {
  user.name = data.name;
}

// И так нужно перечислить все возможные свойства

С помощью слияния (часто говорят "мержа") мы можем сократить все до одной строчки:

Object.assign(user, data);
console.log(user);
// => { name: 'Tirion 2', email: 'support@hexlet.io', age: 33 };

Функция Object.assign() берёт объект, переданный первым параметром, и переносит в него всё из объектов, переданных остальными параметрами. В нашей ситуации это один объект, переданный вторым параметром.

Слияние работает так. Если какое-то свойство было только в первом объекте, то оно остается тем, что и было. Если свойство присутствует во втором (и далее) объекте, то оно записывается в первый независимо от того, было оно там или нет. Поэтому, если свойство присутствовало и в первом объекте и во втором, то оно будет перезаписано значением из второго объекта:

const obj1 = { a: 'a', b: 'b' };
const obj2 = { c: 'c', b: 'v' };
Object.assign(obj1, obj2);
console.log(obj1);
// => { a: 'a', b: 'v', c: 'c' }

У функции Object.assign() есть одно ограничение: она выполняет только поверхностное слияние. Вложенные объекты не сравниваются, а просто заменяются:

const obj1 = { a: { a: 1 } }
const obj2 = { a: { b: 1 } }
Object.assign(obj1, obj2);
console.log(obj1);
// => { a: { b: 1 } }

Как и любой другой мощный механизм, слияние нуждается в аккуратном использовании. В объектах бывают поля, которые не должны быть перезаписаны при слиянии, например, количество денег на счету у пользователя. Если не контролировать состав данных из второго объекта, то туда могут попасть свойства (случайно или злонамеренно), которые приведут к перезаписыванию важных свойств.

Если говорить про веб-формы, то технически всегда можно послать больше данных, чем описано в форме.


Дополнительные материалы

  1. Функция has из библиотеки Lodash

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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