[JavaScript] 객체를 불변하게 만드는 Object.freeze()

Object.freeze

• Object.freeze() 메서드는 객체를 동결한다.
• 동결된 객체는 더 이상 변경될 수 없다.

How to Use

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

• Object.freeze 에 얼릴 객체 대상을 넣어준다.

Other examples

var o1 = {
    name: 'kim',
    score: [1, 2]
}
o1.name = 'lee';
console.log(o1);

• Object.freeze 를 사용하지 않을 경우 kim 에서 lee로 변하는 것을 확인할 수 있다. 여기서 freeze를 사용하면 불변(immutability) 하게 바꿔줄 수 있다.

var o1 = {
    name: 'kim',
    score: [1, 2]
}
Object.freeze(o1);
o1.name = 'lee';
console.log(o1);

• lee 로 변하지 않고, kim 이 그대로 유지 되는 모습을 볼 수 있다.

Notice!

• freeze를 푸는 명령어도 제공하지 않는다. 한번 얼려진 것을 해동하는 공식적인 방법은 존재하지 않는다. 복제하는 방법이 있긴 하지만 .. freeze라고 하는 것은 객체의 프로퍼티를 얼리는 것이다. 없던 프로퍼티를 추가해보자. 프로퍼티의 값이 객체라고 하면 그것을 규제할 수 없다.

o1.city = 'seoul';

→ 에러 발생

o1.score.push(3);

→ push는 또 된다. 이 객체는 다른 곳에 저장되어있고, 프로퍼티에는 래퍼런스만 저장되어 있기 때문이다. 그렇다면 그 객체까지 얼려야 한다.

Object.freeze(o1.score);

→ 위 명령어를 실행하면 에러가 발생한다. 해당 객체까지 얼렸기 때문이다.

C:\Users\yuri\Desktop\TEST\freeze-study\freeze-study.js:9
o1.score.push(3);
         ^

TypeError: Cannot add property 2, object is not extensible
    at Array.push (<anonymous>)
    at Object.<anonymous> (C:\Users\yuri\Desktop\TEST\freeze-study\freeze-study.js:9:10)

object.freeze와 const의 차이점

• freeze 는 값 자체를 못바꾸게 하는 것이고, const는 이름이 가리키는 값을 다른 것으로 바꾸지 못하게 하는 것이다.
• 이 두개를 병행해서 사용하여 훨씬 더 강력하게 이뮤터블해야 할 값을 강력하게 규제할 수 있다.

const o1 = {
    name: 'kim'
}
Object.freeze(o1);
const o2 = {
    name: 'lee'
}
o1 = o2;

PS C:\Users\yuri\Desktop\TEST\freeze-study> node .\freez_const.js
C:\Users\yuri\Desktop\TEST\freeze-study\freez_const.js:8
o1 = o2;
   ^

TypeError: Assignment to constant variable.
    at Object.<anonymous> (C:\Users\yuri\Desktop\TEST\freeze-study\freez_const.js:8:4) 
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

→ 위 코드를 실행 시 다음의 오류가 발생한다. const 때문에 발생한 오류이다. 만약 키워드 변수가 const 가 아닌 var 이라면 문제가 발생하지 않았을 것이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze
https://opentutorials.org/module/4075/24884