인프런 커뮤니티 질문&답변

강의 너무 재밌고 흥미롭습니다 감사합니다 !!

제 질문은 아래와 같습니다.

delegate 함수를 호출할 때 아래 코드에서와 같이 화살표 함수를 콜백으로 넘겨주는데요,

// KeywordListView.js 
bindEvents() {
    delegate(this.element, "click", "li", (event) => this.handleClick(event));
  }

  handleClick(event) {
    const value = event.target.dataset.keyword;
    this.emit("@click", { value });
  }

// helper.js
export function delegate(target, eventName, selector, handler) {
  const emitEvent = (event) => {
    const potentialElements = qsAll(selector, target);

    for (const potentialElement of potentialElements) {
      if (potentialElement === event.target) {
        return handler.call(event.target, event);
      }
    }
  };

  on(target, eventName, emitEvent);
}

화살표 함수로 넘기는 이유는 handleClick 함수에 this를 바인딩 하지 않기 위해서인가요?

제가 이해한 의도는

helper의 delegate 함수에서 handler를 호출할 때 call을 이용해서 event.target을 this로 넘겨주는데,

handleClick에서는 KeywordListView 클래스가 상속받은 emit함수를 호출하기 위해서, this에 다른 것이 바인딩 되지 않도록 하기 위해 화살표 함수를 사용한 것으로 이해했습니다.

이게 선생님이 코드를 작성하신 의도가 맞는지 확인하고 싶어서 질문드립니다.

 

감사합니다!