[4주차 스터디] 23장-실행 컨텍스트

실행 컨텍스트

실행 컨텍스트를 바르게 이해 한다면 알 수 있는 것들

1. 자바스크립트의 스코프 기반 식별자와 식별자 바인딩을 관리하는 방식
2. 호이스팅이 발생하는 이유
3. 클로저의 동작 방식
4. 태스크 큐와 함께 동작하는 이벤트 핸들러
5. 비동기 처리의 동작 방식

소스코드의 타입

• ECMAScript 사양은 소스코드를 4가지 타입으로 구분, 이때 소스크도는 실행 컨텍스트를 생성

전역 코드(global code)	전역에 존재하는 소스코드. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함 X
함수 코드(function code)	함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함 X
eval 코드(eval code)	빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드.
모듈 코드(module code)	모듈 내부에 존재하는 소스코드. 모듈 내부 함수, 클래스 등의 내부 코드는 포함 X

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

1. 전역 코드

• 전역 변수 관리를 위해 최상위 스코프인 전역 스코프 생성
• var로 선언된 전역 변수와 함수 선언 문으로 정의된 전역 함수를 전역 객체에 바인딩

2. 함수 코드

• 함수 코드는 지역 스코프를 생성
• 지역변수, 매개변수, argument객체 관린
• 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인으로 연결

3. eval코드

• strict mode에서 자신만의 독자적인 스코프를 생성

4. 모듈 코드

• 모듈별로 독릭적인 모듈 스코프를 생성

각 타입별로 소스코드가 평각되면 각각 다른 실행 컨텍스트 생성

소스코드의 평가와 실행

• 자바스크립트 엔진 은 2개의 과정으로 나누어 처리
• 소스코드 평가 와 소스코드의 실행 과정으로 나누어 처리
  
  출처 : https://publizm.github.io

소스코드 평가

• 실행 컨텍스트를 생성하고 변수, 함수 등의 선언문만 먼저 실행
• 선언문 실행하여 변수 나 함수 식별자가 생성됨
• 생성된 식별자를 키로 실행 컨텍스트가 관리하는 스코프에 등록

  실행컨텍스트가 관리하는 스코프를 렉시컬 환경의 환경레코드 라고 함

소스코드 실행

• 평가 과정 끝난 후 소스코드가 순차적으로 실행 (런타임)
• 이때 소스코드 실행에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득
• 실행된 결과는 다시 실행 컨텍스트에 등록

실행 컨텍스트의 역할

• 실행 컨텍스트에서 코드를 평가하고 실행 하는 과정

  1. 전역 코드 평가

     전역 변수와 전역 함수는 전역 스코프에 등록된다.

     var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티가 된다.

  2. 전역 코드 실행

     런타임에서 전역 변수에 값이 할당되고 함수가 호출 된다.

     함수가 호출 도면 전역 코드의 실행을 일시 중단하고 함수 내부로 진입

  3. 함수 코드 평가

     함수 호출에 의해 코드 실행이 함수 내부로 진입하면 함수 실행 이전에 평가 과정 거침

     매개 변수와 지역 변수 선언문이 평가되고 지역 스코프(함수 실행컨텍스트)에 등록된다.

     함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체도 생성되어 지역 스코프에 등록된다.

  4. 함수 코드 실행

     함수 내부의 코드가 순차적으로 실행

     매개변수와 지역변수에 값이 할당되고 함수 내부에 메서드가 있을 시 호출 됨( 이 메서드 역시 스코프 체인 검색 및 코드 평가, 실행과정 거침)
     함수 코드 실행 과정 종료 후 함수 호출 이전으로 돌아가 전역 코드를 실행

정리

• 코드가 실행 되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요 (이를 관리하는 것이 실행 컨텍스트)
• 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공, 코드의 실행 결과를 실제로 관리하는 영역
• 식별자를 등록하고 관리하는 스코프와 실행 순서 관리를 구현한 메커니즘
• 식별자와 스코프는 렉시컬 환경으로 관리
• 실행 순서는 실행 컨텍스트 스택으로 관리

실행 컨텍스트 스택

• 자바스크립트 엔진은 먼저 전역 코드를 평가하여 전역 컨텍스트를 생성한다.

• 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

• 이때 생성된 실행 컨텍스트는 스택(stack)자료구조로 관리된다. 이를 실행 컨텍스트 스택이라고 부른다.

• 동작과정

  1. 전역 코드의 평가와 실행
  2. 함수 코드의 평가와 실행
  3. (중첩함수 있을 경우) 중첩함수의 평가와 실행
  4. 중첩 함수 종류후 함수코드로 복귀
  5. 함수 코드 종료 후 전역 코드로 복귀

• 실행 컨텍스트 스택은 코드의 실행 순서를 관리

• 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트

렉시컬 환경

• 렉시컬 환경은 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조
• 스코프와 식별자를 관리
• 정리 : 스코프를 구분하여 식별자를 등록하고 관리하는 저장소 역할

렉시컬 환경은 두 개의 컴포넌트로 구성

1. 환경 레코드(Environment Record)
   • 현재 스코프에 포함된 식별자를 등록하고 값을 관리하는 저장소
2. 외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)
   • 상위 코드의 렉시컬 환경을 말함, 중첩 함수 떠올리면 쉽게 이해 가능, 외부 렉시컬 환경 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구현

실행 컨텍스트의 생성과 식별자 검색 과정

• 전역코드 평가 이전에 전역 객체가 먼저 생성 됨

전역 코드 평가 과정

• 전체 동작 순서
  1. 전역 실행 컨텍스트 생성
  2. 전역 렉시컬 환경 생성
     2.1. 전역 환경 레코드 생성
     2.1.1. 객체 환경 레코드 생성
     2.1.2. 선언적 환경 레코드 생성
     2.2. this 바인딩
     2.3. 외부 렉시컬 환경에 대한 참조 결정
• 전역 코드 평가 이후 전역 코드 실행 하고 함수 코드 평가, 실행

하나 씩 살펴보면

1. 전역 실행 컨텍스트 생성

• 비어있는 실행 컨텍스트 스택에 전역 실행 컨텍스트가 생성

2. 전역 렉시컬 환경 생성

• 전역 렉시컬 환경을 생성하고 전역 실행 컨텍스트에 바인딩 함

• 렉시컬 환경은 2개의 컴포넌트로 구성(환경 레코드, 외부 렉시컬 참조)

  2.1. 전역 환경 레코드 생성

  • 전역 변수 관리 하는 전역 스코프 , 전역 빌트인 프로퍼티, 함수, 표준 빌트인 객체 제공

  • 객체 환경 레코드와 선언적 환경 레코드로 구성

    2.1.1 객체 환경 레코드 생성

    • BindingObject 와 연결 (전역 객체)

    • var키워드로 선언한 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다.

      2.1.2 선언적 환경레코드 생성

    • let, const 키워드로 선언한 전역 변수(함수 표현식 포함)는 선언적 환경 레코드에 등록되고 관리

    • 여기서 런타임에 초기화 되기 전까지 일시적 사각지대(TDZ: Temporal Dead Zone) 생김

    2.2. this 바인딩

  • 전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩됨

  • 전연 코드에서 this는 전역 객체를 가리킴

    • this 바인딩은 전역 환경 레코드와 함수 환경 레코드에 존재

    2.3. 외부 렉시컬 환경에 대한 참조 결정

  • 현재 평가 중인 소스코드를 포함하는 외부 소스크드의 렉시컬 환경, 즉 상위 스코프를 가리킨다.

  • 이를 통해 스코프 체인 구현

  • 전역 코드는 최상위 이므로 외부 렉시컬 환경에 대한 참조는 null

3. 전역 코드 실행

• 변수 할당 문이 실행되어 값이 할당, 함수를 호출
• 이때 변수 나 함수의 식별자가 선언된 식별자인지 확인하는 과정
• 스코프에 따라 동일한 식별자 존재할 수 도있다.
• 즉, 어느 스코프의 스코프를 참조할 지, 선언된 식별자인지 식별자 결정 이 필요
• 식별자 결정을 위해 현재 실행 중인 실행 컨텍스트에서 식별자 검색 시작
• 선언된 식별자는 실행 컨텍스트의 렉시컬 환경의 환경 레코드에 등록 되어 있다.
• 현재 실행컨텍스트에서 식별자를 찾을 수 없다면 외부 렉시컬 환경에 대한 참조가 가리키는 상위 스코프로 이동하여 검색 (스코프 체인 동작 원리)

함수 코드 평가 과정

• 전체 동작 순서
  1. 함수 실행 컨텍스트 생성
  2. 함수 렉시컨 환경 생성
     • 2.1. 함수 환경 레코드 생성
     • 2.2. this 바인딩
     2.3. 외부 렉시컬 환경에 대한 참조 결정
• 전역 코드 실행 하면서 함수 호출 문을 만나면 전역 코드의 실행을 중단하고 함수 내부 이동

하나씩 살펴보자

1. 함수 실행 컨텍스트 생성

• 함수 실행 컨텍스트는 생성 후 함수 렉시컬 환경이 완생되면 스택에 푸시됨

2. 함수 렉시컬 환경 생성

• 함수 렉시컬 환경이 생성되고 함수 실행 컨텍스트랑 바인딩 됨

• 함수 렉시컬 환경 역시 환경 레코드 와 외부 렉시컬 환경에 대한 참조로 구성

  2.1. 함수 환경 레코드 생성

  • 매개변수, arguments객체, 함수 내부의 변수와 중첩 함수를 등록하고 관리

  • 이때 매개변수는 undefined로 암묵적으로 초기화 됨

    this 바인딩

  • 함수 환경 레코드의 [[ ThisValue ]] 내부 슬롯에 this가 바인딩 됨

  • 이때 this는 함수 호출 방식에 따라 결정 됨

    2.3. 외부 렉시컬 환경에 대한 참조 결정

  • 함수를 어디서 호출했는 지가 아니라 어디에 정의 했는지에 따라 상위 스코프를 결정함

  • 자신이 정의된 스코프, 에서 상위 스코프를 외부 렉시컬 환경에 대한 참조에 기리키게 한다

  • 전역 함수의 경우 렉시컬 환경이 완성 돼야 스택에 푸시 됨 -> 즉 전역 함수 평가 시점에서 실행 중인 실행 컨텍스트는 전역 실행 컨텍스트

  • 따라서 전역함수는 전역 렉시컬 환경의 참조가 할당

실행 컨텍스트와 블록 레벨 스코프

• var 키워드로 선언한 변수는 함수 레벨 스코프만 따른다.
• let, const로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let x = 1;

if (true) {
  let x = 10;
  console.log(x); // 10
}

console.log(x); // 1

• if문 내에서 let키워드로 변수 선언 시 if문의 코드 블록을 위한 블록 레벨 스코프를 생성 해야한다.
• 이런 경우 실행 컨텍스트의 렉시컬 환경이 새로 생성된 블록 레벨 스코프 렉시컬 환경을 가리키게 된다.
• 생성된 블록 레벨의 렉시컬 환경은 외부 렉시컬 참조로 기존의 전역 렉시컬 환경을 가리킨다.
• if문이 종료되면 이전의 렉시컬 환경으로 복귀 한다.