실행 컨텍스트

<aside> 💡 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 한다.

1. 선언된 변수를 위로 끌어 올린다 = 호이스팅 (hoisting)
2. 외부 환경 정보를 구성한다.
3. this 값을 설정한다.

위와 같은 현상 때문에 다른 언어에서 발견할 수 없는 특이한 현상이 발생한다.

</aside>

0. 콜스택?

• 스택 vs 큐

  

  • 스택은 출입구가 하나인 바구니 같은 데이터 구조로 마지막에 들어간 것이 가장 처음에 나오는 구조이다.
  • 큐는 양쪽 출입구가 있는 터널과 같은 존재로 먼저 들어간 것이 먼저 나오는 구조이다.

1-1 실행 컨텍스트란?

• 콜스택

  • 실행컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 그 객체 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 스택의 한 종류인 콜스택 에 쌓아 올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다.
    1. 컨텍스트의 구성

       1. 구성 방법 (여러가지가 있지만 여기서 사실 함수만 생각하면 된다.)

          1. 전역 공간
          2. 함수
          3. eval()함수

       2. 실행 컨텍스트의 구성 예시

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

          (1번) 전역 컨텍스트가 콜스택에 담긴다.

          (3번) outer 함수를 호출하면 outer에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성 > 콜스택에 담는다.

          (2번) inner함수의 실행 컨텍스트를 생성 > 콜스택에 담긴다.

          코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료

• 실행 컨텍스트 객체의 실체 (= 담기는 정보)

  • VariableEnvironment
    • 현재 컨텍스트 내의 식별자 정보(=record)를 지니고 있다.
      • var a = 3 의 경우 var a 를 의미
    • 외부 환경 정보 (=outer)를 지니고 있다.
    • 선언 시점 LexicalEnvironment의 snapshot
  • LexicalEnvironment
    • VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영한다.
  • ThisBinding
    • this 식별자가 바라봐야할 객체

2. VariableEnvironment vs LexicalEnvironment

• 두가지에 담기는 내용은 완벽하게 동일하다. 차이는 스냅샷 유지 여부이다.

  1. VE : 스냅샷을 유지한다.
  2. LE : 스냅샷을 유지하지 않는다.

  결국, 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용한다.

• 구성 요소 VE, LE 모두 같다

  • environementRecord, outerEnvironmentReference 로 구성되어 있다.
  • environmentRecord (=record)
    • 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다.
    • 함수에 지정된 매개변수 식별자, 함수자체, var로 선언된 변수 식별자 등
  • outerEnvironmentReference(=outer)

3. LexicalEnvironment - environmentRecord와 호이스팅

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 기록된다 라는 의미로 이해해보면 record와 일맥상통.

• 수집 대상 정보

  • 함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수 식별자 등

• 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집

  <aside> 💡 순서대로 수집을 할 뿐, 코드가 실행되지 않는다.

  </aside>

3-1. 호이스팅

• 끌어올리다는 의미를 가진다.

• 변수정보 수집을 모두 마쳤더라도 아직 실행 컨텍스트가 관여할 코드는 실행 전의 상태이다. (JS 엔진은 코드 실행 전 이미 모든 변수 정보를 알고 있는 것.)

• 변수 정보 수집 과정을 이해하기 쉽게 설명한 가상 개념

  <aside> 💡 가상개념이라는 말은, 실제로는 그렇지 않더라도 사람이 이해하기 쉬운 말로 풀어 표현했다는 것을 의미한다.

  </aside>

3-1-1. 호이스팅의 규칙

• 호이스팅 법칙

  • 매개변수 및 변수는 선언부를 호이스팅한다.

    <적용 전>

    //action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
    //action point 2 : 결과 예상하기
    //action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기
    
    function a () {
    	var x = 1;
    	console.log(x);
    	var x;
    	console.log(x);
    	var x = 2;
    	console.log(x);
    }
    a(1);
    

    <호이스팅 적용>

    //action point 1 : 매개변수 다시 쓰기(JS 엔진은 똑같이 이해한다)
    //action point 2 : 결과 예상하기
    //action point 3 : hoisting 적용해본 후 결과를 다시 예상해보기
    
    function a () {
    	var x;
    	var x;
    	var x;
    
    	x = 1;
    	console.log(x);
    	console.log(x);
    	x = 2;
    	console.log(x);
    }
    a(1);
    

  • 함수 선언은 전체를 호이스팅한다.

    <적용 전>

    //action point 1 : 결과 값 예상해보기
    //action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기
    
    function a () {
    	console.log(b);
    	var b = 'bbb';
    	console.log(b);
    	function b() { }
    	console.log(b);
    }
    a();
    

    <호이스팅 적용>

    //action point 1 : 결과 값 예상해보기
    //action point 2 : hoisting 적용해본 후 결과를 다시 예상해보기
    
    function a () {
    	var b; // 변수 선언부 호이스팅
    	function b() { } // 함수 선언은 전체를 호이스팅
    
    	console.log(b);
    	b = 'bbb'; // 변수의 할당부는 원래 자리에
    
    	console.log(b);
    	console.log(b);
    }
    a();
    

중간 정리

<aside> 💡 - 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

• 그 객체 안에는 3가지가 존재한다. ✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings
• VE와 LE는 실행컨텍스트 생성 시점에 내용이 완전히 같고, 이후 스냅샷 유지 여부가 다르다.
• LE는 다음 2가지 정보를 가지고 있다. ✓ record(=environmentRecord) ← 이 record의 수집과정이 hoisting ✓ outer(=outerEnvironmentReference)

</aside>

3-1-2. 함수 선언문과 함수 표현식

• 함수 정의의 3가지 방식

• 함수 정의에 따른 호이스팅 차이

• 함수 선언문을 주의해야 하는 이유

• 협업에서의 함수

4. LexicalEnvironment(2) - 스코프, 스코프 체인, outerEnvironmentReference(=outer)

• 실행 컨텍스트 관점에서 스코프를 이해해보자

5. 스코프 체인

1. outer는 현재 호출된 함수가 선언될 당시 의 LexicalEnvironment를 참조한다.
2. 예를들어 A함수 내부에 B함수 선언 → B함수 내부에 C함수 선언(Linked List) 한 경우
3. 결국 타고, 타고 올라가다 보면 전역 컨텍스트의 LexicalEnvironment를 참조하게 된다.
4. 항상 outer는 오직 자신이 선언된 시점의 LexicalEnvironment를 참조하고 있으므로, 가장 가까운 요소부터 차례로 접근 가능하다.
5. 결론 : 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능하다.

뭔소린지 모르겠고 코드를 한번 보자!

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