[Javascript] 얕은 복사와 깊은 복사

자바스크립트의 얕은 복사(shallow Copy)와 깊은 복사(deep copy)에 대해 이해 하기 위해서는

자바스크립트의 원시타입과 객체 타입에 대해 이해해야한다.(이전글 참고)

 

원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다.

그러나 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.

 

 

객체를 복사 할 경우에는 참조값을 복사하기 때문에 얕은 복사가 일어난다.

 

얕은복사(shallow Copy)

• 객체를 복사 할 때, 해당 객체만 복사하여 새 객체를 생성한다.
• 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조하며, 해당 메모리 주소의 값이 변경되면 다른 객체의 변수 값 역시 동일하게 변경된다.
• 원본 객체는 하나인 상태에서, 참조 값만 복사한다. 

깊은복사(deep Copy)

• 객체를 복사할 때 해당 객체와 인스턴스 변수까지 복사한다.
• 데이터 참조가 아닌 객체의 형태를 그대로 복사함으로써 한 객체가 변경되어도 다른 객체의 데이터에는 영향을 주지 않는다.
• 원시 값처럼 완전한 복사본을 만든다. 깊은 복사는 lodash의 cloneDeep을 사용해서 수행 가능하다.