Excution context

소스코드의 평가와 실행

자바스크립트 엔진은 소스코드의 평가/실행 과정으로 나누어 처리한다. - 소스코드 평가 과정 실행 컨택스트를 생성한다. 렉시컬 환경의 (환경 레코드)스코프에 식별자를 키로 등록한다.

• 소스코드 실행 과정(런타임)은 식별자의 참조를 스코프에서 검색한다.

실행 컨택스트

실행 컨택스트는 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 매커니즘이다.

• 식별자와 스코프는 실행 컨택스트의 렉시컬 환경으로 관리한다.
• 코드 실행 순서는 실행 컨택스트 스택으로 관리된다.
• 실행 컨택스트는 LexicalEnvironment (환경 레코드/외부 렉시컬 환경에 대한 참조), VariableEnvironment로 구성된다.

렉시컬 환경

• 저장소 역할.
• 환경 레코드 : 식별자, 식별자에 바인딩된 값을 관리하는 저장소.
• 외부 렉시컬 환경에 대한 참조 : 상위 스코프를 가리킨다. 실행 컨텍스트를 생성한 소스코드를 포함하는 상위 코드의 렉시컬 환경을 말한다. 외부 렉시컬 환경에 대한 참조를 통해 스코프 체인을 구현한다.
• 렉시컬 환경 순서

1. (키와 값을 갖는 객체 형태) 스코프를 생성한다.
2. 식별자에 키를 등록/바인딩 된 값을 관리.

실행 컨텍스트 스택

• 실행 컨텍스트 스택은 코드의 실행 순서를 관리.
• 소스 코드 평가 -> 실행 컨텍스트 생성 -> 실행 컨택스트 스택 최상위에 쌓인다.
• 실행 중인 실행 컨텍스트 : 최상위에 존재하는 실행 컨텍스트를 현재 실행 중인 실행 컨텍스트라고 한다.

const x = 1; // 전역 코드를 평가 -> 전역 실행 컨택스트 생성 -> 실행 컨택스트 스택에 전역 실행 컨택스트를 푸시 -> x와 foo는 전역 실행 컨택스트에 등록 -> 실행 되기 시작해 x에 값 할당, foo가 호출

function foo () { // foo 가 호출되면 제어권이 foo 함수 내부로 이동- > 함수 코드를 평가하여 foo 함수 실행 컨택스트 생성 -> 실행 컨택스트를 스택에 푸시 -> 지역 변수 y, bar 가 foo 함수 실행 컨텍스트에 등록 -> 실행 되기 시작해 y에 값 할당, bar가 호출
  const y = 2;
  
  function bar () { // bar 가 호출되면 제어권이 bar 함수로 이동 -> bar 함수 실행 컨택스트 생성 -> 실행 컨택스트 스택에 푸시 -> 지역 변수 z, bar 함수 실행 컨텍스트 등록 -> 코드 실행 되어 변수 z 값이 할당되고, console.log 메소드 호출 -> bar 함수 종료 
     const z = 3;
     console.log(x + y + z);
  }
  // bar 함수 종료되면 제어권은 foo 함수로 이동 -> bar 함수 실행 컨텍스트를 실행 컨텍스트 스탭에서 팝하여 제거 -> foo는 실행 할 코드가 없어서 종료
  bar()
}
//  foo가 종료되어 제어권은 전역 코드로 이동 -> foo 함수 실행 컨텍스트를 실행 컨텍스트 스탭에서 팝하여 제거 -> 전역 실행 컨텍스트도 실행 컨텍스트 스탭에허 팝 하여 제거 -> 실행 컨텍스트 스택에서 아무것도 남아있지 않음
foo();

Detail

• 스코프 체인 : 현재 실행 중인 실행 컨택스트의 렉시컬 환경에서 시작하여 외부 렉시컬 환경에 대한 참조로 이어지는 렉시컬 환경의 연속이다.

• 선언적 환경 레코드 : 블록이 바로 선언적 환경 레코드다. 그래서const, let은 전역 객체의 프로퍼티가 되지 않음.

• 객체 환경 레코드 : 객체 환경 레코드에 연결된 BindingObject를 통해 전역 객체의 프로퍼티와 메소드가 된다.

var x = 3;
function foo () {}

window.x
window.foo

reference
https://velog.io/@beanlove97/this