Object.defineProperty 에 대하여 알아보기

Object.defineProperty()

ES5 스펙 에서 생긴 Object.defineProperty() 는 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 수정된 객체를 리턴하게 됩니다. vue 2.x 버전 에서는 Object.defineProperty() 를 사용하여 reactivity 를 구성하고 있습니다. 때문에 vue 2.x 에서는 사전에 정의되지 않은 객체는 탐지를 할 수 없습니다.

특징

• 프로퍼티 속성에 접근 권한을 설정할 수 있습니다.
• 프로퍼티에 getter 와 Setter 를 만들 수 있습니다.
• 정상적인 IE 지원은 9버전 부터 가능합니다.

요청 매개변수

Object.defineProperty() 의 매개변수는 총 3개로 다음과 같습니다.

• obj : 속성을 정의할 객체
• prop : 새로 만들거나 수정하려는 속성의 이름
• descriptor : 객체에 정의하는 속성을 기술하는 객체

여기서 descriptor 의 속성은 다음과 같이 표로 정리하였습니다.

writable - 값 수정 불가 처리

writable 을 false 로 설정하게 되면 해당 속성의 값을 수정이 불가능하게 됩니다. 이를통해 값이 변하면 안되는 상수등에 활용할 수 있습니다.

const person = {};

Object.defineProperty(person, 'name',{
  writable: false, // 값 수정 불가 처리
  configurable: true,
  enumerable: true,
  value: 'name'
}); 

person.name = 'sungIn'; // 수정을 못하게 해서 변경되지 않습니다.
console.log(person.name); // name

configurable - 속성 변경 or 삭제 불가

configurable 을 false 로 사용하게 되면 해당 속성의 값을 변경하거나 해당 속성을 삭제할수 없게 됩니다.

const person = {};

Object.defineProperty(person, 'name',{
  writable: true,
  configurable: false,  // 속성 변경  or 삭제 불가 처리
  enumerable: true,
  value: 'name'
}); 

delete person.name; // 삭제되지 않습니다.

enumerable - 반복문에서 속성 반환 설정

enumerable 설정은 for-in 과 같은 반복문에서 해당 속성을 반환하지 못하게 설정 할 수 있습니다.

const person = { age : 20};

Object.defineProperty(person, 'name',{
  writable: true,
  configurable: true,  
  enumerable: false, // for-in 속성 반환 불가 처리 됩니다.
  value: 'name'
}); 

for(let key in person){
 console.log(key); // name 속성은 나오지 않고 age만 나오게 됩니다.
}

get, set - 값의 할당과 호출 설정

get 과 set은 해당 속성을 부르거나 설정할때 호출됩니다. 자바에서의 getter, setter의 개념을 생각하시면 됩니다.

const person = {};
let personName = '';

Object.defineProperty(person, 'name',{
  set(value) { personName = `${value}-set`; }, 
  get() { return `get-${personName}`; },
}); 

person.name = 'sungin'; // set을 통해 sungin-set 으로 설정
console.log(person.name);  // get을 통해 get-sungin-set 으로 설정

닷노테이션(.)을 통한 정의

보통 자바스크립트에서 속성을 부여할때는 다음과 같이 닷노테이션(.) 을 통해 생성합니다.

const person = {};
person.name = 'sungin';

이렇게 닷노테이션 을 통해 속성을 생성하게 되면 Object.defineProperty 의 모든 옵션은 True로 설정되어 생성됩니다.

이런식으로 Object.defineProperty 을 사용하여 객체 속성에 대해 각종 설정을 할 수 있습니다.

참조

• mozilla-defineProperty