PropertyDescriptor(속성 설명자)란 무엇인가

Object에는 속성 설명자라는 것이 있습니다.

길게 말할 필요 없이 getOwnPropertyDescriptor, getOwnPropertyDescriptors 메서드를 통해 출력해봅시다.

// PropertyDescriptor(속성 설명자)란 무엇인가
const objSample = {
  num: 1,
  string: "abc",
  symbol: Symbol.for("only One"),
  g: {
    a: 1,
    b: null,
  },
  bark() {
    console.log(this.a);
  },
};

// 전체 특정 속성
// { value: 1, writable: true, enumerable: true, configurable: true }
const propDesc = Object.getOwnPropertyDescriptor(objSample, "num");

// 전체 속성. (s 한글자 차이이므로 주의할 것)
const whoDesc = Object.getOwnPropertyDescriptors(objSample);
/*
 * {
  num: { value: 1, writable: true, enumerable: true, configurable: true },
  string: {
    value: 'abc',
    writable: true,
    enumerable: true,
    configurable: true
  },
 */

 

object 내의 각 속성에 대한 설명을 해줍니다. js에서 writeable을 false로 변경하면 readonly로 만들어 줄 수 있겠군요.

Object.freeze라는 좋은 메서드가 있기는 하지만, 객체를 통째로 얼리는 것이지 각 속성에 대해 얼리는 것은 아니었습니다.

 

* 참고로 Object.freeze를 사용하면 witable이 false가 되고, configurable이 fale가 됩니다. 즉, 되돌릴 수 없고, 다시 쓸 수도 없게 된다는 의미입니다.

 

• value : 값
• writable: readonly면 false, 아니면 true.
• enumerable false일 경우 해당 속성은 나열 불가능한 상태
• configurable: enumerable, configurable 다시 변경 불가능. 단, value는 가능

 

만약 순수 js에서 readonly인 값을 만들어주기 위해 writable을 false로 만들어주기 위해서는 defineProperty를 사용하면 됩니다.

 

sample = {};
Object.defineProperty(sample, "potato", {
  value: 3,
  writable: false,
  enumerable: true,
  configurable: true,
});
console.log(sample);
sample.potato = "다른값";
console.log(sample); // 바뀌지 않는다.

 

만약 여러 값을 넣어주시고 싶다면 defineProperties를 사용하여 아래와 같이 작성해줍니다.

sample = {};
Object.defineProperties(sample, {
  first: { value: 1, writable: true, enumerable: true, configurable: true },
  second: { value: 2, writable: true, enumerable: true, configurable: true },
});
console.log(sample);

 

 

출력된 Property Descriptor에 대한 간략한 설명은 아래와 같습니다.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#%EC%84%A4%EB%AA%85

Object.defineProperty() - JavaScript | MDN

{
  value: [Function (anonymous)], // 속성에 관한 값. 여기선 실행할 함수
  writable: true, // value의 값을 바꿀 수 있다면 true 아니면 false
  enumerable: true, // 속성 열거 시 노출된다면 true 아니면 false
  configurable: true // 속성의 값을 변경할 수 있고, 삭제할 수도 있다면 true 아니면 false
}

 

이걸 어디에 쓸까 싶었는데 method decorator 등 데코레이터에서 활용할 바가 많더군요?

역시 아는 만큼만 보입니다.

 

 

참고한 글 )

velog.io/@zuyonze/%EA%B0%9D%EC%B2%B4%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC.JS-2-%EC%86%8D%EC%84%B1-%EC%84%A4%EB%AA%85%EC%9E%90-muk0axrb8s

객체에 대하여.JS #2 속성 설명자