JavaScript 실행 컨텍스트

모던 자바스크립트(저자 이웅모) 내용을 참고하였습니다.

 

💡️ 실행 컨텍스트

• 자바스크립트의 동작원리를 담고 있는 핵심 개념
• 소스 코드를 평가하여 실행 컨텍스트를 생성한다

 

소스코드의 타입

소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다

• 전역 코드 : 전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다
• 함수 코드 : 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다
• eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드를 말한다
• 모듈 코드 : 모듈 내부에 존재하는 소스코드. 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다

1. 전역 코드

• 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다
• 전역변수와 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다
• 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다

2. 함수 코드

• 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리해야 한다
• 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결해야 한다
• 이를 위해 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다

3. eval 코드

• strict mode에서 자신만의 독자적인 스코프를 생성한다
• 이를 위해 eval 코드가 평가되면 eval 실행 컨텍스트가 생성된다

4. 모듈 코드

• 모듈 코드는 모듈별로 독립적인 모듈 스코프를 생성한다
• 이를 위해 모듈 코드가 평가되면 모듈 실행 컨텍스트가 생성된다

 

소스코드의 평가와 실행

• 자바스크립트 엔진은 소스코드를 2개의 과정, "소스코드의 평가"와 "소스코드의 실행" 과정으로 나누어 처리한다

1. 소스코드 평가 과정

• 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다

2. 소스코드 실행 과정

• 소스코드 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행된다. 즉, 런타임이 시작된다
• 이때 소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득한다
• 그리고 변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다

var x; // --------------------- ❶
x = 1; // --------------------- ❷

❶ 번

• 소스코드 평가 과정에서 var x; 를 먼저 실행한다
• 이때 생성된 변수 식별자 x는 실행 컨텍스트가 관리하는 스코프에 등록되고 undefined로 초기화된다

❷ 번

• 소스코드 평가 과정이 끝난 뒤 소스코드 실행 과정이 시작된다
• 실행 과정에서는 변수 할당문 x = 1; 만 실행된다
• 이때 x 변수에 값을 할당하려면 먼저 x 변수가 선언된 변수인지 확인해야 한다
• 이를 위해 실행 컨텍스트가 관리하는 스코프에 x 변수가 등록되어 있는지 확인한다
• x 변수가 등록되어 있다면 x 변수는 소스코드 평가 과정에서 선언문이 실행되어 등록된 변수이다
• 선언된 변수라면 값을 할당하고 할당 결과를 실행 컨텍스트에 등록하여 관리한다

 

💡️ 실행 컨텍스트의 역할

• 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘
• 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다
• 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리
• 코드 실행 순서는 실행 컨텍스트 스택으로 관리

 

실행 컨텍스트 스택 (Call Stack)

• 코드의 실행 순서를 관리한다
• 자바스크립트 엔진은 먼저 전역 코드를 평가하여 전역 실행 컨텍스트를 생성하고,
• 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다
• 이때 생성된 실행 컨텍스트는 스택(Stack) 자료구조로 관리된다. 이를 "실행 컨텍스트 스택"이라고 부른다
• 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트이다

 

렉시컬 환경 (Lexical Environment)

• 스코프와 식별자를 관리한다
• 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트이다
• 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다

렉시컬 환경의 구성 컴포넌트

렉시컬 환경은 Environment Record와 Outer Lexical Environment Reference로 구성된다

• 환경 레코드 (Environment Record)
  : 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소
• 외부 렉시컬 환경에 대한 참조 (Outer Lexical Environment Reference)

​ : 상위 스코프를 가리킨다.
​ 상위 스코프는 해당 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 말한다