얕은 복사와 깊은 복사 shadow copy deep copy

자바스크립트에서 얕은 복사(shallow copy)와 깊은 복사(deep copy)의 차이는 객체의 복사 방식에 있습니다.

1. 얕은 복사(shallow copy):
   얕은 복사는 객체의 최상위 레벨만 복제합니다. 이 경우 객체의 내부에 중첩 된 객체나 배열 등이 있을 때, 참조 값만 복사됩니다. 즉, 원본 객체와 복사본 객체가 동일한 중첩된 요소를 참조하고 있어 서로 변화에 영향을 받습니다.

얕은 복사를 수행할 때 사용하는 대표적인 방법:

• Object.assign() 메서드
• 스프레드 연산자(...)

예시:

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

const shallowCopy = {...originalObject};
shallowCopy.b.c = 3;

console.log(originalObject.b.c); // 출력: 3 (복사본 객체에서 값을 변경했기 때문에 원본 객체도 영향을 받았습니다.)

2. 깊은 복사(deep copy):
   깊은 복사는 객체의 모든 레벨을 복제합니다. 중첩 된 객체나 배열 등이 있더라도 값 자체를 새로운 객체 또는 배열에 복제합니다. 이렇게 되면 원본 객체와 복사본 객체가 서로 독립적이므로 원본 객체에 변경이 생겨도 복사본 객체에 영향을 미치지 않습니다.

깊은 복사를 수행할 때 사용하는 대표적인 방법:

• JSON.parse(), JSON.stringify() 사용 (주의: 함수, symbol 등 일부 값은 제대로 복사되지 않습니다.)
• 외부 라이브러리 사용 (예: lodash의 cloneDeep() 함수)

예시:

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

const deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.b.c = 3;

console.log(originalObject.b.c); // 출력: 2 (깊은 복사된 객체에서 값을 변경해도 원본 객체에 영향을 미치지 않습니다.)

결론적으로 얕은 복사는 객체의 최상위 레벨만 복제하고 원본 객체에 영향을 미칠 수 있으며, 깊은 복사는 모든 레벨을 복제하여 원본 객체와 복사본 객체가 완전히 독립적입니다. 상황에 따라 올바른 복사 방법을 선택하여 사용하세요.