[모던 자바스크립트 Deep Dive] #23,13. 실행컨텍스트★, 스코프

▣ 23장: 실행 컨텍스트
      
23.1 소스코드의 타입
      소스코드(전역, 함수, eval, 모듈) -> 평가 -> 실행 컨텍스트 생성

23.2 소스코드의 평가와 실행
      소스코드 평가(변수 선언문 실행) -> 실행 컨텍스트 생성
      -> 소스코드 실행(변수 할당문 실행) -> 실행 컨텍스트에 결과 반영

23.3 실행 컨텍스트의 역할

       실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역임.
       식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘.
       모든 코드는 실행 컨텍스트를 통해 실행되고 관리됨.

       식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고 
       코드 실행 순서는 실행 컨텍스트 스택으로 관리함.

23.4 실행 컨텍스트 스택
      전역 코드 평가 -> 전역 실행 컨텍스트 생성 -> 함수 코드 평가 -> 함수 실행 컨택스트 생성.
      이때 생성된 실행 컨텍스트는 스택 자료구조로 관리됨.

23.5 렉시컬 환경
      식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로
      실행 컨텍스트를 구성하는 컴포넌트임.
      환경 레코드와 외부 렉시컬 환경에 대한 참조로 구성됨.

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

    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); // 42

____23.6.1 전역 객체 생성
____23.6.2 전역 코드 평가
              1) 전역 실행 컨텍스트 생성
              2) 전역 렉시컬 환경 생성
                 2-1) 전역 환경 레코드 생성
                      2-1-1) 객체 환경 레코드 생성
                      2-1-2) 선언적 환경 레코드 생성
                 2-2) this 바인딩
                 2-3) 외부 렉시컬 환경에 대한 참조 결정 
____24.6.3 전역 코드 실행
              식별자 결정
____24.6.4 foo 함수 코드 평가
              1) 함수 실행 컨텍스트 생성
              2) 함수 렉시컬 환경 생성
                 2-1) 함수 환경 레코드 생성
                 2-2) this 바인딩
                 2-3) 외부 렉시컬 환경에 대한 참조 결정 
____23.6.5 foo 함수 코드 실행
              식별자 결정
____23.6.6 bar 함수 코드 평가
____23.6.7 bar 함수 코드 실행

	console.log(a + b + x + y + z);

              console 식별자 검색 -> log 메서드 검색 -> 표현식 a+b+x+y+z 의 평가 -> console.log 메서드 호출
____23.6.8 bar 함수 코드 실행 종료
____23.6.9 foo 함수 코드 실행 종료
____23.6.10 전역 코드 실행 종료

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

 

▣ 13장: 스코프
13.1 스코프란?
      스코프 : 식별자가 유효한 범위.
                 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해
                 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨.
      식별자 결정 : 자바스크립트 엔진이 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할 것인지 결정.
                        식별자의 이름이 동일하더라도 스코프가 다르면 별개의 변수임.

    var x = 'global';

    function foo() {
      var x = 'local';
      console.log(x); // ①
    }

    foo();

    console.log(x); // ②

13.2 스코프의 종류
____13.2.1 전역과 전역 스코프
             전역 변수는 어디서든지 참조 가능.
____13.2.2 지역과 지역 스코프
             지역 : 함수 몸체 내부. 지역 스코프를 만듦.
             지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효함.

13.3 스코프 체인
      함수의 중첩에 의해 스코프가 계층적 구조를 갖는 것.
      변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해
      변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색함.
____13.3.1 스코프 체인에 의한 변수 검색
             상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만
             하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없음.
____13.3.2 스코프 체인에 의한 함수 검색


13.4 함수 레벨 스코프
       코드 블록이 아니라 함수에 의해서만 지역 스코프가 생성됨!

    var x = 1;

    if (true) {
      // var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
      // 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
      // 따라서 x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
      // 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
      var x = 10;
    }

    console.log(x); // 10

       블록 레벨 스코프 : 대부분의 프로그래밍 언어는 함수 몸체만이 아니라
                               모든 코드 블록(if, for, while, try/catch 등)이 지역 스코프를 만듦.
       함수 레벨 스코프 : var키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정함.
                                * var은 함수 레벨 스코프를 지원하고, let, const는 블록 레벨 스코프를 지원함.


13.5 렉시컬 스코프
      동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정.
      정적 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정.(=렉시컬 스코프)
                        자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름.

    var x = 1;

    function foo() {
      var x = 10;
      bar();
    }

    function bar() {
      console.log(x);
    }

    foo(); // 1
    bar(); // 1

                  함수가 호출된 위치는 상위 스코프 결정에 영향주지 않음.
                  함수 정의가 실행될 때 함수의 상위 스코프가 정적으로 결정됨.
                  함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는
                  이렇게 결정된 상위 스코프를 기억하고 함수가 호출될 때마다 함수의 상위 스코프를 참조함.