올해 초 회사 내 신입사원들이 진행하는 세미나에서 발표한 내용을 git blog에 옮겨보았다.
해당 발표에서는 execution context의 동작 방식과 js가 어떻게 execution context를 바탕으로 closure 환경을 제공하는지를 다루었다.

코드 스피츠 77 es6+ 기초편 강의에서는 generator로 chaining을 구성하는 예제를 다룬다. 해당 강의인 4번째 강의는 이 예제 외에도 중요한 다른 예제들을 다루지만 이번 글에서는 generator chaining의 동작을 살펴보면서 generator의 동작 방식을 이해해 보겠다.

앞의 글에서는 JS가 lexical scope을 사용하는 언어인데도 불구하고 왜 this가 함수 실행 때 binding되는지 문제제기 했다. 또한 lexical scope와 dynamic scope에 대해서, lexical scope임에도 동적으로 함수가 생성되는 특징 때문에 생겨나는 closure에 대해 다루었다. 이번 글에서는 function과 arrow function의 실행을 다루면서 왜 this가 실행 때 binding되는지와 closure를 사용함으로써 function과 arrow function의 this가 어떻게 달라지는 지 알아보도록 하겠다.

앞으로 2개의 주제를 다룰 예정인데, 2개의 주제는 모두 JS의 this를 이해하기 위한 내용들이다. this를 이해하는 것에 어려움을 겪으면서 헤메다가 JS의 다른 주제들을 공부하면서 드디어 this를 조금이나마 이해하게 되었다. 그리고 역시 mdn 문서가 짱이다… mdn arrow function 문서를 읽고 나서 this를 이해하는 데 어려움을 겪었던 부분을 많이 해소하게 되었다. 우선 처음에는 lexical scope와 closure를 다루도록 하겠고, 그 다음 JS function과 arrow function을 다루면서 this에 대해 설명해보겠다.