[자바스크립트] 실행컨텍스트

📌 실행 컨텍스트(Execution Context)

식별자와 스코프, 코드 실행 순서를 관리하기 위해 구현한 내부 메커니즘

식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고,
코드 실행 순서는 실행 컨텍스트 스택으로 관리합니다.

실행 컨텍스트 스택

실행 컨텍스트는 스택 자료구조로 관리됩니다.
코드가 실행되면 해당 코드의 실행 컨텍스트가 생성되어 스택에 push되고, 실행이 종료되면 pop 됩니다.

렉시컬 환경

식별자와 스코프를 관리하는 자료구조입니다.

렉시컬 환경을 구성하는 2가지

• 환경레코드
  • 스코프에 대한 식별자와 바인딩된 값을 관리합니다.
• 외부 렉시컬 환경에 대한 참조
  • 상위 스코프를 가리킵니다
  • 스코프 체인 = 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트로 구현되는 것

💡 실행 컨텍스트 생성 과정

let x = 1;

function first(a){
	const x = 2;
	const y = 3;
	
	function second(b){
		const z = 4;
		console.log(a + b + x + y + z); // 39

	}
	second(10);

}

first(20);

🚀 간단하게

코드 실행 전 평가 단계
1. 실행 컨텍스트 생성
2. 렉시컬 환경 생성(환경레코드:식별자 등록 관리, 외부 렉시컬 환경 참조:상위 스코프)

코드 실행
1. 식별자 결정(현재 실행중인 실행 컨텍스트의 렉시컬 환경에서부터 상위 스코프로 순차적으로 검색함)

📚 상세하게

1. 전역 객체 생성
2. 전역 코드 평가
   1. 전역 실행 컨텍스트 생성
   2. 전역 렉시컬 환경 생성
      1. 전역 환경 레코드 생성
         1. 객체 환경 레코드 생성
         2. 선언적 환경 레코드 생성
      2. this 바인딩
         1. [[GlobalThisValue]] 내부 슬롯에 this 바인딩
         2. 일반적으로 전역 코드에서 this는 전역 객체를 가리킴
      3. 외부 렉시컬 환경에 대한 참조 결정
3. 전역 코드 실행
   1. 식별자 결정
      1. 현재 실행 중인 실행 컨텍스트의 렉시컬 환경에서 검색
      2. 식별자를 검색할 수 없으면, 외부 렉시컬 환경에 대한 참조가 가리키는 렉시컬 환경(상위 스코프)으로 이동하여 식별자 검색
4. first 함수 코드 평가
   1. 함수 실행 컨텍스트 생성
   2. 함수 렉시컬 환경 생성
      1. 함수 환경 레코드 생성
         1. 매개변수, arguments 객체, 함수 내부에서 선언한 지역 변수와 중첩 함수 등록하고 관리
      2. this 바인딩
         1. [[ThisValue]] 내부 슬롯에 this 바인딩
         2. 일반 함수로 호출되었으므로 this는 전역 객체를 가리킴
      3. 외부 렉시컬 환경에 대한 참조 결정
         1. first 함수 정의가 평가된 시점에 실행 중인 실행 컨텍스트의 렉시컬 환경의 참조가 할당된다
         2. 함수가 어디서 호출됐는지가 아니라 어디에서 정의했는지에 따라 상위 스코프가 결정됨
5. first 함수 코드 실행
6. second 함수 코드 평가
   1. first 함수 코드 평가와 같음
7. second 함수 코드 실행
8. second 함수 코드 실행 종료
   1. 실행 컨텍스트 스택에서 제거
   2. 실행 컨텍스트 스택에서 제거되었어도 값이 누군가에 의해 참조 되었다면 렉시컬 환경은 소멸되지 않는다
9. first 함수 코드 실행 종료
10. 전역 코드 실행 종료

블록 레벨 스코프

❗️블록 스코프에 대한 실행 컨텍스트는 생성되지 않습니다

전역 코드에서 블록 스코프가 실행된다면 블록 렉시컬 환경이 생성되고 전역 실행 컨텍스트의 렉시컬 환경은 블록 렉시컬 환경을 참조합니다.

블록 렉시컬 환경의 외부 렉시컬 환경 참조는 코드 블록을 생성한 렉시컬 환경입니다.