자바스크립트 실행 컨텍스트 - 3

4 실행 컨텍스트 스택

실행 컨텍스트는 스택 자료구조로 관리된다

:이를 실행 컨텍스트 스택이라고 한다.

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

foo(); // 6 출력 

실행 컨텍스트 순서 :

• 순서 펼치기
• 1 전역 코드 평가
• 1 const x 선언문 전역 스코프 등록
• 2 function foo 함수 선언 전역 스코프 등록
• 2 전역 코드 실행
• 1 x = 1; 변수 할당
• 2 foo(); 함수 호출 실행
• 3 함수 코드 평가
• 1 const y 선언문 지역 스코프 등록
• 2 function bar 함수 선언 지역 스코프 등록
• 4 함수 코드 실행
• 1 y = 2; 변수 할당
• 2 bar(); 함수 호출
• 5 함수 코드 평가 (내부 함수 bar)
• 1 const z 변수 지역 스코프 등록
• 6 함수 코드 실행 (내부 함수 bar)
• 1 z = 3; 변수 할당
• 2 console.log( x + y + z) 메서드 호출

1 전역 코드의 평가와 실행

자바스크립트 엔진은 전역 코드를 평가하여 실행 컨텍스트를 생성하고, 실행 컨텍스트 스택에 푸시한다. 이후 전역 코드가 실행되기 시작하여 변수 x에 값이 할당되고 함수 foo를 호출한다.

2 foo 함수 코드의 평가와 실행

전역 함수 foo가 호출되면 전역 코드의 실행은 일시 중단되고, 코드의 제어권이 foo 함수 내부로 이동한다. 자바스크립트 엔진은 foo 함수 코드를 평가하여 실행 컨텍스트를 생성하고, 실행 컨텍스트 스택에 푸시한다. 이후 foo 함수 코드가 실행되면서 중첩 함수 bar가 호출된다.

3 bar 함수 코드의 평가와 실행

중첩 함수 bar가 호출되면 foo 함수 코드의 실행은 일시 중단되고 코드의 제어권이 bar함수 내부로 이동한다. 또다시 마찬가지로 bar 함수 코드를 평가하여 실행 컨텍스트를 생성, 실행 컨텍스트 스택에 푸시한다. 이 때 bar 함수의 지역 변수 z가 bar 함수 실행 컨텍스트에 등록된다. 이후 bar 함수 코드가 실행되기 시작하여 지역변수 z에 값이 할당되고, console.log 메서드를 호출한 뒤, bar 함수는 종료된다.

4 foo 함수로 복귀

bar 함수가 종료되면 제어권은 다시 foo 함수로 이동한다. 이때 bar 함수 실행 컨텍스트를 실행 컨텍스트에서 팝하여 제거한다. 이후 foo 함수는 더 이상 실행할 코드가 없으므로 종료된다.

5 전역 함수로 복귀

foo 함수가 종료되면 코드 제어권은 다시 전역 코드로 이동한다. 이때 자바스크립트 엔진은 실행 컨텍스트 스택에서 foo 함수를 팝하여 제거한다. 이후 전역 코드에도 아무것도 실행할 것이 남지 않아 전역 실행 컨텍스트도 팝되어 실행 컨텍스트 스택에는 아무것도 남아있지 않게 된다. 이처럼 실행 컨텍스트 스택은 코드의 실행 순서를 관리한다.

• 소스코드가 평가되면 실행 컨텍스트가 생성되고, 실행 컨텍스트 스택 최상위에 쌓인다.
• 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트이다.
• 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트를 running execution context라 부른다.

요약

• 실행 컨텍스트는 스택의 push / pop으로 순서를 관리한다.
• 스택의 가장 위에 있는 실행 컨텍스트는 실행 중인 실행 컨텍스트
• 후입선출로 관리됨 Last In First Out

렉시컬 환경

💡 렉시컬 환경은 스코프와 식별자를 관리한다

: 실행 컨텍스트 스택 → 코드의 실행 순서 관리

: 렉시컬 환경이란? 함수가 정의된 곳에서 상위 스코프를 결정한다 (정적 스코프)

const x = 1;

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

렉시컬 환경은 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다. 즉, 렉시컬 환경은 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할을 하는 렉시컬 스코프의 실체다.

실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다.

렉시컬 환경은 다시 EnvironmentRecord와 OuterLexicalEnvironmentReference 두 컴포넌트로 구성된다.