This binding 과 화살표 함수

공시생 시절의 binding이란 이거였다.

아마 요즘도 노량진이나 신림동 인쇄하는곳 가면

스프링 바인딩 해달라고 하면 일반 책들을 저렇게 만들어줄 것이다.

 

딱 봐도 바인딩은 '뭔가를 연결하는 것' 이라는 느낌이 오지 않는가?

 

바인딩에 관한 자세한 정보는 아래 블로그를 참조하면 될 것 같다.

 

https://velog.io/@proshy/JS-%EC%83%81%ED%99%A9%EC%97%90-%EB%94%B0%EB%A5%B8-this-%EB%B0%94%EC%9D%B8%EB%94%A9

 

최근 하고 있는 테스트코드 관련 학습에서

이 this 바인딩과 화살표 함수 관련한 적절한 예가 나와서 올려보고자 한다.

 

 

tweetRouter 함수이다. (외부에서 tweetController를 받아온다)

 

 

tweetController 클래스에 우리가 함수에서 참조하는 getTweets라는 메소드가 존재한다.

아래에 보면 this를 사용해서 생성자를 참조하는 코드가 보인다.

 

그런데 문제는 여기서 발생한다.

 

이 this가 tweetRouter라는 함수에서 호출되면, undefined가 되어버린다!

(더 정확히 말하면, 함수 내부에서 this는 지정되지 않는데, 그러므로

전역객체를 지정하게 된다.) 

 

JS에서 this가 의미하는것이 바뀌니까 이 this 바인딩이란 문제가 나온 것이고

(실제 JS 면접에서 자주 물어본다고) 그걸 해결하는 방안 중 하나가 Arrow function인 것이다.

 

Arrow function은 선언될 시점에서의 상위 스코프가 this로 바인딩(결정)이 된다.

이걸 Lexical this라고도 부른다.

 

가장 간편하게 이 문제를 해결하는 방법이니 알아두도록 합시다.

 

자바같은 언어에서는 이런 문제가 없다고 하는데...

뭐... 어떤 언어던 완벽한 언어는 없는것 같다.

 

결론 : 

무지성으로 화살표함수를 쓰지 말자