깊은 복사_Deep Copy vs 얕은 복사_Shallow Copy (JS)

먼저 이 이론을 이해하려면 원시자료형과 참조자료형에 대해서 알고 있는 것이 좋을 것 같아서 제가 전에 정리한 포스팅을 가지고 왔습니다.
원시 자료형_Primitive data type vs 참조 자료형_Reference type(JS)

깊은 복사_Deep Copy

위 포스팅에도 적혀있 듯, 원시값은 복사를 할 때 기존 변수에는 영향을 끼치 않는다.
즉, 실제 값을 복사하는 것을 깊은 복사라고 한다

let a = 33
let b = a

b = 11

console.log(a) // 33
//B의 값이 변했지만 a의 값은 변동 없음
console.log(b) // 11

얕은 복사_Shallow Copy

얕은 복사는 객체의 참조값(주소값)을 복사한다
참조값 복사를 생각하면 되는데, 변수를 복사를 하고 수정하면 기존 변수에 영향을 끼친다 ( 같은 주소값을 가지고 있기 때문에 )

let a = [1,2,3]
let b = a

b[1] = 22

console.log(a) // [1,22,3]
console.log(b) // [1,22,3]
// a와 b의 값이 함께 바뀜

얕은 복사 방법

slice()
assign()
spread()
등 보통 쓰는 매서드 들은 얕은 복사 방법이라고 한다

깊은 복사 방법

JSON.parse & JSON.stringify
JSON.stringify 객체는 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어진다
객체를 json 문자열로 변환 후, JSON.pares를 이용해 자바스크립트 객체(원래 객체)로 만들어 준다

하지만 JSON.stringify 메소드는 function undefined로 처리한다

재귀 함수를 구현한 복사
복잡한 방식이다

Lodash 라이브러리 사용
lodash 모듈의 cloneDeep() 메소드를 이용하면 객체의 깊은 복사가 가능하다
실제로 흔히 쓰이는 방법이며 가장 쉬운 방법이다

설치 방법

& npm i lodash

---

참고
https://bbangson.tistory.com/78

[JavaScript] 깊은 복사, 얕은 복사

https://velog.io/@recordboy/JavaScript-얕은-복사Shallow-Copy와-깊은-복사Deep-Copy#객체의-깊은-복사

[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)