Web Basic · Functions

화살표 함수와 this 캡처

화살표 함수는 짧게 쓰는 함수 문법이 아니라, 자신만의 this를 만들지 않고 바깥 lexical scope의 this를 그대로 쓰는 함수 표현식이다.

01

정의 위치

화살표 함수는 만들어질 때 주변 scope의 this를 캡처한다.

02

호출

call, apply, bind로 this를 바꾸려 해도 화살표 함수에는 적용되지 않는다.

03

콜백 사용

setTimeout이나 map 안에서 바깥 객체 문맥을 유지할 때 유용하다.

04

메서드 구분

객체의 동적 receiver가 필요하면 일반 메서드 문법을 사용한다.

매핑
값 변환 콜백 짧은 계산식을 반환할 때 읽기 좋음
중괄호를 쓰면 return 필요
method
receiver 의존 obj.method()의 obj를 this로 써야 하면 일반 함수
화살표 메서드는 실수 가능
constructor
생성자 불가 화살표 함수는 new로 호출할 수 없음
prototype도 없음
event
이벤트 콜백 DOM의 currentTarget을 쓸지 바깥 this를 쓸지 결정
무조건 화살표가 답은 아님

this 의도 · 반환 · 객체 메서드 점검

this 의도 함수 안 this가 호출자 기준인지 바깥 scope 기준인지 명확하다.
반환 블록 본문 화살표 함수는 return 누락을 확인한다.
객체 메서드 상태를 가진 객체 메서드에 화살표를 잘못 쓰지 않는다.
가독성 복잡한 로직은 짧은 화살표 한 줄로 밀어 넣지 않는다.