실행컨텍스트 진짜 너무 어렵고 복잡하다. 근데 너무 궁금한 녀석이다. 이 녀석을 이해하면 자바스크립트 엔진의 동작 원리를 이해할 수 있다고 한다. 그래서 난 널 이해하고싶다. 예전에 자바스크립트 스터디를 진행할 때 실행컨텍스트를 맡아서 발표를 한 적이 있다. 그때 조금이나마 이해했던 개념이 실행컨텍스트에 대한 호기심을 불러일으켰다. 어찌되었건.. 난 실행컨텍스트를 이해하고 싶다.
나는 개발을 할 때 코드의 흐름을 읽는것을 좋아한다. 책을 읽듯이 코드를 읽어나아가다 보면 자연스럽게 내가 그 코드를 지배한다는 생각이 들고, 내꺼가 된 것 같아서 너무 기분이 좋다. 실행컨텍스트를 이해하면 자바스크립트 코드의 흐름을 내것으로 만들 수 있다고 믿는다. 뿐만 아니라 개발자 면접 질문에서 필수로 나오는 변수 호이스팅, 함수 호이스팅, Closure, This, Scope에 대한 개념을 다 이해할 수 있다. 즉, 면접 대비를 할 수 있을 뿐만 아니라 자바스크립트와 친해질 수 있다.
자바스클립트 엔진은 언제 어떻게 실행을 한다는걸까? 그리고 실행컨텍스트는 언제 만들어지는걸까?..자바스크립트 엔진의 동작 과정을 자세하게 알아보기 이전에 그전에 우리는 CallStack이 무엇인지를 알고 넘어가야한다.
CallStack? 실행컨텍스트를 담는 상자라고 이해하자. 자바스크립트 엔진은 함수를 선언할 때마다 실행컨텍스트를 생성한 다음 콜스택에 물건을 적재하듯 차곡차곡 쌓아나아간다.
function foo() {
function bar() {
console.log('i am bar');
}
bar();
console.log('i am foo');
}
foo();
위의 코드는 사진과 같이 foo라는 실행컨텍스트, bar라는 실행컨텍스트가 callStack에 쌓인 모습을 그림으로 그려본 것이다.이때 콜스택의 가장 윗 부분에 있는 실행컨텍스트가 활성화된다. 실행컨텍스트는 stack이라는 개념의 동작 방식으로 연산을 하는데 스택(Stack) LIFO(Last In First Out) 를 따른다. 즉, 가장 최근에 콜 스택에 추가한 항목이 가장 먼저 제거 되는 것이다. foo 함수가 먼저 실행되는 것이 아닌 bar 함수가 먼저 실행이 되고 난 후에 foo 함수가 실행이 된다.
// 출력 순서
i am bar // 1
i am foo // 2
그리고 실행컨텍스트는 사실 크게 두 가지로 분류가 되는데 전역 실행컨텍스트와 지역 실행컨텍스트로 나뉜다. 이해를 돕기 위해 전역 실행컨텍스트가 없는 상황으로 예시를 들었다. 이어서 전역 실행컨텍스트가 있을 때 상황을 보자