(JS) 객체를 수정금지 상태로 만드는 방법(freeze)

May 18, 2021

const와 object

자바스크립트의 const는 변경이 불가능한 변수를 선언합니다.

하지만 객체(object)의 값은 const로 선언되더라도 수정이 가능합니다.

const a = { name: 'cckn' }
a['name'] = 'someone'

우리가 변경 불가능한 것은 변수에 할당된 객체의 주소값이지 객체 내부의 값들이 아닙니다.(자세한 내용은 JS에서의 값과 참조에 대해 알아보세요.)

그럼 객체의 값을 변경하지 못하도록 보호하고 싶으면 어떻게 해야할까요?

Object.freeze() 함수를 사용하면 객체의 수정을 막을 수 있습니다.

const b = { name: 'cckn' }
Object.freeze(b)
b.name = 'other'

console.log(b) // { name: 'cckn' }

위 예제에서 b라는 객체를 선언 후 freeze했습니다.

그리고 b 내부의 name값을 변경하였습니다.

그리고 b를 출력하였으나 b.name은 변경되지 않았습니다.

우리가 원하던대로 값이 객체 값이 변경되지 않았네요.

위 예제에서는 보호된 객체에 수정이 가해졌으나 아무런 반응없이 넘어가고 있습니다. 이를 조용한 실패라고 합니다.

이는 개발자 입장에서 의도된 것일 수 있지만 아닌 경우 잠재적인 에러를 발생시킬 수 있습니다.

그리고 에러를 발생시키지 않기 때문에 버그를 찾기 매우 어렵습니다.

이럴 때 에러를 발생시키고 싶다면 ‘use strict’ 키워드를 파일 최상단에 넣어주면 됩니다.

객체가 보호 중인지 확인하고 싶다면 Object.isFrozen()을 사용하세요.

const b = { name: 'cckn' }
console.log(Object.isFrozen(b)) // false
Object.freeze(b)
console.log(Object.isFrozen(b)) // true

객체를 보호하는 다른 방법에는 Object.seal()과 Object.preventExtensions()이 있습니다.

각 보호 방법의 차이점은 아래와 같습니다.

독서와 지식관리에 관심이 많은 개발자