[자바스크립트] 얕은 복사, 깊은 복사

얕은 복사

 

• 설명
  • 원본 객체의 참조를 복사하는 것
  • 복사된 객체와 원본 객체가 같은 메모리를 공유
  • 한 객체를 수정하면 다른 객체도 영향 받는다.
  • Object.assign(), 전개 구문( ... )을 사용하여 구현 가능
• 사용하는 경우
  • 객체의 크기가 복사할 필요가 없는 속성이 많을 때
  • 메모리를 절약하고자 할 때
  • 객체의 구조가 단순하고 얕은 레벨의 중첩 구조를 가지고 있을 때
• 예시

let original = { name: 'John', age: 25 };
let copy = Object.assign({}, original);

console.log(copy);  // { name: 'John', age: 25 }

copy.name = 'Jane';

console.log(original);  // { name: 'John', age: 25 }
console.log(copy);  // { name: 'Jane', age: 25 }

 

 

깊은 복사

 

• 설명
  • 원본 객체의 모든 값을 새로운 메모리 공간에 복사
  • 복사된 객체와 원본 객체는 완전히 독립된 객체
  • 한 객체를 수정해도 다른 객체에는 영향을 주지 않는다.
  • JSON.parse(), JSON.stringify(), 외부 라이브러리인 lodash의 cloneDeep()을 사용하여 구현 가능
• 사용하는 경우
  • 객체의 구조가 복잡하고 깊은 레벨의 중첩 구조를 가지고 있을 때
  • 원본 객체와 복사된 객체가 독립적으로 존재해야 할 때
• 예시

let original = { name: 'John', age: 25 };
let copy = JSON.parse(JSON.stringify(original));

console.log(copy);  // { name: 'John', age: 25 }

copy.name = 'Jane';

console.log(original);  // { name: 'John', age: 25 }
console.log(copy);  // { name: 'Jane', age: 25 }

 

 

복사 방법 선택 시 고려해야 할 사항

 

• 객체의 구조
  • 복사하려는 객체의 구조가 얼마나 복잡한지 고려
  • 중첩된 객체나 배열이 많은 경우 깊은 복사가 적합할 수 있다.
• 중첩 객체의 관리
  • 객체 안 중첩된 객체가 있는 경우
  • 얕은 복사를 사용하면 중접된 객체들이 참조로 공유되므로 한 객체를 수정하면 다른 객체에도 영향 가능
  • 이러한 경우 깊은 복사를 고려
• 성능 요구사항
  • 복사 과정에서 메모리 사용량과 실행 시간에 대한 성능 요구사항을 고려
  • 얕은 복사는 메모리를 공유하기 때문에 시간과 메모리를 소비가 적음
  • 깊은 복사는 모든 값을 복사하기 때문에 메모리 사용량과 실행 시간이 더 소요 될 수 있음
• 참조 관리
  • 복사된 객체와 원본객체가 독립적으로 존재해야 하는지 여부를 고려
  • 얕은 복사는 원본 객체와 복사된 객체가 참조로 연결
  • 깊은 복사는 서로 완전히 독립된 객체
• 외부 라이브러리 사용 여부
  • 깊은 복사를 구현하기 위해 외부 라이브러리 사용 가능
  • lodash의 cloneDeep() 함수 사용 시, 편리한 깊은 복사 가능
  • 해당 라이브러리의 종속성과 성능 등을 고려
• 객체의 크기
  • 복사할 객체의 크기가 어느 정도인지 고려
  • 큰 객체를 복사할 때 메모리 사용량과 실행 시간이 중요한 요소