23장. 실행 컨텍스트

--> 자바스크립트의 동작 원리를 담고 있는 핵심 개념

• 소스코드의 타입

  --> 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.

  1) 전역 코드
  --> 전역에 존재하는 소스코드
  --> 전역에 정의된 함수, 클래스 등의 내부 코드는 포함하지 않는다.
  전역 스코프 생성 -> var 키워드의 전역 변수, 전역 함수를 프로퍼티와 메서드로 바인딩 -> 전역 코드 평가 -> 전역 실행 컨텍스트 생성

  2) 함수 코드
  --> 함수 내부에 존재하는 소스코드
  --> 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함하지 않는다.
  지역 스코프 생성 -> 지역변수, 매개변수, arguments 객체 관리 -> 함수 코드 평가 -> 함수 실행 컨텍스트 생성

  3) eval 코드
  --> 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드
  strict mode에서 자신만의 독자적인 스코프 생성 -> eval 코드 평가 -> eval 실행 컨텍스트 생성

  4) 모듈 코드
  --> 모듈 내부에 존재하는 소스코드
  --> 모듈 내부의 함수, 클래스 등의 내부 코드는 포함하지 않는다.
  모듈별로 독립적인 모듈 스코프 새성 -> 모듈 코드 평가 -> 모듈 실행 컨텍스트 생성

• 소스코드의 평가와 실행

  소스코드 --> 코드평가 --> 실행 컨텐스트

  평가

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

  실행

  선언문을 제외한 소스코드가 순차적으로 실행 (런타임) -> 실행 결과를 실행 컨텍스트가 관리하는 스코프에 등록

  var x; // 1. 선언문 실행 -> x는 실행 컨텍스트가 관리하는 스코프에 등록, 초기화
  x = 1; // 2. 소스코드 실행 -> 할당문 실행

• 실행 컨텍스트의 역할

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

  1. 전역 코드 평가 --> 전역 코드를 실행하기 위한 준비

  --> 선언문만 먼저 실행
  --> var 키워드로 선언된 전역 변수, 함수는 전역 객체의 프로퍼, 메서드

  2. 전역 코드 실행 --> 런타임 시작, 전역 코드 순차적 실행

  --> 전역 변수에 값 할당, 함수 호출
  --> 함수 호출되면 전역 코드 실행 중단, 함수 내부로 진입

  3. 함수 코드 평가 --> 함수 코드 실행 준비

  --> 매개변수, 지역 변수 선언문 먼저 실행
  --> arguments 객체 생성 -> 지역 스코프에 등록 -> this 바인딩 결정

  4. 함수 코드 실행 --> 런타임 시작, 함수 코드 순차적 실행

  --> 매개변수, 지역 변수에 값 할당, console.log 메서드 호출

  실행 컨텍스트의 역할

  --> 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역
  --> 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘
  1) 식별자, 스코프 --> 렉시컬 환경으로 관리
  2) 코드 실행 순서 --> 실행 컨텍스트 스택으로 관리

• 실행 컨텍스트 스택 (코드 순서 관리)

  --> 실행 컨텍스트들을 스택 자료구조로 관리
  --> 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트

• 렉시컬 환경 (식별자, 스코프 관리)

  --> 식별자와 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 기록하는 자료구조
  --> 키와 값을 갖는 객체 형태의 스코프 생성

  구성 요소

  1) 환경 레코드
  --> 스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소
  2) 외부 렉시컬 환경에 대한 참조
  --> 상위 스코프를 가리킴, 단방향 링크드 리스트인 스코프 체인 구현

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

  var x = 1;
  const y = 2;
  function foo(a) {
     var x = 3;
     const y = 4;
     function bar(b) {
         const z = 5;
         console.log(a + b + x + y + z);
     }
     bar(10);
  }
  foo(20);

  1. 전역 객체 생성

  --> 전역 객체는 코드가 평가되기 이전에 생성
  --> 전역 객체도 Object.prototype을 상속받는다.

  2. 전역 코드 평가

  1) 전역 실행 컨텍스트 생성
  2) 전역 렉시컬 환경 생성 -> 전역 실행 컨텍스트에 바인딩
   2.1 전역 환경 레코드 생성 (전역 스코프, 전역 프로퍼티, 전역 함수, 표준 빌트인 객체 제공)
    2.1.1 객체 환경 레코드 생성 -> var 키워드로 선언한 전역 변수, 함수를 전역 객체의 프로퍼티와 메서드로 등록, var 키워드로 선언한 변수는 코드 실행 단계에서 변수 선언문 이전에도 참조 가능 (undefined) -> 변수 호이스팅
    2.1.2 선언적 환경 레코드 생성 -> let, const키워드로 선언한 전역 변수를 등록하고 관리, let, const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아닌 개념적인 블록 내에 존재
  let, const로 선언한 변수들은 선언과 초기화가 나뉘어져서 이루어진다!!
  --> 일시적 사각지대 발생
   2.2 this 바인딩
  --> 전역 환경 레코드의 내부 슬롯에 this 바인딩
  * this 바인딩은 객체 환경 레코드와 선언적 환경 레코드에는 x
  --> 전역 환경 레코드와 함수 환경 레코드에만 존재
   2.3 외부 렉시컬 환경에 대한 참조 결정 --> 상위 스코프
  3) 전역 코드 실행 --> 전역 코드가 순차적으로 실행
  --> 변수 할당문이 실행되고, 함수가 호출된다.
  --> 식별자 결정이 발생, 스코프를 이동하며 검색한다.
  4) foo 함수 코드 평가
  --> foo 함수가 호출되면 전역 코드 실행 중단하고 foo 함수 내부로 코드의 제어권이 이동

  함수 코드 평가

  1) 함수 실행 컨텍스트 생성
  2) 함수 렉시컬 환경 생성 --> 함수 실행 컨텍스트에 바인딩
   1. 함수 환경 레코드 생성 --> 매개변수, arguments 객체, 함수 내부의 지역 변수와 중첩 함수 등록 + 관리
   2. this 바인딩
   3. 외부 렉시컬 환경에 대한 참조 결정 --> 상위 스코프
   * 렉시컬 스코프 : 함수를 어디에 정의했는지에 따라 상위 스코프 결정
  3) foo 함수 코드 실행 --> 매개변수에 인수 할당, 변수 할당문이 실행
  4) bar 함수 코드 평가
  5) bar 함수 코드 실행
  * console.log --> console 식별자 탐색, log 메서드 탐색, 표현식 평가
  6) bar 함수 코드 종료
  --> 실행 컨텍스트에서 제거되었다고 해서 해당 함수 렉시컬 환경까지 즉시 소멸하는 것은 아님. (참조하고 있다면 유지)
  7) foo 함수 코드 종료
  8) 전역 코드 실행 종료

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

  1) var 키워드로 선언한 변수는 오로지 함수의 코드 블록만 지역 스코프로 인정
  --> 함수 레벨 스코프
  2) let, const 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정
  --> 블록 레벨 스코프