깊은 복사와 얕은 복사의 차이는 무엇이고 JS에서 각각을 구현하는 방법은 어떻게 되는지 설명해주실 수 있을까요?

얕은 복사(Shallow Copy): 얕은 복사는 객체를 복사할 때 원본 객체와 복사본 객체가 같은 객체를 참조하는 경우입니다. 복사된 객체는 원본 객체의 하위 요소(프로퍼티 또는 배열 요소)를 참조하게 됩니다. 이것은 복사본 객체가 원본 객체의 변경사항을 공유하게 만듭니다. 얕은 복사는 주로 성능상의 이유로 사용되며, 객체의 최상위 수준만 복사하고 하위 요소는 공유하는 것입니다.

 

깊은 복사(Deep Copy): 깊은 복사는 객체를 복사할 때 원본 객체와 복사본 객체가 서로 독립적인 객체입니다. 복사된 객체는 원본 객체와 완전히 분리되어 있으며, 원본 객체의 변경사항이 복사본 객체에 영향을 미치지 않습니다. 깊은 복사는 데이터의 완벽한 복제를 위해 사용되며, 객체의 모든 수준에서 재귀적으로 복사됩니다.

 

배열의 얕은 복사 예시

const originalArray = [1, 2, [3, 4]];

// 전개 연산자를 사용한 얕은 복사
const shallowCopy = [...originalArray];

// 원본 배열과 얕은 복사 배열을 수정
shallowCopy[0] = 5; // 얕은 복사 배열 수정
shallowCopy[2][0] = 6; // 얕은 복사 배열의 하위 배열 수정

console.log(originalArray); // [1, 2, [6, 4]]
console.log(shallowCopy); // [5, 2, [6, 4]]

얕은 복사에서 배열의 최상위 요소(숫자 1과 2)는 복사되고, 하위 배열([3, 4])은 원본 배열과 공유됩니다. 따라서 얕은 복사 배열에서 하위 배열의 요소를 수정하면 원본 배열에서도 변경사항이 반영됩니다.

 

객체의 얕은 복사 예시

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

// Object.assign()을 사용한 얕은 복사
const shallowCopy = Object.assign({}, originalObject);

// 원본 객체와 얕은 복사 객체를 수정
shallowCopy.a = 3; // 얕은 복사 객체 수정
shallowCopy.b.c = 4; // 얕은 복사 객체의 하위 객체 수정

console.log(originalObject); // { a: 1, b: { c: 4 } }
console.log(shallowCopy); // { a: 3, b: { c: 4 } }

얕은 복사에서 객체의 최상위 프로퍼티(a와 b)는 복사되고, 하위 객체({ c: 2 })는 원본 객체와 공유됩니다. 따라서 얕은 복사 객체에서 하위 객체의 프로퍼티를 수정하면 원본 객체에서도 변경사항이 반영됩니다.

 

얕은 복사는 최상위 수준의 복사만을 수행하므로, 하위 요소가 복사본과 원본을 공유하게 되는 제약이 있습니다.

 

배열의 깊은 복사

function deepCopyArray(arr) {
  return arr.map((item) => {
    if (Array.isArray(item)) {
      return deepCopyArray(item); // 재귀적으로 배열 복사
    } else if (typeof item === 'object' && item !== null) {
      return deepCopyObject(item); // 객체일 경우 객체 복사 함수 호출
    } else {
      return item; // 기본 데이터 유형은 직접 복사
    }
  });
}

const originalArray = [1, 2, [3, 4]];

const deepCopy = deepCopyArray(originalArray);

// 원본 배열과 깊은 복사 배열을 수정
deepCopy[0] = 5; // 깊은 복사 배열 수정
deepCopy[2][0] = 6; // 깊은 복사 배열의 하위 배열 수정

console.log(originalArray); // [1, 2, [3, 4]]
console.log(deepCopy); // [5, 2, [6, 4]]

깊은 복사 함수 deepCopyArray는 배열의 모든 수준에서 재귀적으로 복사를 수행하며, 결과적으로 모든 하위 배열도 복사됩니다. 따라서 깊은 복사 배열에서 하위 배열의 요소를 수정해도 원본 배열에는 영향을 미치지 않습니다.

 

객체의 깊은 복사

function deepCopyObject(obj) {
  const result = {};
  for (const key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      result[key] = deepCopyObject(obj[key]); // 객체일 경우 객체 복사 함수 호출
    } else {
      result[key] = obj[key]; // 기본 데이터 유형은 직접 복사
    }
  }
  return result;
}

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

const deepCopy = deepCopyObject(originalObject);

// 원본 객체와 깊은 복사 객체를 수정
deepCopy.a = 3; // 깊은 복사 객체 수정
deepCopy.b.c = 4; // 깊은 복사 객체의 하위 객체 수정

console.log(originalObject); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 3, b: { c: 4 } }

깊은 복사 함수 deepCopyObject는 객체의 모든 수준에서 재귀적으로 복사를 수행하며, 결과적으로 모든 하위 객체도 복사됩니다. 따라서 깊은 복사 객체에서 하위 객체의 프로퍼티를 수정해도 원본 객체에는 영향을 미치지 않습니다.

 

깊은 복사를 수행할 때 주의할 점은 객체나 배열 안에 순환 참조(자기 자신을 참조하는 경우)가 있는 경우 무한 루프에 빠질 수 있으므로 순환 참조를 검사하는 추가적인 로직이 필요할 수 있습니다.