TIL-2024.02.23 - JS - 실행 컨텍스트-2. 실행 컨텍스트 스택과 렉시컬 환경

 

------- 실행 컨텍스트 스택  ?

설명:

• 코드의 실행 순서를 스택구조(LIFO)로 관리
• 실행에 따라 실행 컨텍스트가 추가되고 제거된다. 

ㅅ

 

예제:

 

const x = 1;

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

foo(); // 6

 

1.  전역 코드의 평가와 실행:
   - 전역 코드를 평가해 전역 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시
   - 전역 변수 X 와 전역 함수 foo가 전역 실행 컨텍스트에 등록
   - 이후 전역 코드가 실행되기 시작하여, 전역 변수 X에 값이 할당되고 전역 함수 foo가 호출
   
   
2. foo 함수 코드의 평가와 실행
   - 전역 함수 foo가 호출되면 전역 코드의 실행은 일시 중단되고, 제어권이 foo 함수 내부로 이동
   - JS 엔진은 foo 함수 내부의 함수 코드를 평가해 foo 함수 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 푸시. 
   - foo 함수의 지역 변수 y 와 중첩함수 bar 가 foo 함수 실행 컨텍스트에 등록
   - foo 함수 코드가 실행되기 시작하여 값들이 할당되고 중첩함수 bar 가 호출
   
   
3. bar 함수 코드의 평가와 실행
   - bar 호출되면 foo 함수 코드 실행이 일시 중단되고, 코드 제어권이 bar 함수 내부로 이동
   - JS 엔진은 bar 함수 내부 코드를 평가해 bar 함수 실행 컨텍스트를 생성하고 실행 컨텍스트 스택에 이동
   - 이때 bar 함수 지역 변수 z가 bar 함수 실행 컨텍스트에 등록
   - bar 함수 코드가 실행되기 시작하여 값들이 할당되고 console.log 매서드 호출 후, bar 함수 종료
   
   
4. foo 함수 코드로 복귀 
   - bar 함수 종료되면 제어권 다시 foo 함수로 이동
   - JS 엔진은 bar 함수 실행 컨텍스트를 실행 컨텍스트 스택에서 팝하여 제거 후, foo  함수 종료
   
   
5. 전역 코드로 복귀 
   - foo 함수 종료 시, 제어권은 다시 전역 코드로 이동하며, foo함수 실행 컨텍스트를 실행 컨텍스트 스택에서 제거
   - 더 이상 실행될 게 없는 전역 실행  컨텍스트도 실행 컨텍스택에서 팝되어 프로세스 종료 

• 이처럼, 실행 컨텍스트 스택은 코드의 실행 순서를 관리
• 실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 [실행 중인 실행 컨텍스트- running execution context]

 

 

 

------- 렉시컬 환경 ?

설명:

• 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트
• 실행 컨텍스트 스택이 코드의 실행 순서를 관리하면, 렉시컬 환경은 스코프와 식별자를 관리
  
  

• 렉시컬 환경은 키와 값을 갖는 객체 형태의 스코를 생성 > {식별자: 식별자에 바인딩된 값}
• 스코프를 구분해 식별자를 등록하고 관리하는 저장소 느낌
  
  

구성:

1. 환경 레코드:
   - 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소
   - 환경 레코드는 소스코의 타입에 따라 관리하는 내용에 차이
   
   
2. 외부 레시컬 환경에 대한 참조:
   - 외부 렉시컬 환경에 대한 참조는 상위 스코프를 의미
   - 외부 렉시컬 환경, 즉 해당 실행 컨텍스트를 생성한 코드를 포함한 상위 코드의 렉시컬 환경을 의미.
   - 외부 렉시컬 환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현.