JavaScript에서 객체의 상태를 변경하고 이를 다른 부분에 알리기 위해 이벤트 디스패치(dispatch) 기능을 활용하는 것은 매우 유용합니다. 생성자 함수를 사용하여 객체를 만들고 상태 변경 시 이벤트를 발생시키는 방법을 알아보겠습니다.

생성자 함수로 객체 생성하기

JavaScript에서 객체를 생성하려면 생성자 함수를 사용해야 합니다. 생성자 함수는 new 키워드와 함께 호출되어 새로운 인스턴스를 반환합니다. 이 인스턴스는 해당 생성자 함수가 정의한 속성과 메서드를 가지게 됩니다.

function Car(make, model) {
  this.make = make;
  this.model = model;
}

위의 예시에서 Car 생성자 함수는 make와 model을 인수로 받아 새로운 차량 객체를 생성합니다. 생성된 객체는 this를 통해 해당 속성에 접근할 수 있습니다.

이벤트 디스패치를 위한 프로토타입 메서드 추가하기

이벤트 디스패치를 위해 생성된 객체에 메서드를 추가해야 합니다. 이 메서드는 객체의 상태 변경 시 이벤트를 발생시키고, 이벤트를 처리하는 다른 부분에 알릴 역할을 합니다.

Car.prototype.changeStatus = function(status) {
  this.status = status;
  this.dispatchEvent(new Event('statusChange'));
}

위의 예시에서 changeStatus 메서드는 객체의 status 속성을 업데이트하고, statusChange 이벤트를 발생시킵니다. dispatchEvent 메서드를 사용하여 이벤트를 발생시킬 수 있습니다.

이벤트 처리하기

이벤트를 처리하기 위해 객체에 이벤트 리스너를 추가해야 합니다. 이벤트 리스너는 addEventListener 메서드를 사용하여 정의됩니다.

const myCar = new Car('Tesla', 'Model 3');
myCar.addEventListener('statusChange', function() {
  console.log('Car status changed');
});

위의 예시에서 addEventListener를 사용하여 statusChange 이벤트에 대한 리스너를 추가했습니다. 이제 changeStatus 메서드가 호출될 때마다 “Car status changed”라는 메시지가 출력됩니다.

결론

생성자 함수를 사용하여 JavaScript 객체를 생성하고, 이벤트 디스패치 기능을 활용하여 객체의 상태 변경을 다른 부분에 알릴 수 있습니다. 이는 더 모듈화된 코드를 작성하고 객체 간의 상호작용을 개선하는 데 도움이 됩니다.

#JavaScript #EventDispatching