실행 컨텍스트 (Execution Context)

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 원리를 담고 있기 때문에, 이 부분을 공부하지 않고 자바스크립트를 접근한다면 끊임없는 질문에 갇힐 수 있다.

 

개발을 처음 시작할 때부터 지금까지, 오래된 자바스크립트 코드들이 나를 괴롭히고 있다.

원인은 동기적인 실행을 기본으로 하는 자바스크립트에 비동기라는 기능을 중간에 끼워넣으면서 발생하는 수많은 문제들이다.

이럴 때 문제가 되는 부분을 해결가능한것은 실행 컨텍스트를 제대로 이해하고 코드에 접근하는 것이다.

 

자바스크립트는 크게 전역 코드, 함수 코드로 이루어져있다. (Eval 코드도 있지만 간결함을 위해 제외하겠다.)

전역 코드가 실행되면 전역 컨텍스트를 만들고,

함수 코드가 실행되면 함수 컨텍스트를 만든다.

 

먼저, 전역 컨텍스트를 생성한 후, 함수 호출 순서에 따라 함수 컨텍스트를 생성한다.

글로는 한눈에 파악하기 힘드니, 지금부터 그림의 도움을 받겠다.

오른쪽 그림 출처 : https://frontj.com/entry/7-Javascript%EC%9D%98-this%EC%99%80-execution-context

 

1&7 : 먼저 1번과 7번은 브라우저가 실행되고 종료될 때라고 생각하면 된다.

본격적인 실행 컨텍스트가 생성되는 것은 자바스크립트를 읽어내려가는 과정이다.

2 : 먼저 전역 코드가 실행됐으니 전역 컨텍스트를 만든다.

3 : outer 함수가 호출되면 함수 컨텍스트를 만든다. (사실 outer 함수가 선언되었을때, 먼저 컨텍스트에 담기지만, 이 과정은 나중에 보충하겠다.)

4. outer 함수안에서 inner 함수가 호출되면 함수 컨텍스트를 만든다.

5. inner 함수가 종료되면 함수 컨텍스트를 삭제한다.

6. outer 함수가 종료되면 함수 컨텍스트를 삭제한다.

 

이런 과정을 거쳐 컨텍스트가 저장되는 자료구조를 콜 스택(Call Stack) 이라고 한다.

 

여기서 주의할 점은,

함수 컨텍스트는 생성 - 실행 단계를 거친다는 것

함수 컨텍스트 내부에는 변수 객체, 스코트, this 가 담긴다는 것

함수 컨텍스트가 사라질 때, 클로저(함수 내의 함수) 를 제외하고 종료된다는 것