[Javascript] 얕은 복사(Shallow copy), 깊은 복사(Deep copy)

먼저 Javascript의 자료형은 두 가지로 구분된다.

Javascript 자료형의 구분

1. 원시값
   • Number, String, Bullean, Null, Undefined
2. 참조값
   • Object, Array

변수를 통한 복사, 대입 시 원시 값은 값을 복사하고 참조 값은 위치를 복사한다.

 

• 숫자 변수 복사시 값이 복사되어 apple과 grape가 각각 다른 메모리 위치에 복사되어 apple의 값 변경 시 grape에 영향을 주지 않음
• 배열 변수 복사시 위치가 복사되어 test1에 값 추가 시 test2의 값도 변경된 것 과 같은 의미
• 배열과 객체 변수를 대입/복사하는 경우에는 참조값(메모리 위치)가 대입되거나 복사됨, 이를 방지하기 위해 얕은 복사와 깊은 복사 방법이 있음

 

얕은 복사(Shallow copy) 

• Object.assign 메소드를 이용한 얕은 복사

 

• 전개연산자를 이용한 얕은 복사

얕은 복사(Shallow copy)는 해당 객체 또는 배열은 새로운 메모리로 복사가 되어 두 변수가 같지 않다는 결과를 출력한다. 하지만 객체 내부에 참조형 변수는 주소만 복사 되기 때문에
user에 push한 "javascript"는 copyUser에 stack 배열에도 추가된다.

 

깊은 복사(Deep copy) 

• 깊은 복사는 내부에 또 다른 참조형 변수가 있는 경우에도 참조값을 복사하지 않고 원시 값을 복사하여 각각 독립된 변수로 만든다.

• 위 예제를 보면 lodash라이브러리의 cloneDeep 메소드를 활용하여 깊은 복사를 했다.
• copyUser에 stack 배열에는 "javascript"가 추가되지 않은 것을 확인할 수 있다.

lodash 라이브러리 document

cloneDeep메소드는 변수 복사시 재귀적인 방법으로 내부에 변수들도 원시값을 복사하는 메소드이다.