[Javascript] 실행 컨텍스트

실행 컨텍스트(Execution Context / EC)

- 실행 코드에 제공할 정보들을 모아 놓은 객체

- 자세히 설명하자면 코드를 실행하기 위해서는 여러가지 정보를 알고 있어야 한다.

• 변수 : 전역변수, 지역변수, 매개변수, 객체 프로퍼티
• 함수
• 변수의 유효범위(Scope)
• this

- 위와 같은 정보들을 형상화하고 구분하기 위해 실행 컨텍스트를 객체의 형태로 관리한다.

- 전역 코드로 컨트롤이 진입하면 가장 먼저 전역 실행 컨텍스트가 생성되고 애플리케이션이 종료될 때 까지 유지된다.

실행 컨텍스트의 3가지 객체

1. Variable Object(VO / 변수객체)

- Variable Object는 실행 컨텍스트의 프로퍼티이기 때문에 값을 갖는데 이 값은 다른 객체를 가리킨다.

- Variable Object는 전역 컨텍스트와 함수 컨텍스트가 있는데 가리키는 객체가 다르다.

• 변수
• 매개변수(Parameter), 인수(arguments)
• 함수 선언문(함수 표현식 제외)

전역 컨텍스트와 함수 컨텍스트 차이점

전역 컨텍스트 : 전역 객체(Global Object / GO)를 가리키고 전역 변수, 전역 함수를 프로퍼티로 갖는다.

함수 컨텍스트 : 활성 객체(Activation Object / AO)를 가리키고 매개변수, 인수들의 정보(arguments object)를 갖는다.

2. Scope Chain(SC) 

- 스코프 체인(Scope Chain)이란 전역 객체 및 함수의 스코프를 차례대로 저장하는 것이다. 

- 스코프 체인을 통해 렉시컬 스코프를 접근한다.

만약 (전역변수 - 부모함수 - 자식함수) 이러한 실행컨텍스트 스택이 쌓였을 경우

자식함수 실행 컨텍스트에서 전역변수를 검색한다면

1. 활성 객체(AO)를 시작으로 - (자식함수)
2. 상위 컨텍스트 활성 객체(AO) - (부모함수)
3. 전역 객체(GO)까지 검색하여 변수를 찾는다.

위처럼 순서대로 검색을 이어가기 때문에 이것을 스코프 체인이라고 불른다.

3. this value

this프로퍼티에는 this 값이 할당되고 this 값은 함수 호출 패턴에 의해 결정된다.

실행 컨텍스트 스택 생성 소멸

- 스택은 LIFO(Lats In First Out, 후입선물)의 구조를 가진다.

- 전역 실행 컨텍스트는 애플리케이션이 종료될 때까지 유지된다.

 

1. 전역 코드가 실행 컨텍스트 스택에 쌓인다.

2. 부모 함수를 호출하면 부모함수가 스택에 쌓인다.

3. 자녀 함수를 호출하면 자녀함수가 스택에 쌓인다.

4. 자녀함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트를 반환한다.

5. 부모함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트를 반환한다.

    var global = '전역 코드';
    function parent() {
        var parent = '부모 함수';
        function child() {
            var child = '자녀 함수';
        }
        child();
    }
    parent();
    
    //     컨텍스트 생성
    //     1. 전역 변수 
    //     2. 전역 변수 parent()함수
    //     3. 전역 변수 parent()함수 child()함수

    //     컨텍스트 소멸
    //     1. 전역 변수 parent()함수
    //     2. 전역 변수

실행 컨텍스트 생성 과정

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}

foo();

변수 객체화(Variable Instantiation)
- 변수 객체화는 해당 실행 컨텍스트 변수 객체에 프로퍼티와 값을 추가하는 것을 의미한다.
전역 실행 컨텍스트 : 전역 객체(전역 변수, 전역 함수) GO를 가리킴
함수 실행 컨텍스트 : 변수, 매개변수, 인수 정보(arguments), 함수 선언을 VO에 추가하여 객체화 

변수 객체화 순서
1. (함수 코드) 매개변수가 VO의 프로퍼티, 인수가 값으로 설정
2. 함수명이 VO의 프로퍼티, 생성된 함수 객체가 값으로 설정(함수 호이스팅)
3. 변수명 VO의 프로퍼티, undefined 값으로 설정(변수 호이스팅)

(실행 컨텍스트 실행 과정)

1. 스코프 체인 생성과 초기화
2. Variable Instantiation(변수 객체화)실행
3. this value 결정

전역 코드에 진입

1. 실행 컨텍스트에 진입하기 전에 유일하게 전역 객체가 생성된다.(빌트인 객체-Math, String, Array, BOM, DOM)

2. 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다.

3. 전역 실행 컨텍스트

3.1 전역 실행 컨텍스트는 가장 먼저 스코프 체인의 생성과 초기화를 실행하고, 전역 객체를 포함한다.

3.2 변수 객체화 실행 -> 변수, 함수 매개변수, 인수 정보 등을 변수 개체에 추가하여 객체화

  3.2.1 함수 foo 선언 처리

    - foo함수 객체는 [[Scope]]프로퍼티를 가지게 된다.

    - 이때 내부 프로퍼티는 foo함수 객체가 실행되는 환경을 가리킨다.

    - foo함수의 [[Scope]]는 자신의 실행 환경과 자신을 포함하는 외부 함수 실행 환경과  전역객체를 가리키고

    - 외부 함수의 실행 컨텍스트가 소멸하여도 [[Scope]]가 가리키는 외부 함수의 실행 환경은 소멸하지 않고 참조할 수 있다.

    - 이것을 클로저라고 한다.

 

(지금 까지 실행 컨텍스트는 아직 코드가 실행되기 이전이다.)
이때 함수 호이스팅 현상이 발생하게 된다.

스코프 체인이 가리키는 변수 객체(VO)에 이미 함수가 등록되어 있기 때문에
코드를 실행할 때 함수 선언식 이전에 함수를 호출할 수 있게 된다.