[javascript] 프로퍼티 디스크립터를 이용한 객체 이벤트 처리

07 Dec 2023

javascript

이번 블로그 포스트에서는 자바스크립트의 프로퍼티 디스크립터(descriptor)를 이용하여 객체 이벤트 처리에 대해 알아보겠습니다. 프로퍼티 디스크립터는 객체의 속성에 대한 설정을 할 수 있는 강력한 도구로, 속성의 writable, enumerable, configurable 등의 속성을 제어할 수 있습니다.

자바스크립트에서 객체를 이벤트 처리에 사용하는 경우에는 일반적으로 이벤트 핸들러 함수를 객체의 메소드로 정의하여 사용합니다. 예를 들어, 다음과 같은 객체가 있다고 가정해봅시다.

const obj = {
  value: 0,
  increment: function() {
    this.value++;
    console.log(this.value);
  }
};

obj.increment(); // 1
obj.increment(); // 2

위의 예시에서는 obj 객체에 increment라는 메소드를 정의하고 있습니다. 이 메소드를 호출하면 value라는 속성이 1씩 증가하고, 결과를 콘솔에 출력합니다. 그런데 만약 이 메소드를 외부에서 수정할 수 없도록 하고 싶다면 어떻게 해야 할까요?

프로퍼티 디스크립터를 사용하면 이러한 문제를 해결할 수 있습니다. 다음과 같이 Object.defineProperty 메소드를 사용하여 increment 메소드에 대한 디스크립터를 설정할 수 있습니다.

Object.defineProperty(obj, 'increment', {
  configurable: false,
  writable: false
});

위의 코드를 실행하면 increment 메소드가 더 이상 수정할 수 없게 됩니다. 즉, 다음과 같이 재할당하거나 수정하려고 시도하면 에러가 발생하게 됩니다.

obj.increment = function() {}; // TypeError: Cannot assign to read only property 'increment' of object '#<Object>'
obj.increment(); // TypeError: Cannot assign to read only property 'increment' of object '#<Object>'

이렇게 프로퍼티 디스크립터를 사용하여 객체의 속성을 제어할 수 있습니다. 이를 통해 객체 이벤트 처리에 필요한 보안 및 제어 기능을 구현할 수 있습니다.

더 자세한 내용은 아래의 참고 자료를 참조해 주세요.

MDN - Object.defineProperty()

이상으로 프로퍼티 디스크립터를 이용한 객체 이벤트 처리에 대해 알아보았습니다. 자바스크립트에서 객체를 사용하는 경우에는 프로퍼티 디스크립터를 활용하여 속성을 제어하는 것이 유용한 방법입니다. 언제든지 이 기능을 활용하여 안전하고 제어된 객체 이벤트 처리를 구현할 수 있습니다.