화살표 함수: 짧은 문법이 아니라 this 캡처 규칙

기본 문법

매개변수와 반환식이 짧아지지만, 핵심은 문법 축약보다 lexical this입니다.

표현식 반환

일반 함수의 this는 호출 방식에 따라 달라지고, 화살표 함수는 선언된 바깥 스코프의 this를 그대로 씁니다.

lexical this

클래스 메서드 내부의 timer나 배열 메서드에서는 this 보존용 self 변수나 bind 호출을 줄입니다.

콜백 안정화

객체 리터럴 메서드가 자기 객체를 this로 받아야 한다면 일반 메서드 축약 문법이 더 정확합니다.

호출자 this

배열 콜백

바깥 상태를 읽는 짧은 계산에 적합 items.map(item => item.id)처럼 this보다 데이터 흐름이 중요한 곳입니다.

권장

객체 메서드

호출 대상이 this가 되어야 하면 일반 함수 사용 user.say = () => this.name은 user가 아니라 바깥 this를 바라봅니다.

this 캡처 점검

DOM 이벤트

event.currentTarget을 쓰면 안정적이고 this 의존은 줄임 화살표 함수에서 this는 클릭된 요소가 아닐 수 있습니다.

이벤트

this가 필요한가 함수 안에서 this를 읽지 않는다면 화살표 함수 선택은 대부분 안전합니다.

생성자 여부 new로 호출해야 하는 함수는 화살표 함수가 될 수 없습니다.

arguments 사용 화살표 함수 안에서는 rest parameter로 필요한 값을 명시합니다.

const counter = {
  value: 0,
  tick() {
    setInterval(() => { this.value += 1; }, 1000);
  }
};