Как объединить свойства двух JavaScript объектов в один?

Способы объединения объектов в JavaScript

Для объединения свойств двух или более объектов в JavaScript существует несколько подходов. Рассмотрим самые популярные и правильные из них.

1. Spread оператор (рекомендуемый способ)

Самый современный и лаконичный способ — использовать spread оператор .... Он работает с объектами начиная с ES2018 (ES9).

const user = {
  name: 'Иван',
  age: 30
};

const address = {
  city: 'Москва',
  street: 'Тверская'
};

const merged = { ...user, ...address };

console.log(merged);
// { name: 'Иван', age: 30, city: 'Москва', street: 'Тверская' }

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

const obj1 = { id: 1, name: 'Анна' };
const obj2 = { id: 2, city: 'СПб' };

const result = { ...obj1, ...obj2 };
console.log(result); // { id: 2, name: 'Анна', city: 'СПб' }

2. Object.assign()

Классический метод, доступный во всех версиях ES6+. Он копирует свойства из исходных объектов в целевой объект.

const merged = Object.assign({}, user, address);

console.log(merged);
// { name: 'Иван', age: 30, city: 'Москва', street: 'Тверская' }

Важно: первый аргумент — это целевой объект. Если передать пустой объект {}, то исходные объекты не изменятся. Если передать существующий объект, он мутирует:

const target = { country: 'Россия' };
Object.assign(target, user, address);
console.log(target); // target изменился, теперь содержит свойства из user и address

Правило перезаписи такое же: последний объект имеет приоритет при совпадении ключей.

3. Цикл for...in (устаревший способ)

Можно объединять вручную, но это не рекомендуется, если есть современные альтернативы:

const merged = {};

for (let key in user) {
  merged[key] = user[key];
}
for (let key in address) {
  merged[key] = address[key];
}

console.log(merged); // тот же результат

Что выбрать?

• Spread оператор { ...a, ...b } — лучший выбор для современного кода. Коротко, читаемо, не мутирует исходные объекты.
• Object.assign() — если нужно поддерживать старые браузеры (IE) или работать в среде, где spread для объектов недоступен.
• Цикл — только если нужно добавить дополнительную логику при копировании (например, фильтрацию или трансформацию).

Важные замечания

Оба способа выполняют поверхностное копирование (shallow copy). Если свойства объектов — это вложенные объекты или массивы, они будут скопированы по ссылке:

const a = { nested: { value: 1 } };
const b = { other: 2 };
const c = { ...a, ...b };

c.nested.value = 999;
console.log(a.nested.value); // 999 — исходный объект изменился!

Для глубокого копирования с объединением используйте structuredClone() или библиотеки типа Lodash (_.merge()).

Надеюсь, теперь всё стало понятно! Используйте spread оператор — это современный и элегантный способ решить вашу задачу.

function mergeObjects(target, ...sources) {
  const result = { ...target };
  
  for (const source of sources) {
    for (const key in source) {
      if (source.hasOwnProperty(key)) {
        // Здесь можно добавить свою логику
        // Например, если оба объекта имеют числовое свойство 'count'
        if (typeof result[key] === 'number' && typeof source[key] === 'number') {
          result[key] += source[key]; // суммируем вместо перезаписи
        } else {
          result[key] = source[key]; // обычная перезапись
        }
      }
    }
  }
  
  return result;
}

// Пример использования:
const cart1 = { apples: 3, oranges: 2 };
const cart2 = { apples: 1, bananas: 4 };

const totalCart = mergeObjects(cart1, cart2);
console.log(totalCart); // { apples: 4, oranges: 2, bananas: 4 }