JS. 29 Shallow, Deep Copy

얕은 복사

: 객체의 참조값(주소값)을 복사하는 것
: 복사 시 변수가 객체의 참조를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 기리킴
: 기존 객체를 저장한 변수에 영향을 끼침
전개 연산자 통한 얕은 복사


전개 연산자를 통한 얕은 복사시 원본 aArray에서는 영향이 끼치지 않는다.
Object.assign() 통한 얕은 복사


Object.assign()로 객체를 복사해도 b배열과 c배열을 비교해보면 false 반환한다.
중첩 배열, 객체


여기서 중요한 것은 dArray배열 4번째 인덱스에 8을 넣었는데, cArray배열에도 8이 추가된 것을 확인
-> 이는 객체의 참조를 가리키기 때문에 원래의 배열에도 영향
얕은 동결
Object.freeze()
: 객체를 동결. 동결된 객체는 더 이상 변경될 수 없다.
: 존재하는 속성의 값이 변경되는 것을 방지


aObject중 a 속성의 값을 "c"로 변경하려고 해도 동결된 상태이기에 변하지 않는 것을 확인


하지만 객체 내 객체에 대한 속성 값 변경 시 이 값은 변경된다.
=> 얕은 동결도 마찬가지로 중첩된 구조에 올바른 역할 수행 못한다.
깊은 복사
: 실제 값을 복사하는 것
: 원시값을 복사시 그 값은 또 다른 독립적인 메모리 공간에 할당하기에 복사 후 값 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않음


JSON 형태로 다른 메모리 공간에 할당된 newAObject는 aObject내 cObject의 a값을 변경해도 영향을 받지 않는 것을 확인


전개 연산자를 통한 깊은 복사한 경우 동일하게 본 객체에 대한 값은 변하지 않는 것을 확인
lodash 라이브러리 이용한 깊은 복사

해당 url에서 스크립트 주소를 통해 라이브러리 연동

_.cloneDeep() 함수로 깊은 복사