Object.freeze

그니·2023년 8월 9일
0
post-thumbnail

설명

const obj = {
  prop: 42,
};

Object.freeze(obj);

obj.prop = 33;
// strict mode 에서 오류를 발생시킵니다.

console.log(obj.prop);
// Expected output: 42
  • Object.freeze() 메서드는 객체를 동결한다.
  • Object.freeze(obj: 동결할 객체.) -> 함수로 전달된 객체

동결

  • 새로운 속성 추가 X
  • 존재하는 속성을 제거 X
  • 존재하는 속성의 불변성, 설정 가능성(configurability), 작성 가능성 변경 X
  • prototype 변경 X
  • freeze() 는 함수에 전달한 객체를 그대로 반환하며, 동결된 객체 사본을 생성 X

얕은 동결

obj = {
  internal: {},
};

Object.freeze(obj);
obj.internal.a = "aValue";

obj.internal.a; // 'aValue'
  • 변경될 수 없는 객체가 되려면, 모든 참조 그래프(다른 객체로의 직간접적 참조)가 오로지 불변의 동결 객체만을 참조해야 함.
  • Object.freeze(object) 호출의 결과는 object 스스로의 직속 속성에만 적용됨.
  • 속성의 값이 객체라면, 그 객체는 동결되지 않음.

불변하게 만드려면

  • 각 객체 타입의 속성을 재귀적으로 동결해야함(깊은 동결).
  • 객체가 참조 그래프에서 순환을 포함하지 않는다는 것을 인지 -> 디자인을 기반으로 상황에 따라 패턴을 적용 -> 그렇지 않을 경우 반복문이 무한히 실행될 수 있음.
function deepFreeze(object) {
  // 객체에 정의된 속성명을 추출
  var propNames = Object.getOwnPropertyNames(object);

  // 스스로를 동결하기 전에 속성을 동결

  for (let name of propNames) {
    let value = object[name];

    object[name] =
      value && typeof value === "object" ? deepFreeze(value) : value;
  }

  return Object.freeze(object);
}

기타

  • ES5에서는, 이 메소드에 대한 인자가 객체(원시형)가 아닐 경우, TypeError 발생.
  • ES2015에서는, 비객체 인자가 동결된 평범한 객체인것처럼 다루어져 반환됨.
> Object.freeze(1)
TypeError: 1 is not an object // ES5 code

> Object.freeze(1)
1     

Object.seal()과의 비교

  • Object.seal()을 사용해 봉인된 객체는 존재하는 속성을 변경할 수 있음.

2개의 댓글

comment-user-thumbnail
2023년 8월 9일

정보 감사합니다.

1개의 답글