Learn JavaScript

Object.assign() - метод для копирования свойств объекта в JavaScript

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

Это удобный метод, когда нужно объединить объекты или сделать поверхностную копию.

Синтаксис

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

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

source - объект, из которого эти свойства берутся.

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

Метод берёт свойства из источников и переносит их в целевой объект.

const target = { a: 1 };
const source = { b: 2 };

Object.assign(target, source);

console.log(target); // { a: 1, b: 2 }

Что возвращает Object.assign()

Object.assign() возвращает целевой объект.

const target = { a: 1 };
const result = Object.assign(target, { b: 2 });

console.log(result);         // { a: 1, b: 2 }
console.log(result === target); // true

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

Object.assign() меняет target

Это главный момент, который важно запомнить.

const user = { name: "Anna" };

Object.assign(user, { age: 25 });

console.log(user); // { name: "Anna", age: 25 }

Метод меняет именно первый аргумент.

Копирование нескольких объектов

Можно передать сразу несколько источников:

const target = {};

Object.assign(target, { a: 1 }, { b: 2 }, { c: 3 });

console.log(target); // { a: 1, b: 2, c: 3 }

Это удобно, когда нужно объединить несколько наборов свойств.

Если свойства совпадают

Если в нескольких источниках есть одно и то же свойство, побеждает последнее.

const result = Object.assign({}, { name: "Anna" }, { name: "Ivan" });

console.log(result); // { name: "Ivan" }

Более поздний источник перезапишет предыдущее значение.

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

Object.assign() делает только поверхностное копирование.

Это значит, что вложенные объекты не копируются глубоко.

const user = {
  name: "Anna",
  address: { city: "Moscow" },
};

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

copy.address.city = "Paris";

console.log(user.address.city); // "Paris"

copy и user получили разные верхние объекты, но вложенный address остался общей ссылкой.

Как сделать копию объекта

Частый сценарий - создать поверхностную копию объекта:

const user = { name: "Anna", age: 25 };
const copy = Object.assign({}, user);

console.log(copy); // { name: "Anna", age: 25 }

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

const copy = { ...user };

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

Object.assign() часто используют, чтобы собрать один объект из нескольких.

const defaults = { theme: "light", lang: "ru" };
const userSettings = { lang: "en" };

const settings = Object.assign({}, defaults, userSettings);

console.log(settings); // { theme: "light", lang: "en" }

Это один из самых частых сценариев использования метода.

Object.assign() и spread

Во многих случаях результат похож:

const result = Object.assign({}, { a: 1 }, { b: 2 });
const result2 = { ...{ a: 1 }, ...{ b: 2 } };

Оба варианта дают похожий итог.

Но Object.assign() полезно знать, потому что он часто встречается в коде и явно показывает идею копирования в target.

Object.assign() и Object.create()

Это методы для разных задач.

Object.assign() копирует свойства.

Object.create() создаёт объект с указанным прототипом.

const base = { role: "user" };
const user = Object.create(base);

Object.assign(user, { name: "Anna" });

console.log(user.name); // "Anna"
console.log(user.role); // "user"

Иногда их даже используют вместе.

Примитивы как source

Если в качестве источника передать примитив, JavaScript попытается обернуть его в объект.

const result = Object.assign({}, "hi");

console.log(result); // { 0: "h", 1: "i" }

Такое поведение полезно знать, хотя в обычном коде это используют редко.

null и undefined

Если передать null или undefined как source, они просто будут пропущены.

const result = Object.assign({}, null, undefined, { a: 1 });

console.log(result); // { a: 1 }

Но target при этом должен быть объектом. Если target будет null или undefined, метод выбросит ошибку.

Когда это полезно

Object.assign() удобно использовать, когда:

  • нужно объединить несколько объектов
  • нужно сделать поверхностную копию объекта
  • нужно дописать свойства в существующий target

Пример:

const user = { name: "Anna" };
const result = Object.assign({}, user, { active: true });

console.log(result); // { name: "Anna", active: true }

Частые ошибки

Думать, что Object.assign() не меняет target

const target = { a: 1 };

Object.assign(target, { b: 2 });

console.log(target); // { a: 1, b: 2 }

Первый аргумент всегда меняется.

Считать, что копирование глубокое

const user = { profile: { city: "Moscow" } };
const copy = Object.assign({}, user);

Вложенные объекты внутри останутся общими.

Забывать, что последнее свойство побеждает

const result = Object.assign({}, { name: "Anna" }, { name: "Ivan" });

console.log(result); // { name: "Ivan" }

Более поздние источники перезаписывают более ранние.

Быстрая памятка

  • Object.assign() копирует свойства из source в target
  • метод возвращает target
  • первый аргумент меняется
  • копирование здесь только поверхностное
  • если свойства совпадают, побеждает последнее значение

Коротко

Object.assign() - это удобный способ копировать и объединять свойства объектов. Главное, что стоит запомнить: метод изменяет target, возвращает его же и делает только поверхностную копию.