[JS] '얕은 복사 / 깊은 복사' 제대로 알고 쓰자

위험하게 아직도 데이터를 그대로 가져다가 쓰니?
데이터를 불변성있게 사용하는 법을 알아보도록 하자

서론

위에 있는 말은 나한테 하는 것이다...
데이터를 그대로 가져다가 쓰는데에 익숙한 내가 최근에 '함수형 프로그래밍'을 조금씩 공부하면서 데이터를 복사해서 쓰면 안전하게 다루기 좋다고 생각했다.
그래서 최근에 적용해봤지만 '얕은 복사'와 '깊은 복사'의 차이도 잘 모르고 썼고 내가 의도한대로 다루지 못한다는 사실에 큰 충격을 받았다.

본론

(자바스크립트로 설명합니다)

얕은 복사

-> 복사본은 원본의 메모리 주소를 복사해서 같은 값을 참조한다
-> 복사본의 값을 변경시 원본 메모리가 아닌 새로운 메모리의 값을 가리킨다

1. 배열

• Spread 연산자 (...)
• map(), filter(), reduce(), from(), slice()

const original = ['a','b','c'];
const copy = original.slice(); // ['a','b','c'];

console.log(original===copy); // false (배열 자체는 다름)
console.log(original[0]===copy[0]); // true (참조 값이 같음)

2. 객체

• Object.assign()

const original = {a:1,b:2,c:3};
const copy = Object.assign({},original) ;

console.log(original === copy); // false
console.log(original.a === copy.a); // true

copy.a = 0	// 복사본 수정시 원본과 다른 메모리 주소 참조
console.log(original.a === copy.a); // false (1, 0)

깊은 복사

1. Lodash : _.cloneDeep()
2. JSON.parse(JSON.stringify())

const original = [1,2,3,{a:1,b:2,c:3}];
const copy = JSON.parse(JSON.stringify(original));

결론

난 '얕은 복사'를 '깊은 복사'로 착각하고 데이터를 변경해도 서로 참조가 안될거라고 생각했었다.
데이터 변경이 필요한 범위에서만 원본 데이터를 '얕은 복사'해서 데이터를 변경하도록 했다.

참고 사이트 & 도서

https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy
https://developer-talk.tistory.com/325
<쏙쏙들어오는 함수형 코딩> 책