<2> 실행컨텍스트와 Call Stack

1. 실행컨텍스트

• 실행컨텍스트는 Javascript 코드를 실행할 수 있는 환경을 말한다. 여기서 말하는 실행가능한 코드란 전역코드, Eval 코드, 함수 코드를 말한다.
• 여기서 코드는 한 줄 씩 평가되고 변수 및 객체는 메모리힙에 저장된다.
• Javascript는 실행 컨텍스트가 활성화 될 때, 호이스팅이 발생하고, 외부 환경 정보를 구성하며 this 값을 설정한다.
• Javascript 엔진이 코드를 실행하려면 여러가지 정보를 알아야하는데 그 정보는 변수, 함수선언, 변수의 유효범위(scope), this가 있다.

var a = "123"; // global EC

function foo () { //outer
	var b = "456";
    function bar () { //inner
    	var c = "789";
        console.log(a + b + c);
    }
    bar();
}

foo();

위 코드를 실행했을 때 다음의 순서대로 실행컨텍스트 스택이 생성되고 소멸한다.

1. global EC
2. global EC  foo() EC
3. global EC  foo() EC  bar() EC
4. global EC  foo() EC
5. global EC

전역컨텍스트 -> outer -> inner -> outer -> 전역컨텍스트

이런 느낌의 그림이된다.

(1) 실행컨텍스트의 구조

실행컨텍스트를 실행하기 위해 보유하고 있는 프로퍼티는 ES5전과 후가 조금 차이가 있다.

ES5 이전

• 변수객체
• 스코프체인
• this

ES5 이후

• Lexical Environment
• Variable Environment
• ** Variable Object, Activation Object, Scope Chain 등의 개념이 Lexical Environment로 변경됨

변수객체(VO)

실행컨텍스트가 생성될 때 Javascript엔진은 실행에 필요한 정보를 담을 객체를 생성하는데 그것이 VO이다. VO에는 변수, 매개변수, 인수정보, 함수선언(함수표현식은 제외)들을 담는다.

스코프체인

(2) ES5 이후의 개념

Lexical 환경와 Variable 환경

Lexical 환경은 Javascript 코드에서 식별자 정의를 위해 사용하는 객체로 Environment Record와 Outer Environment Reference를 프로퍼티로 갖는다.

• Environment Record
  - 유효범위 내의 값에 식별자를 맵핑한다.
  - DeclarativeER: 변수선언 및 함수선언을 저장한다.
  - ObjectER: With 문이나 전역 환경에서 사용된다.
  - this
• Outer Environment Reference
  - 중첩 유효 범위를 가질 수 있는 환경에서 상위 Lexical Environment를 참조한다.
  - 즉, 외부환경에 대한 참조를 갖고 있다.
  -  전역환경에서는 null 이다.

Variable 환경은 대개 Lexical 환경과 동일한 값을 갖는데, 하지만 만들어진 변수선언 및 함수선언에 대해 바인딩을 유지한다.

• Lexical 환경은 코드 실행 중에 실행컨텍스트 내에서 변경될 수 있지만 Variable 환경은 항상 값을 유지한다.
  - Lexical 환경은 일시적으로 Lexical 환경 하위에 새로운 환경을 가리킨다.
  - 이 새로운 환경은 임시 바인딩을 보유한다
  - 그리고 임시범위를 벗어나면 Variable 환경이 참조하는 값으로 Lexical 환경을 복구한다.

2. 실행컨텍스트와 Call Stack의 관계

• Javascript 코드가 실행될 때 전역 실행컨텍스트가 생성되어 Call Stack에 push 된다. 이 전역 실행컨텍스트는 브라우저에서는 window , node.js에서는 global 이다.