모던 자바스크립트 - 실행 컨텍스트(1)

1. 자바스크립트에서는 소스코드를 4가지 타입으로 구분하고 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정이 다르다.

 

2. 소스코드의 평가와 실행

 

 

예시로 아래 과정을 보자

 

var x; // 1. 소스코드의 평가과정에서 실행 컨택스트에 등록되는 정보
x = 1; // 2. 소스코드의 실행과정에서 x를 실행컨택스트에서 찾아 1이라는 값을 할당한다.

 

위 1번 절차

 

위 2번 절차

3. 그래서 실행 컨텍스트가 뭔데?

실행 컨텍스트: 식별자, 스코프를 렉시컬 환경으로 관리, 코드 실행 순서를 관리하는 실행 컨텍스트 스택으로 관리하는 것으로 소스코드를 실행하는 데 필요한 환경을 제공하고 관리하는 영역.  

 

3-1. 실행 컨텍스트 스택이란

코드 실행 순서를 관리한다.

 

const x = 1;

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

foo();

• 전역 실행 컨텍스트가 생성되고 전역변수 x와 전역함수 foo를 등록한다. 이후 전역 코드 실행될 때 전역변수 x에 값이 할당되고 foo()를 호출한다.
• 전역 코드 실행을 중지하고 foo 함수 내부로 이동하고 foo 함수 컨텍스트를 생성한다. 지역변수 y와 bar함수를 등록하고 이후 실행과정에서 y에 값을 할당하고 bar 함수 호출한다.
• foo함수 실행 일시 중지하고 bar함수 내부로 이동하고 bar 함수 컨텍스트 생성한다. 지역변수 z를 등록한다. 이후 실행과정에서 z에 값을 할당하고 console.log메서드를 호출하고 bar는 종료된다(bar함수 컨텍스트 제거).
• 제어권은 다시 foo에게 넘어가고 더이상 실행할 코드가 없기 때문에 foo함수 컨텍스트도 제거.
• 전역 실행 컨텍스트도 더이상 할일이 없으니깐 실행 컨텍스트에서 제거.

이처럼 실행 컨텍스트의 최상위에 존재하는 실행 컨텍스트가 현재 실행중인 실행 컨텍스트다.

 

3-2. 렉시컬 환경이란

실행 컨텍스트를 구성하는 컴포넌트다.

생성 초기의 실행 컨텍스트

 

원래는 실행 컨텍스트는 렉시컬 환경 컴포넌트 + variableEnvironment 컴포넌트로 구성되어있으나 여기서는 구분하지 않고 하나의 LexicalEnvironment로 통일해서 설명할 것이다.

 

렉시컬 환경은 환경 레코드 + 외부 렉시컬 환경에 대한 참조로 구성된다.

환경 레코드: 식별자를 등록하고 바인딩 된 값을 관리

외부 렉시컬 환경에 대한 참조: 상위 스코프를 가리킨다. 상위 스코프란 상위 렉시컬 환경을 말한다.