객체 변경 방지 하는 법

 

* 프로퍼티 어트리뷰트가 어떤건지 모르면 프로퍼티 어트리뷰트가 뭔지 공부하고 이 글을 보는것이 더 좋을 것 같다.

* Typescript를 사용한다면 as const로 해결 할 수 있다.

객체 변경 방지

const로 정의한 객체는 메모리 주소를 할당하기 때문에, 변화가 가능한 값이다.

 

JS에서는 객체의 변경을 방지하는 다양한 메서드를 제공한다.

구분	메서드	프로퍼티 추가	프로퍼티 삭제	읽기	쓰기	재정의
객체 확장 금지	Object.preventExtensions	x	o	o	o	o
객체 밀봉	Object.seal	x	x	o	o	x
객체 동결	Object.freeze	x	x	o	x	x

 

객체 확장 금지 : Object.preventExtensions

const person = {name:'Lee'}

// 확장을 금지하여 프로퍼티 추가를 방지한다.
Object.preventExtensions(person)

person.age = 20;
console.log(person) // {name:'Lee'}, age 추가가 무시되었다.

delete person.name;
console.log(person) // {}, 삭제는 가능하다.

 

객체 밀봉 : Object.seal

const person = {name:'Lee'}

// 확장을 금지하여 프로퍼티 추가를 방지한다.
Object.seal(person)

person.age = 20;
console.log(person) // {name:'Lee'}, age 추가가 무시되었다.

delete person.name;
console.log(person) // {name:'Lee'}, 삭제도 금지된다.

person.name = 'Kim'
console.log(person) // {name:'Kim'}, 갱신은 가능하다.

// 프로퍼티 어트리뷰트 재정의 금지
// VM351:1 Uncaught TypeError: Cannot define property name, object is not extensible
Object.defineProperty(person, 'name', {configurable:true})

 

객체 동결 : Object.freeze

const person = {name:'Lee'}

// 확장을 금지하여 프로퍼티 추가를 방지한다.
Object.seal(person)

person.age = 20;
console.log(person) // {name:'Lee'}, age 추가가 무시되었다.

delete person.name;
console.log(person) // {name:'Lee'}, 삭제도 금지된다.

person.name = 'Kim'
console.log(person) // {name:'Lee'}, 갱신도 금지된다.

// 프로퍼티 어트리뷰트 재정의 금지
// VM351:1 Uncaught TypeError: Cannot define property name, object is not extensible
Object.defineProperty(person, 'name', {configurable:true})

 

불변 객체

위 3가지 변경 방지 메서드는 얕은 변경 방지라서 1depth까지만 동작하고 2depth이후 중첩된 객체까지는 영향을 주지 못한다.

객체의 중첩 객체까지 동결하려면 재귀적으로 모든 프로퍼티에 대해 Object.freeze메서드를 호출해야 한다.