2. 실행 컨텍스트

실행 컨텍스트=코드 흐름상에 배경이 되는 조건/환경정보를 담은 객체=>동일한 조건/환경을 가지는 코드 뭉치 정도로 느낌적인 느낌만 가져가자.

전역변수/지역변수의 개념이 생기는 이유가 이 실행 컨텍스트 때문이라고 보면 될것 같다. 자바스크립트에서 동일한 실행 컨텍스트를 갖게 하는 요인은 크게 네가지 (전역공간,함수,module,eval) 이 있는데 eval은 여러가지 문제를 야기하기 때문에 논외. 전역공간은 가장 큰 함수 하나로 보고 모듈도 import 되는 순간 컨텍스트가 생성되고 모듈 코드가 끝났을때 컨텍스트가 종료되기 때문에 모듈도 일종의 함수로 보면 결국 같은 '함수' 안에 있으면 같은 실행 컨텍스트를 갖는다고 보면 된다.

번외로 if/for/switch/while 같은 '문'들은  let const 가 es6부터 추가되며 별개의 독립된 공간으로서의 역할을 하고있지만 별개의 실행 컨텍스트를 생성하지는 않는다.

실행 컨텍스트에는 VariableEnvironment, LexicalEnvironment, thisBinding 이 있는데 VariableEnvironment는 식별자 정보를 수집하고  LexicalEnvironment는 각 식별자의 '데이터' 를 추적한다 (변화하는 값을 반영함) VariableEnvironment는 강의에서 중요하게 다루지 않고 LexicalEnvironment에 대해 설명한다.(thisBinding은 다음 강의에서 다룸)

LexicalEnvironment의 뜻을 풀이해보면 어휘/사전적 환경을 뜻한다. 실제로 자신이 속한 실행 컨텍스트의 모든 식별자의 이름과 값, 그리고 자신이 참조하는 외부 컨텍스트의 정보를 사전처럼 구성한 객체가 LexicalEnvironment 이다. 

예를들면 LexicalEnvironment는

내부식별자 a (environmentRecord) : 현재 값은 undefined이다

내부식별자 b (environmentRecord) : 현재 값은 20이다

외부 정보(outerEnvironmentReference) : D를 참조한다.

의 구조로 이루어져 있다.

그렇다면 실행컨텍스트는 어떻게 작동하여 LexicalEnvironment를 구성할까?

실행컨텍스트는 어떤 함수가 호출되면 함수의 범위 안에 있는 모든 선언을 위로 끌어온다. (이것을 Hoisting-끌어올림 이라고 부른다.)

함수는 전체를, 변수는 선언 까지만(할당은 원래 코드의 위치에서 함) 끌어온다. 그리고 나서야 자바스크립트는 함수 내 코드를 작동시킨다. 사실 실행 컨텍스트가 실제로 선언을 끌어 올리는것은 아니고 정보를 수집해서 LexicalEnvironment를 구성할 뿐이다. 그러나 모든 선언을 위로 끌어올린다고 생각해도(추상화된 개념-Hoisting) 문제될 것이 없기 때문에 그렇게 생각하는 편이 편할 것이다.

실행 컨텍스트는 언제 생성될까? 새로운 실행 컨텍스트의 범위가 필요해질 때 새로운 실행 컨텍스트는 생성된다.

새로운 범위가 필요해질 때 = 새로운 독립적 환경일 때  즉 어떤 함수가 호출될때 그 함수의 실행 컨텍스트가 생성된다.   자바스크립트는 호출한 함수를 콜 스택에 담아 순차적으로 처리하기 때문에(LIFO) 코드 작동 시작 때 전역 실행 컨텍스트가 생성되고 점점 깊은 곳의 코드들을 처리한 후에 전역 실행 컨텍스트를 종료하면서 작동이 끝난다. 내부의 각 함수들이 실행될때 본인의 LexicalEnvironment에 존재하지 않는 변수나 함수를 만나면 자신이 참조하고 있는 외부 함수의 실행 컨텍스트를 뒤져 변수를 찾는다. 또 존재하지 않으면 다시 외부의 함수에 가서 찾는 과정이 계속된다(ScopeChain. 그 과정에서 변수를 찾으면 그 변수의 값을 이용한다. 만약 변수를 찾았던 실행 컨텍스트 외부에 같은 이름의 변수가 또 존재하더라도 그 값은 인식되지 않는다(Shadowing).