[자바스크립트] 객체 불변성(Immutability)이 중요한 이유

객체 불변성(Immutability)

객체가 생성된 후에 내부 상태가 변경할 수 없는 디자인 패턴을 의미한다. 즉, 한 번 생성된 객체는 변경되지 않고 그대로 유지된다는 뜻이다.

 

immutable value vs. mutable value

자바스크립트의 원시 타입(primitive data type)은 변경 불가능한 immutable value로, 7가지가 있다.

• boolean
• null
• undefined
• number
• bigint
• string
• symbol

변경이 불가능하다는 것은 메모리 영역에서 변경이 불가능하다는 뜻이며, 재할당은 가능하다.

var str = '가나다'; 
// 메모리에 문자열 '가나다' 생성. 변수 str은 메모리에 생성된 문자열 '가나다'의 메모리를 가리킴

str = '하하하';
// 재할당이 가능하다. 
// 이는 이전에 생성된 '가나다'를 수정하는 것이 아니라, 
// 새로운 문자열 '하하하'를 메모리에 생성하고 str이 이것을 가리키는 것.
// 이때 '가나다'와 '하하하'는 메모리에 동시에 존재.

var alphabet = 'abcde';
var sliced = alphabet.slice(1, 3);

console.log(alphabet); // 'abced'
console.log(sliced); // 'bc'
// 문자열(string)은 immutable하므로,
// slice() 메소드는 alphabet 변수에 저장된 문자열을 변경하지 않고 새로운 문자열을 반환

 

위의 원시 타입들을 제외한 모든 값은 객체(object) 타입이며, 변경 가능한 값(mutable value)이다.

 

var animal1 = {
	name: '토끼',
};

var animal2 = animal1;

animal2.name = '거북이';

console.log(animal1.name); // 거북이
console.log(animal2.name); // 거북이
// 바꾸지 않은 animal1.name 값도 변경됨
// 객체 animal2의 name 프로퍼티의 값을 재할당하면,
// 객체는 mutalble한 값이라 animal2의 값은 변경된다.
// 변경하지 않은 객체 animal1의 값도 바뀌는데,
// 이는 animal1과 animal2가 같은 주소를 참조하고 있기 때문.

 

 

mutable한 객체를 immutable하게 사용하기

const와 Object.freeze를 함께 사용하면 된다. const로 변수를 선언할 경우, 변수의 재할당을 불허하지만 객체의 속성을 변경하는 것은 가능하다. Object.freeze는 객체의 속성을 변경하는 것은 불가능하나, 재할당은 가능하기 때문이다.

const aaa = {name: '강아지'};
Object.freeze(aaa);

 

 

중요한 이유

불변한 객체는 생성된 후에 내부 상태가 변경되지 않으므로 코드의 안정성과 예측 가능성을 높인다. 또한, 상태가 변경되지 않으므로 메모리 할당과 해제를 최적화할 수 있다(성능 개선).

 

React에서도 중요하다. 리액트는 이전 상태와 비교해서 상태가 변경되었을 때에 리렌더링이 일어난다. 객체 형태인 state가 내부 속성값만 변경되고 참조값이 변경되지 않는다면 상태 변경을 감지하지 못하고 리렌더링되지 않게 된다.