JavaScript 실행 컨텍스트 (Execution Context)

콜스택 / 렉시컬 환경 / 호이스팅 / 스코프 체인

실행 컨텍스트란?

실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다.

정의

실행 컨텍스트란 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행결과를 실제로 관리하는 영역입니다.

• 코드를 실행하는 데에 필요한 배경이 되는 조건/환경
• 쉽게 말하면 '코드의 실행 환경'

동일한 조건/환경을 지니는 코드 뭉치가 있을 때, 이 조건/환경 정보를 모아 컨텍스트를 구성하고 이를 콜스택(call stack)에 쌓아둡니다.

소스코드의 4가지 타입

자바스크립트에서 동일한 환경을 가질 수 있는 소스코드 타입:

1. Global Code (전역공간) → Global Execute Context
2. Function Code (함수) → Function Execute Context
3. Eval Code → Eval Execute Context
4. Module Code → Module Execute Context

참고: eval은 여러 가지 문제를 야기하는 위험한 명령어로 거의 다루지 않아 보통 논외로 합니다.

핵심 포인트

• 전역공간: 자바스크립트 코드가 실행되는 순간 바로 전역 콘텍스트를 생성, 전체 코드가 끝날 때 종료
• 모듈: import되는 순간 컨텍스트를 생성, 모듈 코드가 끝날 때 종료

결론: 자바스크립트에서 동일한 환경을 가질 수 있는 것은 함수 뿐입니다.
함수에 의해서만 컨텍스트를 구분할 수 있습니다.

정리: 실행 컨텍스트는 '함수를 실행할 때 필요한 환경 정보를 담은 객체'입니다.

Call Stack (콜스택)

콜스택(call stack, 호출스택)이란 현재 어떤 함수가 동작 중인지, 다음에 어떤 함수가 호출될 예정인지 등을 제어하는 자료구조입니다.

특징

• FILO(First in, Last out) 구조를 준수
• 각 실행 컨텍스트를 콜스택 위로 쌓아 올림
• 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행
• 전체 코드의 환경과 순서를 보장

예제를 통한 콜스택 동작 과정

var a = 1;
function outer() {
    console.log(a); // ----------- 실행순서 1
    function inner() {
        console.log(a); // --------- 2
        var a = 3;
    }
    inner();
    console.log(a); // ----------- 3
}
outer();
console.log(a); // ------------- 4

실행 과정:
1. 제일 먼저 전역 컨텍스트가 열리고, 전역공간을 한 줄 한 줄 실행
2. outer()를 만나 함수를 호출, outer()에 대한 실행 컨텍스트가 열리고, 내부를 한 줄 한 줄 실행
3. inner()를 만나 함수를 호출, inner()에 대한 실행 컨텍스트가 열리고, 내부를 한 줄 한 줄 실행
4. inner()와 outer(), 그리고 전역까지 순서대로 종료

실행 결과:

1
undefined
1
1

결과 설명:

• 1, 3, 4번째: 해당 함수 스코프 내에 변수 a가 없기 때문에 스코프 체인을 따라 전역 변수 a를 참조해 1을 출력
• 2번째: 해당 함수 스코프 내에서 var a = 3;의 선언 부분만 호이스팅되어 undefined 값을 가짐

실행 컨텍스트의 내부 구성

어떤 실행 컨텍스트가 콜스택의 맨 위에 쌓이는 순간(활성화될 때, running execution context), 실행 컨텍스트의 내부에는 3가지의 환경 정보가 저장됩니다:

1. Variable Environment

• 현재 환경과 관련된 식별자의 정보를 수집
• 선언 시점의 Lexical Environment의 스냅샷으로, 변경 사항 반영되지 않음

2. Lexical Environment

• 현재 환경과 관련된 각 식별자에 담긴 데이터를 추적
• 처음은 Variable Environment와 동일하지만, 변경 사항이 실시간으로 반영됨 (예: 변수 재할당, 새로운 식별자 추가)

3. ThisBinding

• this 식별자가 바라봐야 할 대상 객체

Variable Environment와 Lexical Environment는 변경 사항의 반영 여부의 차이이므로, 실시간 반영의 Lexical Environment를 위주로 살펴봅니다.

Lexical Environment (렉시컬 환경)

직역하면 어휘적/사전적 환경을 의미하며, '실행 컨텍스트를 구성하는 환경 정보들을 모아 마치 사전처럼 구성한 객체'입니다.

"현재 컨텍스트 내부에는 a, b와 같은 식별자들이 있고, 그 외부 정보는 D를 참조하도록 구성되어 있다"와 같은 느낌입니다.

환경 정보 구성요소

1. environmentRecord: 현재 컨텍스트 내부의 식별자 정보
2. outerEnvironmentReference: 외부 환경을 참조하는 정보
   • 현재 컨텍스트와 관련이 있는 외부 컨텍스트의 식별자 정보를 참조

environmentRecord와 Hoisting (호이스팅)

environmentRecord에는 현재 컨텍스트의 식별자 정보가 저장됩니다.

이는 실행 컨텍스트가 최초 실행될 때 제일 먼저 하는 일입니다.

현재 컨텍스트 식별자 정보를 수집해서 environmentRecord에 담는 과정, 이를 호이스팅(hoisting)이라고 합니다.

호이스팅에 대한 이해

호이스팅은 런타임에 앞서 소스코드를 실행하기 위한 준비 과정으로 선언문만 먼저 실행하는 것입니다.

중요: 코드의 최상단으로 끌어올려지는 실제 현상이 아닌, environmentRecord를 좀 더 쉽게 이해하기 위해서 만든 허구의 개념으로 이해하는 것이 좋습니다.

outerEnvironmentReference와 Scope Chain (스코프 체인)

outerEnvironmentReference에는 현재 컨텍스트와 관련이 있는 외부 컨텍스트의 식별자 정보가 저장됩니다.