자바스크립트의 객체 변경을 금지시키는 방법 3가지

boyeonJ·2023년 7월 3일
0

JavaScript Basic

목록 보기
17/24
post-thumbnail

객체는 변경가능한 값입니다.

  • 프로퍼티값 갱신
  1. 프로퍼티 추가
  2. 프로퍼티 삭제
  • 프로퍼티 어트리뷰트 재정의
  1. Object.defineProperty
  2. Object.defineProperties

객체를 변경 방지 매소드

자바스크립트에서는 객체를 변경 할 수 없도록 하는 매소드를 제공합니다. 각 매소드는 객체의 변경을 금지하는 강도가 다릅니다.

1. Object.preventExtensions

Object.prevenExtensions는 말 그대로 확장이 불가능합니다.
*객체 확장은 프로퍼티 추가를 의미합니다!

그렇다면 프로퍼티를 추가하는 방법은?🤔
1. 동적 추가
2. Object.defineProperty

const person = {name: 'Lee'};

Object.preventExtentions(person);
//isExtensible 매소드로 확인하기
console.log(isExtensible(person));//true

//동적 추가 금지
person.age = 20;
//defineProperty 매소드로 추가 금지
Object.defineProperty(person, age, {value: 20});

2. Object.seal

Object.seal는 객체를 밀봉합니다.
*객체 밀봉은 기존값 읽기와 쓰기(변경, 갱신)가능하며 추가, 삭제, 어트리뷰트 재정의불가능합니다.

const person = {name: 'Lee'};

Object.seal(person);
//isSealed 매소드로 확인하기
console.log(isSealed(person));//true

//추가 금지
person.age = 20;
//삭제 금지
delete person.name;
//defineProperty 매소드로 어트리뷰트 재정의 금지
Object.defineProperty(person, age, {value: 20});

Object.seal의 configurable은 false입니다!

3. Object.freeze

Object.freeze는 객체를 동결을 의미합니다.
*객체 동결은 기존값 쓰기(변경, 갱신)도 불가능하여 읽기만 가능한 상태입니다.

const person = {name: 'Lee'};

Object.freeze(person);
//isFreezen 매소드로 확인하기
console.log(isFreezen(person));//true

//추가 금지
person.age = 20;
//삭제 금지
delete person.name;
//defineProperty 매소드로 어트리뷰트 재정의 금지
Object.defineProperty(person, age, {value: 20});
//수정 금지
person.name = 10;

Object.freeze는 configurable, writable이 false입니다!


위 3가지의 매소드는 얕은 변경 방지 입니다. 따라서 직속 프로퍼티에만 적용이 되며 중첩 객체까지는 영향을 주지 못합니다. 모든 중첩 객체를 변경 방지 하려면 재귀적으로 위의 매소드를 호출해야 합니다.

0개의 댓글