🔎 자바스크립트의 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

자료형에 따라서 복사하는 값이 다르다. 자바스크립트의 자료형은 아래 게시글에 정리되어있다.
자바스크립트 데이터타입
얕은 복사는 객체의 메모리 주소 값을 복사하고, 깊은 복사는 새로운 메모리 공간을 확보하여 객체의 실제 값을 복사하는 것을 의미한다.

---

✨ 얕은 복사(Shallow Copy)

　얕은 복사는 객체를 복사할 때 기존 값과 복사된 값이 같은 참조 주소를 가리키고 있는 것이다. 객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 얕은 복사이다.
자바스크립트에서는 Object.assign() 메서드나 전개 연산자(...)를 사용하여 얕은 복사를 수행할 수 있다.

let originalObject = {
    a: 1,
    b: {
        c: 2
    }
};

let shallowCopyObject = Object.assign({}, originalObject);

console.log(originalObject.b === shallowCopyObject.b); // true

✨ 깊은 복사(Deep Copy)

아래 코드는 참조 주소를 복사하는 것이 아닌 실제 값만 복사되는 경우이다. 원시 타입(변수)은 깊은 복사가 가능하다.

const a = 1;
const b = a;

b = 2;

console.log(a); // 1
console.log(b); // 2
console.log(a === b); // false

✨ (참조형의)깊은 복사(Deep Copy)

　깊은 복사는 복사된 객체가 원본과 다른 주소에 담기고, 객체 내부의 값만 복사된다. 전부 복사하여 새로운 주소에 담는 형식이기 때문에 참조를 공유하지 않는다.

1) JSON.parse(JSON.stringify(obj))와 JSON.stringify()

　자바스크립트 객체를 깊은 복사하기 위한 간단한 방법이다. 이 방법은 객체를 문자열로 변환한 후 다시 원래의 형태로 파싱하여 새로운 객체를 생성한다. 하지만 함수나 심볼과 같은 특수한 타입의 속성은 복사되지 않으며 순환 참조가 있는 객체의 경우 무한 루프에 빠질 수 있다.

let originalObject = {
   a: 1,
   b: {
       c: 2
   }
};

let deepCopyObject = JSON.parse(JSON.stringify(originalObject));

2) 재귀 함수 활용

　재귀 함수를 사용하여 객체의 모든 속성을 순회하고 복사하는 방법이다. 이 방법은 각 속성을 순회하면서 해당 속성이 객체나 배열인 경우에는 재귀적으로 복사를 수행한다.

function deepCopy(obj) {
   if (obj === null || typeof obj !== 'object') {
       return obj;
   }
   
   let copy = Array.isArray(obj) ? [] : {};
   
   for (let key in obj) {
       if (obj.hasOwnProperty(key)) {
           copy[key] = deepCopy(obj[key]);
       }
   }
   
   return copy;
}

let originalObject = {
   a: 1,
   b: {
       c: 2
   }
};

let deepCopyObject = deepCopy(originalObject);

3) 외부 라이브러리(Lodash의 _.cloneDeep())

　Lodash는 자바스크립트 유틸리티 라이브러리로, 다양한 기능을 제공한다. 그 중에는 깊은 복사를 수행하는 함수인 _.cloneDeep()도 포함되어 있다. 이 함수는 내부적으로 재귀적으로 객체의 모든 속성을 복사하며, JSON.stringify() 방법과는 달리 함수나 순환 참조에 대해서도 올바르게 처리한다.

const _ = require('lodash');

let originalObject = {
    a: 1,
    b: {
        c: 2
    }
};

let deepCopyObject = _.cloneDeep(originalObject);

console.log(originalObject.b === deepCopyObject.b); // false

---