Front-End/JavaScript

[JavaScript] 객체 변경 방지

sihyeong 2022. 10. 28. 22:51

객체 변경 방지 메서드

구분 메서드 추가 삭제 값 읽기 값 쓰기 어트리뷰트 재정의
객체 확장 금지 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'};

console.log(Object.isExtensible(person)); // false
Object.preventExtensions(person);	// 프로퍼티 추가만 금지된다.
console.log(Object.isExtensible(person));	// true

person.age = 20;
console.log(person);  // {name: 'Lee'}	// 프로퍼티 추가만 금지

person.name = "Kim";
console.log(person);  // {name: 'Kim'}	// 프로퍼티 값 변경 가능

delete person.name;	  // 프로퍼티 삭제 가능
console.log(person);  // {}

// 프로퍼티 정의에 의한 프로퍼티 추가도 금지된다.
// Object.defineProperty(person,'age', {
//   value: 20,
// });

 

Object.seal

  • 프로퍼티 읽고 쓰기만 가능
const person = { name : 'Lee' };
console.log(Object.isSealed(person));	// false
// seal하면 읽고 쓰기만 가능하다.
Object.seal(person);
console.log(Object.isSealed(person));	// true

person.age = 20;	  // 프로퍼티 추가X
console.log(person);  // {name : 'Lee'}	

// 값 갱신은 가능하다.
person.name = 'Kim';  // 프로퍼티 값 변경 O
console.log(person);  // {name : 'Kim'}	
delete person.name;	  // 프로퍼티 삭제 X
console.log(person);  // {name : 'Lee'}	

// 프로퍼티 어트리뷰트 재정의가 금지된다.
// Object.defineProperty(person, 'name', {
//   enumerable: false,
// });

 

Object.freeze

  • 읽는거 빼곤 모두다 금지
const person = { name : 'Lee'};

console.log(Object.isFrozen(person));	// false
Object.freeze(person);
console.log(Object.isFrozen(person));	// true

console.log(Object.getOwnPropertyDescriptor(person, 'name'));
// freeze된 객체는 writable(값 변경 가능여부)과 configurable(프로퍼티 재정의 가능여부)이 false이다.

person.age = 20;	// 추가X
console.log(person); // {name: 'Lee'}

delete person.name;	// 삭제X
console.log(person);  // {name: 'Lee'}

person.name = 'kim';	// 변경X
console.log(person);  // {name: 'Lee'}

// Type Error : Cannot redefine property: name
// Object.defineProperty(person, 'name',{
//   configurable: true,
// });
  • Object.freeze 메서드로 객체를 동결 가능하지만, 중첩 객체까지 동결 할 수는 없다.
  • 중첩 객체에도 Object.freeze 처리를 해야한다.

 

deepFreeze

  • 중첩 객체에도 freeze 처리를 하기 위해 순환하며 freeze 처리를 해준다.
function deepFreeze(target){
  if(target && typeof target === 'object'){
    Object.freeze(target);
    Object.keys(target).forEach(key => deepFreeze(target[key]));
  }
  return target;
}