В чём разница между поверхностным (shallow) и глубоким (deep) копированием объектов и массивов в JavaScript?

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

Поверхностное копирование (shallow copy) создает новый объект или массив, но копирует только ссылки на вложенные объекты, а не сами объекты. Глубокое копирование (deep copy) создает новый объект или массив и рекурсивно копирует все вложенные объекты, создавая их независимые копии.

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

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

Поверхностное копирование (Shallow Copy):

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

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

const originalArray = [1, 2, { a: 3 }];
const shallowCopy = [...originalArray];
​
// Изменение вложенного объекта в оригинальном массиве
originalArray[2].a = 4;
​
console.log(shallowCopy[2].a); // Выведет 4, так как копируется ссылка на объект

• originalArray — это массив, содержащий числа и объект.
• shallowCopy создается с помощью оператора распространения ..., который копирует только верхний уровень.
• Изменение свойства a в объекте внутри originalArray также изменяет его в shallowCopy, так как это одна и та же ссылка на объект.

Глубокое копирование (Deep Copy):

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

Пример глубокого копирования:

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
​
  if (Array.isArray(obj)) {
    const copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
    return copy;
  }
​
  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}
​
const originalArray = [1, 2, { a: 3 }];
const deepCopyArray = deepCopy(originalArray);
​
// Изменение вложенного объекта в оригинальном массиве
originalArray[2].a = 4;
​
console.log(deepCopyArray[2].a); // Выведет 3, так как это независимая копия

• deepCopy — это функция, которая рекурсивно копирует объекты и массивы.
• Если obj не является объектом или массивом, он возвращается как есть.
• Если obj — это массив, создается новый массив, и каждый элемент копируется рекурсивно.
• Если obj — это объект, создается новый объект, и каждое свойство копируется рекурсивно.
• Изменение свойства a в объекте внутри originalArray не влияет на deepCopyArray, так как это независимая копия.

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