TIL-2024.02.21 - JS - 실행 컨텍스트-1

 

------- 실행 컨텍스트:

 

정의:

• 실행 컨텍스트는 소스코드를 실행하는 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
• 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 이를 통해 실행되고 관리
• 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리 && 코드 실행 순서는 실행 컨텍스트 스택으로 관리

 

유형:

• 전역 실행 컨텍스트(Global Execution Context): 코드가 처음 실행될 때 생성되는 실행 컨텍스트입니다.
  전역 스코프와 전역 변수, 전역 함수를 관리합니다.
• 함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성됩니다.
  각 함수 호출에 대해 고유의 실행 컨텍스트가 생성되며, 해당 함수의 지역 변수, 매개변수, 반환 값 등을 관리합니다.

 

작동 원리:

• JS 엔진은 소스코드를 2개의 과정, [소스코드의 평가] 와 [소스코드의 실행] 과정으로 나눈다. 
• 소스코드의 평가 (컴파일): 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행하여 생성된 변수나 함수를 키로 실행 컨텍스트가 관리하는 스코프에 등록
• 소스코드의 실행 (런타임): 평가 과정이 끝나면, 소스코드가 순차적으로 실행되면서, 소스 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 추적/검색해서 취득, 그리고 이에 따른 결과를 다시 실행 컨텍스트가 관리

 

 

예제로 이해하는 실행 컨텍스트: 

 

// 전역 변수 선언
const x = 1; 
const y = 2;

// 함수 정의
function foo(a){
	// 함수의 지역 변수 선언
	const x = 10;
	const y = 20;
    
	// 매서드 호출
	console.log(a + x + y); // 130
}

// 함수 호출 
foo(100)

// 매서드 호출 
console.log(x+y); // 3

 

 

1.  전역 코드 평가:
   - 전역 코드 평가 과정을 거치며 전역 코드를 실행하기 위해 선언문만 먼저 실행 (const 선언, func foo 선언)
   - 이 결과 생성된 전역 변수와 전역 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록
   
   
2.  전역 코드 실행:
   - 전역 코드 평가 과정이 끝나면 런타임이 시작되어 전역 코드가 순차적으로 실행되며 전역 변수에 값이 할당되고 함수가 호출
   - 함수가 호출되면 순차적으로 실행되던 전역 코드의 실행이 일시 중단되며 코드 실행 순서를 변경하여 함수 내부로 이동 
   
   
3.  함수 코드 평가:
   - 함수 내부로 진입하면 함수 내부 코드 평가 과정을 거치며 함수코드 실행하기 위한 준비
   - 매개변수와 지역 변수 선언문이 먼저 실행되며 생성된 매개변수와 지역 변수가 실행 컨텍스트가 관리하는 지역 스코프에 등록
   
   
4.  함수 코드 실행:
   - 함수 코드 평가가 끝나면 런타임이 시작되어 함수코드가 순차적으로 실행
   - console.log(a+x+y) 매서드가 호출되면, 먼저 식별자인 console을 스코프 체인을 통해 검색
   - 이를 위해 함수 코드의 지역 스코프는 상위 스코프인 전역 스코프와 연결되어있어야됨 
   - 하지만, console 식별자는 스코프 체인에 등록되어 있지 않고 전역 객체에 프로퍼티인데, 이는 전역 객체의 프로퍼티가 마치 전역 변수처럼 전역 스코프에서 검색 가능
   - log 프로퍼티를 console 객체 프로토 타입 체인을 통해 검색하고, console.log 메서드에 전달된 인수를 평가.
   - 인수의 각 식별자 (a,x,y)는 스코프 체인을 통해 검색.
   -  console.log 매서드의 실행이 종료되면 함수 코드 실행 과정이 종료되고 함수 호출 이전으로 되돌아가 전역 코드 제개

 

 

 > 이처럼 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하는데 이를 관리하는 것이 실행 컨텍스트