Object.seal()과 Object.freeze()의 핵심적인 차이점은 객체 속성의 값 변경 가능 여부에 있습니다. Object.seal()은 기존 속성의 삭제는 막아주지만, 속성 값의 수정은 허용합니다. 반면 Object.freeze()는 객체를 어떠한 변경으로부터도 완전히 보호(immunity)하여, 아주 사소한 수정조차 불가능하게 만듭니다.
Object.seal()
Object.seal() 메서드는 기존 속성의 삭제를 금지하지만, 외부에서 속성 값을 변경하는 것까지는 보호해 주지 못합니다. 즉, 새로운 속성 추가와 기존 속성 삭제는 차단되지만, 이미 존재하는 속성의 값은 자유롭게 수정할 수 있습니다.
예제
다음 예제에서는 Object.seal() 메서드가 적용된 객체에 대해 delete 연산자로 속성 "prop1"을 삭제하려고 시도합니다. 하지만 seal 처리된 객체이기 때문에 속성은 삭제되지 않으며, 앞서 할당한 값 2가 그대로 유지됩니다.
<html>
<body>
<script>
var object1 = {
prop1: 1
};
Object.seal(object1);
object1.prop1 = 2; // 값이 2로 변경됨
delete object1.prop1; // seal 때문에 삭제되지 않음
document.write(object1.prop1); // seal 덕분에 값 2가 출력됨
</script>
</body>
</html>실행 결과
2
Object.freeze()
Object.freeze() 메서드는 Object.seal()의 모든 기능을 포함할 뿐만 아니라, 한 단계 더 나아가 기존 속성의 값 변경까지 완전히 차단합니다. 즉, 속성의 추가·삭제·수정 중 어떤 작업도 수행할 수 없습니다.
예제
아래 예제에서는 freeze 처리된 객체의 속성 값을 2로 변경하고 삭제를 시도하지만, 두 작업 모두 무시됩니다. 따라서 화면에는 초기값인 1이 그대로 출력됩니다.
<html>
<body>
<script>
var object1 = {
prop1: 1
};
Object.freeze(object1);
object1.prop1 = 2; // 값 변경 시도, 무시됨
delete object1.prop1; // 삭제 시도, 무시됨
document.write(object1.prop1); // 값이 2로 바뀌었어도 1이 출력됨
</script>
</body>
</html>실행 결과
1
정리: 언제 무엇을 사용해야 할까?
| 구분 | Object.seal() | Object.freeze() |
|---|---|---|
| 속성 추가 | 불가능 | 불가능 |
| 속성 삭제 | 불가능 | 불가능 |
| 속성 값 변경 | 가능 | 불가능 |
객체 구조(속성의 추가·삭제)만 고정하고 값의 유연한 변경이 필요하다면 Object.seal()을, 객체 전체를 읽기 전용처럼 완전히 고정해야 한다면 Object.freeze()를 사용하는 것이 적절합니다.