수업 중 잘못알고 있던 내용이 있어서 글을 써본다.
정확한 자료가 없기에 고민한 내용을 글로 남겨보려한다.
• 깊은 복사 vs 얕은복사 ??
object의 스프레드 문법을 살피다 글 하나를 만나게 되었다.
복사된 객체의 프로퍼티 값을 변경하였을 때 원본값이 변하지 않으니 깊은 복사이고,
다만 복사된 프로퍼티 값이 객체일때는 참조값을 원본과 공유하니, 얕은복사라는 내용이었다.
그렇다면 스프레드 된 객체는 얕은 복사인걸까? 깊은복사가 된 것일까?
⭐ 얕은 복사 => 1차원 복사 ⭐
결론부터 말하면 얕은복사는 1차원 복사이다.
자바스크립트의 객체(object)는 모든 값을 가질 수 있기 때문에 그 안에 배열이 올수도 객체가 올 수도 있다. 그러다보면 깊이(depth)값이 커진다.
만약 프로퍼티의 값으로 주어진, 객체 내 프로퍼티 값까지(얼마든지 더 깊어질수 있다) 모두 다른 참조 값을 갖도록 복사를 하면 용량이 너무 커질 수 있다. 그래서 자바스크립트는 기본적으로 1차원 복사 즉 얕은 복사를 하도록 기본적으로 설계되어있다. 우리도 효율적인 메모리 활용을 위하여 얕은 복사를 하고, 꼭 필요한 경우에만 깊은 복사를 행하여야 한다.
반대로 깊은복사는 depth를 모두 거치며, 모든 내부 요소들이 다른 참조값을 갖도록 하는 것이다.
깊은 복사를 하고 싶다면 lodash 라이브러리의 -.cloneDeep() 함수로 간단하게 구현할수있다.
newObj = _.cloneDeep(obj);
순수 자바스크립트에서 lodash라이브러리를 적용하고 싶다면
https://cdnjs.com/libraries/lodash.js 에서 코드를 복사하여 스크립트에 추가하면 사용할수 있다.
