Event Target Class 만들어보기

이번 글에서는 DOM 인터페이스와 비슷한 EventTarget 클래스를 만들어보려고 한다.

해당 클래스로 이벤트 리스너들을 지속적으로 트랙킹이 가능하며, event를 dispatch하여 원할때 실행도 가능하다.

코드 보기

class EventTarget {
	// 등록한 이벤트들을 관리할 listeners 객체
  constructor() {
    this.listeners = {};
  }

	// 이벤트 이름과 실행시킬 콜백함수를 인자로 받아서
	// listeners 프로퍼티에 등록
  addEventListener(name, callback) {
		// 처음 등록되는 이벤트라면 Set 생성자를 사용하여 초기값 셋팅
    if(!this.listeners.hasOwnProperty(name)) {
      this.listeners[name] = new Set([callback]);
    } else {
      this.listeners[name].add(callback);
    }
  }
	// name과 add했던 같은 콜백함수를 넣어 원하는 이벤트 삭제
  removeEventListener(name, callback) {
    this.listeners[name].delete(callback);
  }

	// 등록된 name의 이벤트가 있다면 루프를 돌아 모든 콜백함수 실행
  dispatchEvent(name) {
    if(!this.listeners[name]) return;
    for(const callback of this.listeners[name]) {
      callback();
    }
  }
}

왜 Array를 사용안하고 Set을 사용하였는가?

• 배열로 값을을 저장하게 될시, 중복값에 대한 처리가 진행이 안되기 때문에, dispatch시 중복된 연산이 실행될 수가 있다.
• 기본적으로 Set은 값을 기반으로하여 유니크값을 설정하게 되는데, 이것은 직접 배열을 탐색하는 코드를 짜지 않고 delete라는 set function을 사용하여 매개변수에 삭제하고자하는 값을 넣어 손쉽고 빠르게 삭제가 가능하다.

hasOwnProperty과 in의 차이점은?

• hasOwnProperty은 자기 자신의 객체에 선언된 프로퍼티만 검사하는 반면, in을 사용하게되면 프로토타입 체인을 타고 올라가 상위 객체의 프로퍼티까지 검사를 하게된다

Iterable한 Set 자료형

• Set 자료형은 Iterable한 속성을 가지고 있어 for of 혹은 forEach구문을 사용하여 배열 순회가 바로 가능하다.