[Deep dive] 13. 스코프

실행 컨텍스트

자바스크립트의 동작원리 개념
ECMAScript 사양은 소스코드를 4가지 타입으로 분류한다.

1. 전역 코드
전역 변수를 관리, 최상위 스코프인 전역 스코프 생성

2. 함수 코드
지역 스코프 생성, 지역 변수, 매개변수 ,arguments 객체 관리
전역 스코프에서 시작하는 스코프 체인의 일원으로 연결
함수 실행 컨텍스트 생성

3. eval 코드
strict mode에서 자신만의 독자적 스코프 생성
eval 실행 컨텍스트 생성

4. 모듈 코드
모듈별로 독립적인 모듈 스코프 생성
모듈 실행 컨텍스트 생성

소스코드 평가와 실행

평가 과정

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

순차적으로 실행

실행 컨텍스트 역할

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;

  // 메서드 호출
  console.log(a + x + y); // 130
}

// 함수 호출
foo(100);

// 메서드 호출
console.log(x + y); // 3

1. 전역 코드 평가

1. 선언문 먼저 실행
2. 전역 변수, 함수가 실행 컨텍스트가 관리하는 전역 스코프에 등록

2. 전역 코드 실행

1. 순차적으로 실행
2. 함수가 호출되면 순차적으로 실행되던 전역 코드의 실행을 중단하고 코드 실행 순서를 변경하여 함수 내부로 진입

3. 함수 코드 평가

1. 매개변수와 비역 변수 선언문 먼저 실행, 실행 컨텍스트가 고나리하는 지역 스코프에 등록
2. 함수 내부에서 지역 변수처럼 사용하는 arguments 객체가 생성되어 지역 스코프에 등록되고 this바인딩도 결정

4. 함수 코드 실행

1. 평가 과정 후 함수 코드가 순차적으로 실행
   매개변수와 지역 변수에 값이 할당되고 console.log메서드 호출

2. console.log메서드를 호출하기 위해 식별자인 console을 스코프 체인을 통해 검색

3. console 객체의 프로토타입 체인을 통해 검색

---

렉시컬 환경

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

실행 컨텍스트는 LexiclaEnvironment VariableEnvironment컴포넌트로 구성된다.
생성 초기에는 동일한 렉시컬 환경을 참조한다.

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

전역 객체 생성

전역 객체는 전역 코드가 평가되기 이전에 생성된다.
전역 객체도 Object.prototype을 상속받는다.
-> 전역 객체도 프로토타입 체인의 일원인다.

전역 코드 평가

소스코드가 로드되면 전역 코드를 평가한다.

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

비어잇는 전역 실행 컨텍스트를 생성하여 스택에 푸시
스택의 최상위, 실행 중인 샐행 컨텍스트가 된다.

2. 전역 렉시컬 환경 생성

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

2.1 전역 환경 레코드 생성

전역 환경 레코드는 전역 변수를 관리하는 전역 스코프, 전역 객체의 빌트인 전역 프로퍼티와 빌트인 전역 함수, 표준 빌트인 객체를 제공

2.1.1 객체 환경 레코드 생성

2.1.2 선언적 호나경 레코드 생성

2.2 this 바인딩

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