[JavaScript] 자바스크립트에서 this 기능(화살표함수) 사용하기

261_자바스크립트에서 this 기능(화살표함수) 사용하기

[적용]

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

---

[문법]

구문	의미
() => {}	화살표 함수 정의

---

[내용]

자바스크립트에서 this는 실행하는 영역에 따라 참조하는 곳이 변한다.

화살표 함수를 사용하면 실행 영역에 상관없이 this의 참조가 변하지 않으므로 코드의 가독성이 좋아진다.

 

클릭 횟수를 계산하는 프로그램을 통해 조금 더 자세히 알아보자.

다음은 LikeCounter 클래스의 멤버 변수 ClickedCount를 사용해 클릭 횟수를 카운트하는 목적의 프로그램이다.

우선 정상 동작하지 않는 코드를 먼저 확인해 보자.

 

JavaScript                                                                                                                                                          ERROR

class LikeCounter {
  constructor() {
    // 버튼 클릭 횟수
    this.clickedCount = 0;
    
    cost button = document.querySelector('.button');
    const clickedCountText = document.querySelector('.clickedCountText');
    
    button.addEventListener('click', function() {
      this.clickedCount += 1;
      clickedCountText.textCount = this.clickedCount;
    });
  }
}

new LikeCounter();

 

여기서 문제는 이벤트 리스터 내부의 this가 이벤트 타깃을 참조하므로

this.clickedCount는 LikeCounter의 멤버 변수를 참조하지 않는다는 점이다.

JavaScript                      

button.addEventListener('click', function() {});

이에 따라 실행결과는 버큰 클릭 시에도 횟수가 정확하게 카운트되지 않는다.

 

다음과 같이 이벤트 리스터 부분을 화살표 함수로 변경하면 기능이 의도한 대로 동작한다.

이벤트 리스터 내부의 this가 LikeCounter 클래스를 참조하기 때문이다.

JavaScript         

class LikeCounter {
  constructor() {
    // 버튼 클릭 횟수
    this.clickedCount = 0;
    
    const button = document.querySelector('.button');
    const clickedCountText = document.querySelector('.clickedCountText');
    
    // 화살표 함수로 이벤트 리스터 정의
    button.addEventListener('click', () => {
      this.clickedCount += 1;
      clickedCountText.textContent = this.clickedCount;
    });
  }
}

new LikeCounter();

코드의 문맥과 상관없이 this의 참조를 파악할 수 있으므로 화살표 함수를 사용하면 가독성이 좋아진다.

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김