Чем Object.assign отличается от spread-оператора для объектов

1️⃣ Как кратко ответить

Object.assign и spread-оператор (оператор расширения) оба используются для копирования и объединения объектов. Основное отличие в том, что Object.assign изменяет и возвращает целевой объект, тогда как spread-оператор создает новый объект. Spread-оператор также более удобен для работы с вложенными объектами, так как он позволяет использовать деструктуризацию.

2️⃣ Подробное объяснение темы

Object.assign и spread-оператор — это два способа копирования и объединения объектов в JavaScript. Они часто используются для создания новых объектов на основе существующих, но имеют некоторые различия в поведении и применении.

Object.assign

Object.assign — это метод, который копирует значения всех перечисляемых собственных свойств из одного или более исходных объектов в целевой объект. Он изменяет и возвращает целевой объект.

Пример использования Object.assign:

const target = { a: 1 };
const source = { b: 2, c: 3 };
​
const result = Object.assign(target, source);
​
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 }

• const target = { a: 1 }; — создается целевой объект с одним свойством a.
• const source = { b: 2, c: 3 }; — создается исходный объект с двумя свойствами b и c.
• Object.assign(target, source); — копирует свойства из source в target. target изменяется и становится { a: 1, b: 2, c: 3 }.
• console.log(result); и console.log(target); показывают, что result и target ссылаются на один и тот же объект.

Spread-оператор

Spread-оператор (...) позволяет создавать новый объект, копируя свойства из одного или нескольких исходных объектов. Он не изменяет исходные объекты и возвращает новый объект.

Пример использования spread-оператора:

const source1 = { a: 1 };
const source2 = { b: 2, c: 3 };
​
const result = { ...source1, ...source2 };
​
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(source1); // { a: 1 }
console.log(source2); // { b: 2, c: 3 }

• const source1 = { a: 1 }; и const source2 = { b: 2, c: 3 }; — создаются два исходных объекта.
• const result = { ...source1, ...source2 }; — создается новый объект result, который копирует свойства из source1 и source2.
• console.log(result); показывает, что result содержит все свойства из source1 и source2.
• console.log(source1); и console.log(source2); показывают, что исходные объекты не изменились.

Основные отличия

1. Изменение целевого объекта: Object.assign изменяет целевой объект, тогда как spread-оператор создает новый объект.
2. Работа с вложенными объектами: Spread-оператор более удобен для работы с вложенными объектами, так как позволяет использовать деструктуризацию.
3. Синтаксическая простота: Spread-оператор часто более лаконичен и читаем.

Пример с вложенными объектами

const nestedSource = { a: { b: 1 } };
​
const resultAssign = Object.assign({}, nestedSource);
resultAssign.a.b = 2;
​
console.log(nestedSource.a.b); // 2
​
const resultSpread = { ...nestedSource, a: { ...nestedSource.a } };
resultSpread.a.b = 3;
​
console.log(nestedSource.a.b); // 2

• Object.assign создает поверхностную копию, поэтому изменение вложенного объекта в resultAssign также изменяет nestedSource.
• Spread-оператор с деструктуризацией { ...nestedSource, a: { ...nestedSource.a } } создает глубокую копию для вложенного объекта a, поэтому изменение resultSpread.a.b не влияет на nestedSource.a.b.