생활코딩의 JavaScript Immutability 강의를 정리하여 작성한 내용입니다.

3. 객체를 불변하게 만들기 (Object.freeze)

3-1. Object freeze로 객체를 불변하게 만들기

한 번 freeze된 객체는 freeze를 해제할 수 없다. 굳이 freeze를 해동하려면 원본 객체를 복제하여 다른 변수에 할당하여야 한다.

그런데 역시 JavaScript 답게 freeze도 허술한 구석이 있다. freeze는 객체의 프로퍼티를 얼린다. 정확히는 객체의 프로퍼티의 추가 삭제가 불가하며 primitive 타입의 값을 변경할 수 없다. 즉, 프로퍼티의 값이 객체인 경우 그 객체는 여전히 변경 가능하다. 왜냐하면 객체의 프로퍼티는 프로퍼티에 담긴 값이 객체인 경우 객체 자체가 아니라 객체가 저장된 메모리의 주소를 참조하기 때문이다. 따라서 프로퍼티가 참조하는 메모리 주소의 객체에 직접 접근하여 수정하면 프로퍼티의 값도 바뀐다.

var o1 = { name:'kim', score:[1,2] };
Object.freeze(o1); // 원본 객체를 freeze!

o1.city = 'seoul'; // 원본 객체에 새로운 프로퍼티 추가 시도
o1.name = 'lee'; // 원복 객체의 프로퍼티의 값(primitive 타입)을 수정 시도

// o1을 확인해 보면 위의 시도들이 전부 반영되지 않음을 알 수 있다.
console.log(o1); // {name: 'kim', score [1, 2]

// 하지만 원본 객체의 프로퍼티에 담긴 객체에 직접 접근하여 수정하는 방법은 여전히 가능하다.
o1.score.push(3);
console.log(o1); // {name: 'kim', score [1, 2, 3]

freeze를 이용하여 원본 객체의 프로퍼티의 값이 객체인 경우에도 수정불가능하도록 하려면 프로퍼티까지 freeze해야 한다.

var o1 = { name:'kim', score:[1,2] };
Object.freeze(o1); // 원본 객체를 freeze!
Object.freeze(o1.score); // 원본 객체의 프로퍼티를 freeze!

o1.city = 'seoul'; // 원본 객체에 새로운 프로퍼티 추가 시도
o1.name = 'lee'; // 원복 객체의 프로퍼티의 값(primitive 타입)을 수정 시도

o1.score.push(3); // 원복 객체의 프로퍼티의 값(object 타입)을 수정 시도
// -> 이부분에서 아예 에러가 발생한다!
// Uncaught TypeError: Cannot add property 2, object is not extensible

3-2. const vs object freeze

const는 한 번 값이 할당된 변수에 다른 값을 할당하지 못하도록 한다.

Object.freeze()는 객체의 프로퍼티의 수정을 막는다.

const o1 = {name:'kim'}; // 변수를 const로 선언
const o2 = {name:'lee'};

Object.freeze(o1); // 객체가 담긴 변수 o1을 freeze

o1.name = 'kim'; // freeze에 의해 변경되지 않음
console.log(o1); // {name: "kim"}

o1 = o2; // const에 의해 에러 발생
// Uncaught TypeError: Assignment to constant variable.