실행 컨텍스트

💡 렉시컬 환경 - 식별자와 스코프 관리

💡실행 컨텍스트 스택 - 코드 실행 순서 관리

 

 

실행 컨텍스트

 

자바스크립트의 동작 원리 개념을 통해 아래 내용을 이해할 수 있다.

• 스코프 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식
• 호이스팅이 발생하는 이유
• 클로저 동작 방식
• 태스크와 큐와 함께 동작하는 이벤트 핸들러
• 비동기 처리의 동작 방식

 

 

소스 코드의 타입

 

4가지 타입 코드는 실행 컨택스트를 생성한다.

 

4가지로 구분하는 이유는?

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

 

전역 코드

• 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다.
• var 키워드, 함수선언문

 

함수 코드

• 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다.
• 지역 스코프를 생성하고 지역변수, 매개변수, arguments 객체를 관리

 

eval 코드

• 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스 코드
• strict mode(엄격 모드)에서 자신만의 독자적인 스코프 생성

 

모듈 코드

• 모듈 내부의 함수, 클래스 등의 내부 코드는 포함되지 않는다.
• 모듈별로 독립적인 스코프 생성

 

 

소스 코드의 평가와 실행

 

 

 

1. 소스 코드의 평가 (선언문)
   • 실행 컨텍스트를 생성
   • 변수, 함수 등의 선언문만 먼저 실행
   • 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록
   • 렉시컬 환경의 환경 레코드 (실행 컨텍스트가 관리하는 스코프)
     
     
2. 소스 코드의 실행 (선언문 이외의 문)
   • 소스 코드 평가 과정이 끝나면 선언문을 제외한 소스 코드가 순차적으로 실행되기 시작 (런타임 시작)
   • 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득
   • 변수 값의 변경 등 소스 코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록된다.
     
     

 

 

실행 컨텍스트의 역할

 

렉시컬 환경

• 식별자와 스코프 관리
• 코드가 어디에 실행되며 주변에 어떤 코드가 있는지를 렉시컬 환경이라고 부른다.

 

실행 컨텍스트 스택

• 코드 실행 순서 관리

 

 

렉시컬 환경

var x = 1;
const y = 2;

function foo (a) {
	var x = 3;
	const y = 4;

	function bar (b){
		const z = 5;
		console.log(a + b + x + y + z);
	}
	bar(10);
}

foo(20); // 42