execution : 실행
context : 문맥/맥락/환경
어떤 코드가 해당 자리에서 어떤 역할을 수행하는지 이해하기 위해서는 그 코드에 영향을 주는 주변 코드나 변수들을 파악해야 함. 그런 영향을 주는 환경을 일컬어서 context라고 함. 즉, context는 코드의 배경이 되는 조건, 환경.
동일한 조건/환경을 지니는 코드 뭉치가 있고, 이를 실행할 때 필요한 조건/환경을 실행 컨택스트라고 함.
JS에서 동일한 조건은 전역공간/함수/eval/module 4가지가 있음. 이 중 eval은 위험한 명령어로 논외. 전역공간은 전체코드 시에 전역 context가 생기고 전체코드가 종료될 때 사라지기 때문에 함수라고 봐도 무방함. 모듈 역시 어딘가에 import되는 순간 모듈 내부에 있는 컨텍스트가 생성되고 모듈 코드가 전부 끝났을 때 컨택스트가 종료되므로 하나의 함수공간 이라고 간주해도 무방. 즉 JS에서 코드뭉치는 함수라고 봐도 무방함. 함수 내부에 있으면 같은 환경에 있다는 것.
if/for/switch/while 등의 문 내부는 ES6에서 블록스코프 개념이 추가되면서 let과 const에 대해 독립된 공간으로서의 역할을 하고 있지만 별도의 실행컨텍스트를 생성하지 않음.
'JS는 함수에 의해서만 컨텍스트를 구분할 수 있음.'
이에 따르면 실행컨텍스트는 '함수를 실행할 때 필요한 조건, 환경정보를 담은 객체'가 됨.
4개의 console.log(a)가 있는 위 코드는 1~4의 순서로 출력 됨.
전역 컨텍스트가 열리고, 전역공간을 한 줄씩 실행함. 함수 선언 부분을 지나고 outer이 실행 됨.
outer이 실행되면 outer의 실행컨텍스트가 열리고 한 줄씩 실행 함. 여기서 1의 콘솔이 찍힘. 함수 선언 부분을 지나 inner이 실행 됨.
inner이 실행되면 inner의 실행컨텍스트가 열리고 한 줄씩 실행 함. 여기서 2의 콘솔이 찍힘.
inner의 실행컨텍스트가 종료되고 3의 콘솔이 찍힘.
outer의 실행컨텍스트가 종료되고 4의 콘솔이 찍힘. 이후 전역컨텍스트도 종료 됨.
일련의 과정에서 제일 마지막에 들어온 것이 제일 먼저 빠지고, 제일 먼저 들어왔던 것이 제일 마지막에 빠짐. 즉, 스택구조임. 코드 실행에 관여하는 스택을 '콜스택'이라고 함. 현재 어떤 함수가 동작중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조임. 예제를 바탕으로 콜스택에 실행컨텍스트가 어떤 식으로 쌓이는지 살펴보면 다음과 같음.
좌측 우물처럼 보이는 것이 콜스택임. 처음에는 비어있음.
최초에 전역 공간에 대한 컨텍스트가 콜스택에 쌓임. 외부에서 콜스택에 접근할 때 전역 컨텍스트에 먼저 닿을 수 있기 때문에, 전역 컨텍스트가 실행중이란 것을 알 수 있음.
outer호출을 만나 outer 컨텍스트가 콜스택에 쌓이면 가장 상위에 있는 outer 실행중이란 것을 알 수 있음.
inner도 마찬가지로 호출되면 콜스택 최상단에 쌓이게 됨.
inner이 종료되면 inner를 꺼내게 되고 outer가 남아있어 outer의 내용이 이어지는 것(실행중)임을 알 수 있음.
outer가 종료되면 outer를 꺼내고 전역컨텍스트가 남음.
전역컨텍스트가 끝나면 남아있는 것이 없게 되면서 종료 됨.
