실행 컨텍스트의 동작 과정

 

실행 컨텍스트가 무엇이고, 어떠한 기능을 하는지 알아보자.

 

 

---

 

 

실행 컨텍스트

실행 컨텍스트는 코드가 실행되는 환경이다. 함수 호출, 전역 코드 실행, eval() 실행 등 모든 실행 단위가 실행 컨텍스트에서 처리된다.

 

실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.

-자바스크립트 Deep Dive

 

 

구성요소

 

 

 

Call Stack

자바스크립트 엔진은 단일 Call Stack을 사용해 실행 컨텍스트를 관리한다.

각 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고 Call Stack에 쌓인다.

 

1. 생성 단계

• 실행 컨텍스트가 생성되며, 선언문만 실행해서 환경 레코드(Environment Record)에 기록한다.

 

2. 실행 단계

• 선언문 외 나머지 코드가 순차적으로 실행된다.
• 이때 환경 레코드를 참조하거나 업데이트한다.

 

 

call stack 과정

console.log(Foo); // 1

var Foo = "응가" // 2

console.log(Foo); // 3

1. 전역 실행 컨텍스트 생성 : Call Stack에 전역 실행 컨텍스트가 쌓인다.
2. 변수 선언 : Foo는 var 키워드를 통해 선언했기 때문에, 초기화되기 전에 undefined로 설정된다.
3. 전역 실행 종료 : 모든 코드 실행이 끝나면 Call Stack이 비워진다.

 

 

만약 여기서 var키워드를 사용해 변수를 선언하지 않고 const, let을 사용해 선언을 하면 자바스크립트 엔진이 이를 초기화하지 못해 Reference Error가 발생한다.

 

 

 

 

실행 컨텍스트 내부 구조

 

1. 렉시컬 환경

• 코드 실행 시점에 변수를 포함한 스코프 정보가 저장

2. 변수 환경

• 변수 선언 및 초기화 정보를 포함

3. this 바인딩

• 함수 호출 방식에 따라 this가 결정됨

스코프란 범위라는 뜻으로, 자바스크립트에서 스코프는 "변수에 접근할 수 있는 범위"를 의미한다.

 

 

렉시컬 환경

 

1. 외부 환경 변수 Outer Enviconment Reference

• 외부 환경 참조, 바깥 Lexical Environment를 가리킨다.

2. 환경 레코드 Environment Record

• 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소이다.

 

 

예시

 

식별자 결정

코드에서 변수나 함수의 값을 결정하는 것

var x = 1;
const y = 2;

function foo() {
    var x = 3;
    const y = 4;

    function bar() {
        const z = 5;
        console.log(x + y + z);
    }
    bar();
}

foo();

 

변수 x, y, 함수 foo가 환경 레코드에 등록된다.

 

 

foo()를 실행하면 새로운 실행컨텍스트가 생성되고, 마찬가지로 foo 함수 내부에 있는 변수와 함수를 환경 레코드에 등록한다.

 

 

만약 환경레코드에 식별자가 존재하지 않는다면 어떻게 될까?

 

 

이때 자바스크립트 엔진은 새로 생성된 실행 컨텍스트에 바깥 렉시컬 환경으로 돌아갈 수 있는 outer(외부 환경 변수)를 남겨놓는다. 이를 통해 필요한 경우 이전 환경 레코드에 저장된 식별자도 참조할 수 있다. 이러한 구조를 스코프 체인이라고 한다.

bar함수의 outer는 이전 렉시컬 환경인 foo를 가리킨다.

 

 

변수 탐색 과정

1. 자바스크립트 엔진은 변수의 값을 결정하기 위해 환경 레코드를 확인한다. 원칙적으로 현재 활성화된(가장 위에 있는) 실행컨텍스트의 환경레코드를 먼저 본다.
2. 식별자가 존재하지 않으면 outer가 가리키는 바깥 렉시컬 환경으로 이동하여 탐색을 이어간다.
3. 모든 렉시컬 환경을 탐색해도 식별자가 없으면 Reference Error가 발생한다.

 

 

---

 

참고

• 자바스크립트 Deep Dive
• 유튜브 (강추!) [10분 테코톡] 💙 하루의 실행 컨텍스트