Object.assign() в JavaScript

• Что делает Object.assign()
• Синтаксис
• Копирование объекта
• Объединение объектов
• Перезапись свойств
• Поверхностная копия
• Итого

Object.assign() копирует свойства из одного или нескольких объектов в другой объект.

let user = {
  name: 'Анна',
};

let result = Object.assign(user, { age: 28 });

console.log(user); // { name: 'Анна', age: 28 }
console.log(result); // { name: 'Анна', age: 28 }

Метод возвращает объект, в который были скопированы свойства. В примере выше это тот же объект user.

Что делает Object.assign()

Object.assign() берет свойства из объектов-источников и добавляет их в целевой объект.

let target = {};

let source = {
  name: 'Анна',
  age: 28,
};

Object.assign(target, source);

console.log(target); // { name: 'Анна', age: 28 }

Здесь target - объект, куда копируем свойства. source - объект, откуда берем свойства.

Синтаксис

Object.assign(target, source1, source2, source3);

target - объект, который будет изменен.

source - объект, свойства которого нужно скопировать.

Источников может быть несколько. Свойства копируются слева направо.

Копирование объекта

Частый вариант использования - создать копию простого объекта.

let user = {
  name: 'Анна',
  age: 28,
};

let copy = Object.assign({}, user);

console.log(copy); // { name: 'Анна', age: 28 }

Первым аргументом передали пустой объект . Поэтому исходный объект user не изменяется, а свойства попадают в новый объект.

copy.age = 29;

console.log(copy.age); // 29
console.log(user.age); // 28

Для простого копирования в современном коде часто используют spread, но Object.assign() тоже встречается и работает нормально.

Объединение объектов

Методом Object.assign() можно собрать один объект из нескольких.

let user = {
  name: 'Анна',
};

let contacts = {
  email: 'anna@example.com',
};

let settings = {
  theme: 'dark',
};

let profile = Object.assign({}, user, contacts, settings);

console.log(profile);
// { name: 'Анна', email: 'anna@example.com', theme: 'dark' }

Здесь мы снова начинаем с пустого объекта, чтобы не менять user, contacts и settings.

Перезапись свойств

Если свойства называются одинаково, значение справа перезапишет значение слева.

let defaultSettings = {
  theme: 'light',
  fontSize: 16,
};

let userSettings = {
  theme: 'dark',
};

let settings = Object.assign({}, defaultSettings, userSettings);

console.log(settings); // { theme: 'dark', fontSize: 16 }

Сначала в новый объект попали значения из defaultSettings, затем theme был перезаписан значением из userSettings.

Это удобно, когда есть настройки по умолчанию и настройки пользователя.

Поверхностная копия

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

let user = {
  name: 'Анна',
  address: {
    city: 'Москва',
  },
};

let copy = Object.assign({}, user);

copy.address.city = 'Казань';

console.log(user.address.city); // Казань
console.log(copy.address.city); // Казань

Свойство address скопировалось как ссылка на тот же вложенный объект. Поэтому изменение видно и в оригинале, и в копии.

Если нужна независимая копия с вложенными объектами, можно использовать structuredClone(), но это уже отдельная задача.

Итого

• Object.assign() копирует свойства из одних объектов в другой.
• Первый аргумент изменяется и возвращается из метода.
• Object.assign({}, object) создает новый объект с теми же свойствами.
• Если свойства совпадают, более правый объект перезаписывает значение.
• Метод создает поверхностную копию.