자바스크립트는 객체지향 프로그래밍 언어로서, 프로퍼티(property)를 다루는데 매우 강력한 기능을 제공합니다. 프로퍼티 디스크립터(property descriptor)는 프로퍼티의 동작을 세밀하게 제어할 수 있는 객체입니다. 이러한 프로퍼티 디스크립터를 활용하면 프로퍼티의 속성을 수정하거나, 새로운 프로퍼티를 생성할 수 있습니다.

이번 글에서는 자바스크립트 프로퍼티 디스크립터 활용 패턴 몇 가지를 소개하고자 합니다. 각 예제는 자바스크립트의 Object.defineProperty 함수를 이용하여 프로퍼티 디스크립터를 정의하고 사용합니다.

1. 읽기 전용 프로퍼티

프로퍼티 디스크립터를 활용하여 읽기 전용 프로퍼티를 생성할 수 있습니다. 이를 통해, 프로퍼티의 값을 수정하는 것을 방지할 수 있습니다. 아래 예제를 살펴봅시다.

let obj = {};

Object.defineProperty(obj, 'readOnlyProp', {
  value: 'immutable',
  writable: false
});

console.log(obj.readOnlyProp);  // 'immutable'
obj.readOnlyProp = 'modified';
console.log(obj.readOnlyProp);  // 'immutable'

Object.defineProperty 함수를 이용하여 readOnlyProp 프로퍼티를 생성하고, writable 속성을 false로 설정하여 읽기 전용으로 만듭니다. 이후에는 readOnlyProp 프로퍼티의 값을 변경해도 아무런 변화가 없음을 확인할 수 있습니다.

2. 열거 불가능한 프로퍼티

프로퍼티 디스크립터를 활용하여 열거 불가능한 프로퍼티를 생성할 수 있습니다. 열거 불가능한 프로퍼티는 for...in 루프나 Object.keys 메소드에서 해당 프로퍼티가 노출되지 않습니다. 아래의 예제를 살펴봅시다.

let obj = {};

Object.defineProperty(obj, 'nonEnumerableProp', {
  value: 'hidden',
  enumerable: false
});

for (let prop in obj) {
  console.log(prop);  // nothing is logged
}

console.log(Object.keys(obj));  // []

Object.defineProperty 함수를 이용하여 nonEnumerableProp 프로퍼티를 생성하고, enumerable 속성을 false로 설정하여 열거 불가능한 프로퍼티로 만듭니다. 이후에는 for...in 루프나 Object.keys 메소드에서 해당 프로퍼티가 노출되지 않음을 확인할 수 있습니다.

3. 접근자 프로퍼티

프로퍼티 디스크립터를 활용하여 접근자 프로퍼티를 생성할 수 있습니다. 접근자 프로퍼티는 값이 아닌 함수를 통해 프로퍼티에 접근할 때 사용됩니다. 아래 예제를 살펴봅시다.

let obj = {
  _prop: 0,

  get prop() {
    return this._prop;
  },

  set prop(value) {
    if (value > 100) {
      this._prop = 100;
    } else {
      this._prop = value;
    }
  }
};

console.log(obj.prop);  // 0
obj.prop = 90;
console.log(obj.prop);  // 90
obj.prop = 150;
console.log(obj.prop);  // 100

obj 객체의 _prop 프로퍼티는 접근자 프로퍼티인 prop을 통해 접근할 수 있습니다. get 메소드는 프로퍼티 값을 반환하고, set 메소드는 프로퍼티 값을 설정하며 특정 조건에 따라 값을 제한합니다.

결론

자바스크립트의 프로퍼티 디스크립터를 활용하면 프로퍼티의 동작을 세밀하게 제어할 수 있습니다. 읽기 전용 프로퍼티, 열거 불가능한 프로퍼티, 그리고 접근자 프로퍼티 등 다양한 패턴을 프로퍼티 디스크립터를 통해 구현할 수 있습니다. 이러한 기능을 적절히 활용하여 보다 유연하고 안정적인 코드를 작성할 수 있습니다.

참고 자료:

• MDN Web Docs
• 2ality