JavaScript - 불변성을 유지하려면 어떻게 해야 하는가?

불변성을 유지하려면 어떻게 해야하는지?

불변성이란?

객체가 생성된 이후 그 상태를 변경할 수 없는 것을 의미

상태를 변경할 수 없다는 것은, 객체의 프로퍼티를 변경할 수 없다는 것을 의미

원시값

Number, String, Boolean, Null, Undefined 등과 같은 기본 자료형, 불변함
메모리영역 안에서 변경이 불가능하며, 변수에 할당할 때 새로운 값이 만들어져 주소값이 재할당된다는 의미
=> 복사를 한 뒤 값을 변경하더라도 기존 값에 전혀 영향을 주지 않음

참조값

메모리에 저장되는 객체
원시값을 제외한 모든 값은 객체이며, 변할 수 있음
=> 새로운 값을 만들지 않고 메모리 영역 안에서 직접 변경이 가능하다는 의미
변수에는 객체가 그대로 저장되는 것이 아니라, 객체가 저장되는 메모리 주소인 객체에 대한 참조 값이 저장됨
=> 복사를 한 뒤 내부의 값을 변경할 경우 기존의 값에 영향을 줌

기존 객체에 영향을 주지 않으면서 새로운 곳에 객체를 복사하고 싶을 때 어떻게 해야 하는가?

객체를 불변 객체로 만들고, 객체의 변경이 필요한 경우에는 레퍼런스를 참조하는 것이 아는 복사를 통해 새로운 객체를 생성한 후 변경하여 사용해야 함

Object.assign(얕은 복사)

하나 이상의 소스 객체로부터 대상 객체로 속성을 복사하는 데 사용

const newObj = Object.assign({}, obj);

Spread 연산자(얕은 복사)

배열이나 객체를 확장하여 새로운 배열이나 객체를 만들 때 사용

const newObj = { ...obj };

JSON.parse(JSON.stringify(obj))(깊은 복사)

JSON을 이용하여 객체를 문자열로 변환하고 다시 파싱함으로써 깊은 복사를 수행
함수나 정규표현식과 같은 특수한 타입들을 복사하지 못함

const newObj = JSON.parse(JSON.stringify(obj));

Lodash의 clonedeep(깊은 복사)

const newObj = _.cloneDeep(obj);