실행 컨택스트
실행 컨텍스트는 실행할 코드에 제공하는 환경 정보들을 모아 놓은 객체입니다.
자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리는 호이스팅하고, 외부환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행합니다.
동일한 환경에 있는 코드들을 실행할 때 필요할 환경정보들을 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아두었다가 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 방식으로 전체 코드의 환경과 순서를 보장합니다.
여기서 하나의 실행 컨텍스트인 동일한 환경을 구성하는 방법은 전역 공간, eval 함수, 함수 실행 등이 있습니다만, 자동으로 생성되는 전역공간과 eval함수를 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것 입니다. ES6에서는 블록에 의해서도 새로운 실행 컨텍스트가 생성됩니다.
전역 실행 컨택스트
전역 실행 컨택스트는 변수 객체를 생성하지 않고 자바스크립트 구동 화면이 별도로 제공하는 객체인 전역 객체를 활용합니다. 이러한 전역 객체는 호스트 객체로 분류되며 브라우저의 window, Node.js의 global 객체 등이 있습니다.
전역 변수와 지역 변수
전역 공간에서 선언된 변수는 전역 변수이고, 함수 내부에서 선언한 변수는 무조건 지역 변수입니다. 코드의 안정성을 위해 가급적 지역 변수의 사용을 최소화하는 것이 좋습니다.
콜스택에서의 실행 컨택스트
콜스택에 실행 컨텍스트가 어떤 순서로 쌓이고 어떤 순서랑 코드 실행에 관여하는가?
처음 자바스크립트 코드를 실행하는 순간 전역 컨택스트가 콜스택에 담깁니다.
전역 컨택스트는 관여하는 대상이 함수가 아닌 전역공간이 실행 컨택스트입니다. 전역 공간을 대상으로 하기 때문에 arguments가 없고, 전역 공간을 둘러싼 외부 스코프는 존재할 수 없기 때문에 스코프 체인 상에서는 전역 스코프만 존재합니다.
이러한 전역 컨택스트는 처음 자바스크립트 코드가 실행하는 순간 콜스택에 당깁니다. 콜스택에서는 담겨진 전역 컨택스트와 관련된 코드들을 순차적으로 진행하다가 호출되는 함수에 따라 자바스크립트 엔진은 해당 함수에 대한 환경 정보를 수집해서 실행 컨택스트를 생성하고 콜스택에 담습니다.
콜스택의 맨 위에 함수의 실행 컨택스트가 놓인 상태가 됐으므로 전역 컨택스트와 관련된 코드의 실행을 일시중단하고 대신 실행 컨택스트와 관련된 코드인 함수 내부의 코드들을 순차적으로 실행합니다.
함수의 실행이 종료되어 실행 컨택스트가 콜스택에서 제거되고, 콜스택에는 전역 컨택스트만 남아있게 되면 실행을 중단했던 전역 컨택스트와 관련된 코드를 이어서 실행합니다.
전역 공간에 더 이상 실행할 코드가 남아있지 않아 전역 컨택스트도 제거되고, 콜스택에는 아무것도 남아있지 않은 상태로 종료됩니다.
실행 컨택스트에 담기는 정보
실행 컨택스트가 활성화될 때, 자바스크립트 엔진은 해당 컨택스트에 관련된 코드들을 실행하는 데 필요한 환경정보들을 수집해서 VariableEnvironment 에 정보를 먼저 담고, 이를 그대로 복사해서 LexicalEnvironment를 만들고 이후에는 LexicalEnvironment을 주로 활용하게 됩니다. 이러한 객체는 자바스크립트 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인할 수는 없습니다.
구성요소
실행 컨택스트의 구성요소는 VariableEnvironment, LexicalEnvironment, ThisBinding이 있습니다. 또한 VariableEnvironment 혹은 LexicalEnvironment의 구성요소로는 environmentRecord와 outer-EnvironmentReference이 있습니다.
environmentRecord
environmentRecord에는 현재 컨택스트와 관련된 코드의 정보를 저장하는데,
이러한 정보들은 함수에 저장된 매개변수의 이름과 선언된 함수가 있을 경우 선언된 그 함수 자체, var 키워드로 선언된 변수명으로 이루어져 있습니다.
컨택스트 내부 전체를 처음부터 끝까지 수집하는데 이때는 아직 실행 컨택스트가 관여할 코드들은 실행되기 전의 상태입니다. 따라서 코드가 실행되기 전임에도 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명을 모두 알고 있게 됩니다.
이렇게 자바스크립트 엔진은 식별자들을 최상단으로 끌어올려 놓은 다음 실제 코드를 실행한다는 호이스팅이라는 가상의 개념이 등장하게 됩니다. 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주합니다.
outer-EnvironmentReference 🔥
outer-EnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조합니다.
이때 선언될 당시라고 과거시제로 사용된다는 용어를 사용했는데, 어떤 함수를 선언하는 행위 자체는 하나의 코드에 지나지 않으며, 모든 코드는 실행 컨택스트가 활성화 상태일 때 실행됩니다. 따라서 선언한다는 행위가 실제로 일어날 수 있는 시점이란, 콜스택 상에서 어떤 실행 컨택스트가 활성화된 상태 뿐입니다.
이러한 구조적인 특성 덕분에 여러 스코프에서 동일한 식별자를 선언했을 때 무조건 스코프체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능합니다.
ThisBinding
this로 지정된 객체가 저장되는데 실행 컨택스트 활성화 당시에 this가 지정되지 않은 경우, this에는 전역 객체가 저장됩니다. 또한 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다릅니다.
