자바스크립트의 객체 변경을 금지시키는 방법 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개의 댓글

관련 채용 정보