Поверхневе копіювання проти глибокого копіювання в JavaScript

JavaScript обробляє копіювання двома способами залежно від типу даних.

Примітивні значення (копіювання за значенням)

Примітивні типи включають рядки, числа, булеві значення, символи, bigInt та null. Коли ви копіюєте примітив, JavaScript створює нову незалежну версію в пам'яті.

Приклад:

let a = 10;
let b = a;
b = 20;

Результат: a залишається 10.

Непримітивні значення (копіювання за посиланням)

Об'єкти та масиви працюють інакше. Вони використовують посилання. Коли ви копіюєте об'єкт, ви копіюєте лише вказівник на його місце розташування в пам'яті.

Приклад:

let original = { name: "YOO" };
let copy = original;
copy.name = "NEW";

Результат: original.name тепер "NEW".

Різниця: Поверхневе проти глибокого

Поверхневе копіювання копіює лише верхній рівень об'єкта. Якщо об'єкт має вкладені об'єкти, він все одно посилається на оригінальні вкладені посилання. Глибоке копіювання створює повністю новий об'єкт з усіма новими значеннями.

Уявіть це на прикладі піци:

  • Поверхневе копіювання: Ви з другом ділите одну піцу. Якщо ваш друг з'їсть шматочок, піца стане меншою і для вас також.
  • Глибоке копіювання: У кожного з вас є власна окрема піца. Якщо ваш друг з'їсть шматочок, ваша піца залишиться незмінною.

Метод поверхневого копіювання

Ви можете використовувати оператор розгортання (...) для створення поверхневої копії.

let original = { name: "YOO", details: { age: 22 } };
let copy = { ...original };

Попередження: Якщо ви зміните original.details.age, copy.details.age також зміниться. Це пастка поверхневого копіювання.

Методи глибокого копіювання

1. structuredClone()

Це вбудована функція в сучасних браузерах та Node.js. Вона ідеально обробляє вкладені структури.

Переваги:

  • Швидка та нативна.
  • Обробляє Date, RegExp та Map.

Недоліки:

  • Не працює, якщо об'єкт містить функції або DOM-вузли.

2. JSON.parse(JSON.stringify())

Це старий трюк, коли ви перетворюєте об'єкт на рядок, а потім назад на об'єкт.

Чому цього варто уникати:

  • Вона втрачає такі дані, як undefined, Map, Set або Infinity.
  • Вона може пошкодити певні значення.

Джерело: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5