[Javascript] 실행 컨텍스트 (2)

실행 컨텍스트의 생성과 식별자 검색 과정 (2)

var x = 1;
const y = 2;

function outer (a) {
	var x = 3;
    const y = 4;
    
    function inner (b) {
    	const z = 5;
        console.log(a + b + x + y + z);
    }
    inner(10);
}

outer(20); // 42

Step 1 ~ 3 까지 진행

Step 4. outer 함수 코드 평가

1. 함수 실행 컨텍스트 생성

• outer 함수 실행 컨텍스트를 생성한다.
• 함수 렉시컬 환경이 완성된 다음 콜 스택에 푸시된다.

2. 함수 렉시컬 환경 생성

• outer 함수 렉시컬 환경을 생성하고 outer 함수 실행 컨텍스트에 바인딩

2-1) 함수 환경 레코드 생성

• 함수 환경 레코드에 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수를 등록하고 관리한다.

2-2) this 바인딩

• 함수 환경 레코드의 [[ThisValue]] 내부 슬롯에 this가 바인딩된다.
• outer 함수는 일반 함수로 호출되었으므로 this는 전역 객체를 가리킨다.

2-3) 외부 렉시컬 환경에 대한 참조 결정

• outer 함수 정의는 전역 코드 평가 시점에 평가되므로 외부 렉시컬 환경에 대한 참조에는 전역 렉시컬 환경의 참조가 할당된다.

Step 5. outer 함수 코드 실행

• 런타임이 시작되어 outer함수의 소스코드가 순차적으로 실행되기 시작한다.
• 매개변수에 인수가 할당되고, 변수 할당문이 실행되어 지역 변수 x, y에 값이 할당된다.
• 그리고 함수 inner가 호출된다.

Step 6. inner 함수 코드 평가

• inner 함수가 호출되면 inner 함수 내부로 코드의 제어권이 이동, 이후 inner 함수 코드를 평가하기 시작한다.

Step 7. inner 함수 코드 실행

• inner 함수의 소스코드가 순차적으로 실행되기 시작한다.
• 이후 console.log(a + b + x + y + z);가 실행된다.

1. console 식별자 검색
2. log 메서드 검색
3. 표현식 a + b + x + y + z의 평가
4. console.log 메서드 호출

Step 8. inner 함수 코드 실행 종료

• console.log 메서드가 호출되고 종료하면 더는 실행할 코드가 없으므로 inner 함수 코드의 실행이 종료된다.
• 콜 스택에서 inner 함수 실행 컨텍스트가 팝되어 제거되고 outer 실행 컨텍스트가 실행 중인 실행 컨텍스트가 된다.

inner 함수 실행 컨텍스트가 소멸되었다 하더라도 만약 inner 함수 렉시컬 환경을 누군가 참조하고 있다면 inner 함수 렉시컬 환경은 소멸하지 않는다.

Step 9. outer 함수 코드 실행 종료

• outer 함수 실행 컨텍스트가 팝되어 제거되고 전역 실행 컨텍스트가 실행중인 실행 컨텍스트가 된다.

Step 10. 전역 코드 실행 종료

• 더는 실행할 전역 코드가 없으므로 전역 실행 컨텍스트 스택도 팝되어 제거되면 콜 스택에는 아무것도 남아있지 않게 된다.

---

실행 컨텍스트와 블록 스코프

let x = 1;

if (true) {
	let x = 10;
    console.log(x); // 10
}

console.log(x); // 1

1. if 문의 코드 블록이 실행되면 if 문의 코드 블록을 위한 블록 레벨 스코프를 생성한다.

2. 선언적 환경 레코드를 갖는 렉시컬 환경을 새롭게 생성하여 기존의 전역 렉시컬 환경을 교체한다.

3. 새롭게 생성된 if 문의 코드 블록을 위한 렉시컬 환경의 외부 렉시컬 환경에 대한 참조는 if 문이 실행되기 이전의 전역 렉시컬 환경을 가리킨다.
   

4. if 문 코드 블록의 실행이 종료되면 if 문의 코드 블록이 실행되기 이전의 렉시컬 환경으로 되돌린다.

• 이는 if 문뿐 아니라 블록 레벨 스코프를 생성하는 모든 블록문에 적용된다.

• for 문의 변수 선언문에 let 키워드를 사용한 for 문은 코드 블록이 반복해서 실행될 때 마다 코드 블록을 위한 새로운 렉시컬 환경을 생성한다.

• 만약 for 문의 코드 블록 내에서 정의된 함수가 있다면 이 함수의 상위 스코프는 for 문의 코드 블록이 생성한 렉시컬 환경이다.

• for 문의 코드 블록이 반복해서 실행될 때마다 독립적인 렉시컬 환경을 생성하여 식별자의 값을 유지한다.