[책] 자바스크립트 코드 레시피 278 - 234일차

this 기능 사용하기 (화살표 함수)

• 클래스의 멤버 변수를 메소드 내부와 이벤트 리스너에서 참조하고 싶을 때

구문

() => {} // 화살표 함수 정의

설명

자바스크립트에서 this는 실행하는 영역에 따라 참조하는 곳이 변한다. 화살표 함수를 사용하면 실행 영역에 상관없이 this의 참조가 변하지 않으므로 코드의 가독성이 좋아집니다. 클릭 횟수를 계산하는 프로그램을 통해 조금 더 자세히 알아봅시다. 다음은 likeCounter 클래스의 멤버 변수 clickedCount를 사용해 클릭 횟수를 카운트하는 목적의 프로그램입니다.

class likeCounter {
  constructor() {
    this.clickedCount = 0;
    const button = document.querySelector('.button');
    const clickedCountText = document.querySelector('.clickedCountText');

    button.addEventListener('click', function() {
      this.clickedCount = this.clickedCount + 1;
      clickedCountText.textContent = this.clickedCount;
    });
  };
};

new likeCounter();

여기서 문제는 이벤트 리스너 내부의 this가 이벤트 타깃을 참조하므로 this.clickedCount는 LikeCount의 멤버 변수를 참조하지 않는다는 점입니다.

화살표 함수

다음과 같이 이벤트 리스너 부분을 화살표 함수로 변경하면 기능이 의도한 대로 동작합니다. 이벤트 리스너 내부 this가 LikeCounter 클래스를 참조하기 때문입니다.

class likeCounter {
  constructor() {
    this.clickedCount = 0;
    const button = document.querySelector('.button');
    const clickedCountText = document.querySelector('.clickedCountText');

    button.addEventListener('click', () => {
      this.clickedCount = this.clickedCount + 1;
      clickedCountText.textContent = this.clickedCount;
    });
  };
};

new likeCounter();