콜백 인자로 넘어간 arrow function의 this는?

오늘 arrow function에 대해서 헷갈리는 부분이 있어서 다시 정리하게 되었다.

고민

먼저 this는 함수가 어떻게 호출되었냐에 따라서 동적으로 bind된다.
그래서 setTimeout 같은 async 함수의 콜백으로 arrow function을 넘겼을 때도 this의 bind가 잘될까? 라는 의문이 생겼다.

왜냐하면 async 함수는 테스크 큐에 저장되었다가 호출 스택에 추가되므로
arrow function 함수 생성 당시와는 다른 환경에서 호출되기 때문이다.
이런 상황에서 try catch도 동작하지 않는 경우도 있어 고민을 했다.

해결

하지만 생각해보니 지금 상황은 try catch 상황과는 다른 경우다.
this가 동적으로 bind된다는 의미는 런타임에서 this가 결정이 된다는 의미고
arrow function으로 this를 정적화 한다는 것은 컴파일 단계에서 결정이 되는 것이니 컴파일 단계에서 코드를 한번 훑으며 this가 arrow function의 상위 scope로 고정된다는 사실을 알게 되었다.
그리고 실제로 해보니 내가 생각한 대로였다.

참고로 이 문제를 예전 js 버전에서 해결한 코드를 들고왔다.
이걸보면 이해가 좀 더 잘될듯

function Person() {
	var that = this;
    that.age = 0;
    
    setTimeout(function growUp() {
    	// 동적으로 정해지는 this와 달리
        //that(일반변수)은 정적으로 정해지므로 that은 Person을 가르킨다.
    	that.age++; 
    }, 1000);
}

결론

arrow function은 항상 생성 당시의 상위 scope를 this로 가지고 있다.