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;
}