Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트에서 객체 수정을 방지하는 3가지 방법

ECMAScript 5는 객체의 수정을 방지할 수 있는 여러 가지 메서드를 도입했습니다. 이러한 예방 조치를 사용하면 실수든 의도든 누구도 객체의 기능을 변경할 수 없도록 보장할 수 있습니다.

객체 수정을 막는 3가지 수준의 메서드

1) 확장 금지 — Object.preventExtensions()

이 단계에서는 새로운 속성이나 메서드를 추가할 수 없지만, 기존 속성이나 메서드에는 접근할 수 있습니다. 또한 해당 객체를 삭제하는 것도 가능합니다. Object.preventExtensions() 메서드가 이 작업을 수행하며, 객체에 새로운 속성이 추가되는 것을 영원히 차단합니다.

예제

<html>
<body>
<script>
   var object1 = {
      prop1: 1
   };
   Object.preventExtensions(object1);
   delete object1.prop1 // 값이 삭제됨
   try {
      Object.defineProperty(object1, 'prop2', {
      value: 2
   });
   } catch (err) {
   document.write(err);
   }
   document.write("</br>");
   document.write(object1.prop1);
</script>
</body>
</html>

출력 결과

TypeError: Cannot define property prop2, object is not extensible
undefined // 삭제되었으므로 undefined

2) 봉인 — Object.seal()

봉인(Seal)은 확장 금지와 동일한 기능에 더해, 기존 속성이나 메서드의 삭제까지 허용하지 않습니다. 다만 속성 값 자체의 변경은 여전히 가능합니다. 이 작업에는 Object.seal() 메서드가 사용됩니다.

예제

<html>
<body>
<script>
    var object1 = {
       prop1: 1
    };
    Object.seal(object1);
    object1.prop1 = 2;                 // 값이 변경됨
    delete object1.prop1;
    try {
       Object.defineProperty(object1, 'prop2', {
       value: 2
    });
    } catch (err) {
       document.write(err);
    }
    document.write("</br>");
    document.write(object1.prop1); // 봉인되어 있어 값이 2로 출력됨
</script>
</body>
</html>

출력 결과

TypeError: Cannot define property prop2, object is not extensible
2 // 봉인(seal) 때문에 값은 삭제할 수 없지만 갱신은 가능함

3) 동결 — Object.freeze()

동결(Freeze)은 봉인의 모든 기능에 더해, 기존 속성에 대한 접근조차 허용하지 않습니다. 즉, 값을 읽을 수는 있지만 수정이나 삭제는 완전히 차단됩니다. 객체를 동결할 때는 Object.freeze() 메서드를 사용하며, 이를 통해 객체를 변경 불가능(immutable)한 상태로 만들 수 있습니다.

예제

<html>
<body>
<script>
    var object1 = {
       prop1: 1
    };
    Object.freeze(object1);
    object1.prop1 = 2;             // 값 갱신 시도
    delete object1.prop1;          // 값 삭제 시도
    try {
       Object.defineProperty(object1, 'prop2', {
       value: 2
    });
    } catch (err) {
       document.write(err);
    }
    document.write("</br>");
    document.write(object1.prop1); // 값이 2로 갱신되었음에도 1이 출력됨
</script>
</body>
</html>

출력 결과

TypeError: Cannot define property prop2, object is not extensible
1 // 동결(freeze) 상태에서는 값이 삭제되거나 갱신되지 않음

정리

세 가지 메서드의 제한 수준을 요약하면 다음과 같습니다.

  • Object.preventExtensions(): 새 속성 추가 불가, 기존 속성 읽기·쓰기·삭제 가능
  • Object.seal(): 새 속성 추가 및 기존 속성 삭제 불가, 값 변경은 가능
  • Object.freeze(): 추가·삭제·변경 모두 불가, 완전히 변경 불가능한 객체 생성

각 메서드의 적용 여부는 Object.isExtensible(), Object.isSealed(), Object.isFrozen() 메서드로 확인할 수 있으므로, 필요에 따라 적절한 수준의 보호를 선택해 사용하면 됩니다.