[자바스크립트 중고급] Execution Context

Execution Context

• 함수가 실행되는 영역, 묶음
• 함수 코드를 실행하고 실행 결과를 저장한다.
• 스펙상의 사양이다.
• 함수를 호출하면 엔진은 실행 콘텍스트를 생성하고 실행 콘텍스트 안은로 이동한다.

실행 콘텍스트 실행 단계

• 준비 단계
• 초기화 단계
• 코드 실행 단계

Execution Context 생성 시점

• 실행 가능한 코드를 만났을 때
• 여기서 실행 가능한 코드란
  • 함수 코드, 글로벌 코드, eval 코드를 가리킨다.

코드 유형을 분리한 이유

• 실행 콘텍스트에서 처리 방법과 실행 환경이 다르기 때문이다.
• 함수 코드: 렉시컬 환경
• 글로벌 코드: 글로벌 환경
• eval 코드: 동적 환경

실행 콘텍스트의 상태 컴포넌트

• 실행 콘텍스트 상태를 위한 오브젝트이다.
• 실행 콘텍스트 안에 생성된다.
• 상태 컴포넌트 유형
  • Lexical Environment Component(LEC)
  • Variable Environment Component(VEC)
  • This Binding Component(TBC)

렉시컬 환경 컴포넌트

• 함수와 변수의 식별자 해결을 위한 환경을 설정한다.
• 함수 초기화 단계에서 해석한 함수와 변수를 {name: value} 형태로 저장한다.
  • 이름으로 함수와 변수를 검색할 수 있게 된다.
• 함수 밖의 함수와 변수 참조 환경 설정
  • 함수 밖의 함수와 변수를 사용할 수 있게 된다.

렉시컬 환경 컴포넌트 구성

• function, with, try-catch에서 구성된다.
• 컴포넌트 구성
  • 환경 레코드 (ER: Environment Record)
  • 외부 렉시컬 환경 참조 (OLER: Outer Lexical Envrionment Reference)

렉시컬 환경 컴포넌트 설정

• 환경 레코드에 함수 안의 함수와 변수를 기록한다.
• 외부 렉시컬 환경 참조에 function 오브젝트의 [[Scope]]를 설정한다.
• 따라서 함수 안과 밖의 함수와 변수를 사용할 수 있게 된다.

외부 렉시컬 환경 참조

• 스코프와 실행 중인 함수가 Context 혀애이므로 스코프의 변수와 함수를 별도의 처리 없이 즉시 사용할 수 있다.
• 실행 콘텍스트에서 함수 안과 밖의 함수, 변수를 사용할 수 있으므로 함수와 변수를 찾기 위해 실행 콘텍스트를 벗어나지 않아도 된다.

변수 환경 컴포넌트

• 실행 콘텍스트 초기화 단계에서 렉시컬 환경 컴포넌트와 같게 설정된다.
• 이렇게 하는 이유는 초깃값을 복원할 때 사용하기 위함이다.
• 함수 코드가 실행되면 실행 결과를 렉시컬 환경 컴포넌트에 설정한다. 초깃값이 변하게 되므로 이를 유지하기 위한 것이다.

환경 레코드

환경 레코드 구성

• 환경 레코드를 구분하는 이유
  • 기록 대상에 따라 다르기 때문이다.
• 선언적 환경 레코드
  • DER: Declarative Environment Record
  • function, 변수, catch 문에서 사용한다.
• 오브젝트 환경 레코드
  • OER: Object Envirionment Record
  • 글로벌 함수와 변수, with문에서 사용한다.
  • 정적이 아니라 동적이기 때문이다.

글로벌 환경(Global Environment)

• 글로벌 오브젝트에서 사용한다.
• 렉시컬 환경 컴포넌트와 형태가 같다.
• 동적으로 함수와 변수를 바인딩한다.
  • 함수에서 var 키워드를 사용하지 않고 변수를 선언하면 글로벌 오브젝트에 설정되기 때문이다.
  • 이런 이유로 오브젝트 환경 레코드를 사용한다.
• 외부 렉시컬 환경 참조 값은 null이다.

this 바인딩 컴포넌트

• 목적
  • this로 함수를 호출한 오브젝트의 프로퍼티에 액세스
  • 예: this.propertyName
• 액세스 매커니즘
  • obj.book() 형태에서
  • this로 obj를 참조할 수 있도록
  • this 바인딩 컴포넌트에 obj 참조를 설정한다.
• obj의 프로퍼티가 변경되면 동적으로 참조한다.
  • 설정(할당)이 아닌 참조이기 때문이다.

호출 스택(call stack)

• 실행 콘텍스트의 논리적 구조
• First In Last Out 순서
  • 함수가 종료되면 스택에서 빠져나온다.
• 가장 아래에는 글로벌 오브젝트의 함수가 위치한다.
• JS는 싱글 스레드이기 때문에 이런 논리가 가능하다.

파라미터 매핑

함수 호출

• 함수가 호출되면 3개의 파라미터 값을 실행 콘텍스트로 넘겨 준다.
  • 함수를 호출한 오브젝트
  • 함수 코드
  • 호출한 함수의 파라미터 값
• 함수를 호출한 오브젝트 값을 this 바인딩 컴포넌트에 설정하여 this로 참조한다.
• 함수 코드는 function 오브젝트의 [[Code]]에 설정되어 있다.
• 호출한 함수의 파라미터 값을 호출된 함수의 Argument 오브젝트에 설정한다.

파라미터 값 매핑

• 호출한 함수에서 넘겨 준 파라미터의 값을 호출된 함수의 파라미터 작성 순서에 맞추어 값을 매핑하는 것
• 엔전 처리 관점에서는 실행 콘텍스트로 넘겨준 파라미터 값과 function 오브젝트의 [[FormalParameters]]에 작성된 이름에 값을 매핑하고 결과를 선언적 환경 레코드에 설정하는 것이다.