Для чего нужен Object.assign?

Для чего нужен Object.assign

Object.assign() — это встроенный метод JavaScript, который копирует свойства одного или нескольких исходных объектов в целевой объект и возвращает целевой объект. Метод был добавлен в стандарт ES2015 (ES6) и стал одним из самых популярных инструментов для работы с объектами в JavaScript.

Основной синтаксис

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

• target — целевой объект, в который копируются свойства
• source1, source2, ... — исходные объекты, свойства которых копируются
• Возвращает — целевой объект с добавленными свойствами

Основные применения

1. Клонирование объектов

const original = { name: 'John', age: 30 };
const copy = Object.assign({}, original);

console.log(copy); // { name: 'John', age: 30 }
console.log(copy === original); // false — разные объекты

Это создает поверхностную копию (shallow copy). Вложенные объекты все еще ссылаются на оригиналы:

const original = { name: 'John', address: { city: 'NY' } };
const copy = Object.assign({}, original);

copy.address.city = 'LA';
console.log(original.address.city); // 'LA' — изменилась оригинальная!

2. Слияние объектов

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3 };
const obj3 = { d: 4 };

const merged = Object.assign({}, obj1, obj2, obj3);
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }

3. Переопределение свойств

Если в нескольких объектах есть одинаковые свойства, позднейший объект перезапишет значения:

const defaults = { theme: 'light', lang: 'en', fontSize: 14 };
const userSettings = { theme: 'dark', fontSize: 16 };

const settings = Object.assign({}, defaults, userSettings);
console.log(settings);
// { theme: 'dark', lang: 'en', fontSize: 16 }

4. Добавление методов к объекту

const target = {};
const methods = {
  greet() {
    return 'Hello!';
  },
  goodbye() {
    return 'Bye!';
  }
};

Object.assign(target, methods);
console.log(target.greet()); // 'Hello!'

Практические примеры в React

Обновление состояния

// В классовом компоненте
class User extends React.Component {
  state = { name: 'John', age: 30 };

  updateUser = (newData) => {
    this.setState(prevState => 
      Object.assign({}, prevState, newData)
    );
  }

  handleNameChange = (e) => {
    this.updateUser({ name: e.target.value });
  }

  render() {
    return (
      <input value={this.state.name} onChange={this.handleNameChange} />
    );
  }
}

Распространение свойств

// Вместо Object.assign часто используют спред-оператор
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 };

// Эквивалентно
const updatedUser2 = Object.assign({}, user, { age: 31 });

Сравнение с другими методами

Object.assign vs Spread оператор

// Object.assign
const obj1 = Object.assign({}, source);

// Spread оператор (современный подход)
const obj2 = { ...source };

// Оба создают поверхностную копию
// Spread оператор предпочтителен в современном коде

Object.assign vs Object.create

// Object.assign копирует свойства
const copy = Object.assign({}, original);

// Object.create создает новый объект с прототипом
const copy2 = Object.create(Object.getPrototypeOf(original));
Object.assign(copy2, original);

Важные особенности

Работает только с перечислимыми свойствами

const source = {};
Object.defineProperty(source, 'hidden', {
  value: 'secret',
  enumerable: false
});

const copy = Object.assign({}, source);
console.log(copy.hidden); // undefined

Копирует символы

const sym = Symbol('key');
const source = { [sym]: 'symbol value' };
const copy = Object.assign({}, source);

console.log(copy[sym]); // 'symbol value'

Копирует свойства прототипа? Нет!

const Parent = { parentProp: 'value' };
const Child = Object.create(Parent);
Child.childProp = 'child';

const copy = Object.assign({}, Child);
console.log(copy.parentProp); // undefined
console.log(copy.childProp); // 'child'

Когда использовать Object.assign

Хорошо подходит для:

• Слияния конфигураций
• Переопределения значений по умолчанию
• Создания копий объектов для изменения без мутации оригинала

Плохо подходит для:

• Глубокого клонирования (используй JSON.parse(JSON.stringify(...)) или структурированное клонирование)
• Работы с объектами с методами (копируются только данные)

Альтернативы в современном JavaScript

// Spread оператор (ES2018+) — предпочтительнее
const merged = { ...obj1, ...obj2, ...obj3 };

// Для глубокого клонирования (ES2022+)
const deepCopy = structuredClone(original);

// Или старый способ
const deepCopy2 = JSON.parse(JSON.stringify(original));

Итоги

• Object.assign() копирует свойства в целевой объект
• Создает поверхностную копию (shallow copy)
• Полезен для слияния объектов и переопределения свойств
• В современном коде часто заменяется спред-оператором {...}
• Не подходит для глубокого клонирования вложенных объектов