Express Router 사용시 this Undefined 해결

요즘 Express를 사용해서 웹서버를 구현하고 있다. 작업을 하다가 이상한 부분에서 시간을 많이 잡아먹었다.

증상은 아래와 같다.

1. Express + Router를 사용하여 함수를 호출하도록 하였다.
2. constructor를 이용하여 생성자를 할당해 주었다.
3. 할당된 생성자를 다른 function 에서 사용을 하려고 한다 (this 사용)
4. Error 🚨(UnhandledPromiseRejectionWarning: TypeError: Cannot read property '생성자' of undefined)

1. 실험 코드💡

💢왜 오류가 날까?

이런 라우터와 컨트롤러가 있다고 생각을 해보면 eatApple()을 호출했을 때 오류가 발생하는 것을 볼 수 있다.

그 이유는 라우터에서 넘겨준 eatApple은 함수를 호출한 것이 아니라 해당 eatApple을 '실행'할 수 있게 넘겨준 것이기 때문에 this가 undefined로 나타난다. 따라서 라우터가 실행하는 eatApple안에 this는 appleController가 아니게 된다.

2. 해결법⭐

우리는 2가지의 해결 방법을 사용하여 해결할 수 있다.

1. Arrow Function 사용

2. bind 사용

bind를 사용하는 방법은 크게 두 가지가 있는 것 같다.

1. router에서 직접 호출하는 부분을 bind 한다.
2. constructor 부분에서 함수들을 직접 bind한다.