내가 이 내용이 알 듯 말 듯할 때 이 내용을 보러 온다면, 결론만 봐도 기억이 상기될 것이다. 그러므로 결론부터 써보겠다.

결론

• 실행 컨텍스트
  • 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
  • 전역 공간에서 자동으로 생성되는 전역 컨텍스트와 eval 및 함수 실행에 의한 컨텍스트 등이 있음
  • 활성화되는 시점에 VariableEnvironment, LexicalEnvironment, ThisBinding 이 세 가지 정보를 수집
• 실행 컨텍스트를 생성할 때
  • VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성, LexicalEnvironment는 함수 실행 도중 변경 사항 즉시 반영
  • LexicalEnvironment
    • environmentRecord: 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집
    • outerEnvironmentReference: 바로 직전 컨텍스트의 LexicalEnvironment 정보를 참조
• 호이스팅
  • 코드 해석을 좀 더 수월하게 하기 위해 environmentRecord의 수집 과정을 추상화한 개념
  • 실행 컨텍스트가 관여하는 코드 집단의 최상단으로 이들을 ‘끌어올린다’는 해석
  • 선언부만을 호이스팅, 할당 과정은 원래 자리에 유지 → 이 부분에서 함수 선언문과 함수 표현식의 차이 발생
• 스코프
  • 변수의 유효범위
  • outerEnvironmentReference는 해당 함수가 선언된 위치의 LexicalEnvironment 참조
  • 어떤 변수에 접근 → 현재 컨텍스트의 LexicalEnvironment를 탐색 후 존재 시 그 값 반환 → 없으면 outerEnvironmentReference에 담긴 LexicalEnvironment를 탐색
  • 전역 컨텍스트의 LexicalEnvironment에도 없다면 undefined 반환
• 전역변수와 지역변수
  • 전역변수: 전역 컨텍스트의 LexicalEnvironment에 담긴 변수
  • 지역변수: 함수에 의해 생성된 실행 컨텍스트의 변수
  • 안전한 코드 구성을 위해 전역변수 사용은 최소화
• this
  • 실행 컨텍스트를 활성화하는 당시에 지정된 this가 저장
  • 함수를 호출하는 방법에 따라 그 값이 달라짐
  • 지정되지 않은 경우에 전역 객체 저장

1. 실행 컨텍스트란?

• 스택과 큐

  • 스택: 출입구가 하나뿐인 깊은 우물 같은 데이터 구조
  • 큐: 양쪽이 모두 열려있는 파이프

• 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

  • 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성 후 콜 스택에 쌓아 올림
    • 동일환 환경: 하나의 실행 컨텍스트를 구성할 수 있는 방법(전역공간, eval() 함수, 함수 등)
  • 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서 보장
  • 전역공간은 자동 생성, 우리가 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것

• 예제 2-1. 실행 컨텍스트와 콜 스택(어떤 순서로 쌓이고, 어떤 순서로 코드 실행에 관여하는지 보기)

  // -----------------------------------------------------------------------(1)
  var a = 1;
  function outer() {
  	function inner() {
  		console.log(a); //undefined
  		var a = 3;
  	}
  	inner(); // ------------------------------------------------------------(2)
  	console.log(a); // 1
  }
  outer(); // --------------------------------------------------------------(3)
  console.log(a); // 1
  

  

• 예제 2-1 과정

• 위 예제를 통해 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간이 현재 실행할 코드에 관여하게 되는 시점인 것을 알 수 있음

• JS엔진은 실행 컨텍스트가 활성화될 때 다음 정보를 담아 실행 컨텍스트 객체에 담음

  • VariableEnvironment: 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않음
  • LexicalEnvironment: 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨
  • ThisBinding: this 식별자가 바라봐야 할 대상 객체

2. VariableEnvironment

• LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다름
• VariableEnvironment를 먼저 만들고, 그대로 복사해 LexicalEnvironment를 만들고, 이후에 LexicalEnvironment를 주로 활용
• VariableEnvironment와 LexicalEnvironment의 내부는 environmentRecord와 outer-EnvironmentReference로 구성

3. LexicalEnvironment