실행 컨텍스트(Execution Context)

실행 컨텍스트란? 

 

실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념, 실행 가능한 코드가 실행되기 위해 필요한 환경

실행 가능한 코드의 종류 - 전역 코드, Eval 코드, 함수 코드

실행 되기위해 필요한 환경 - 변수, 함수, 선언, 변수의 유효범위, this

실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리

자바스크립트 코드가 실행되면 해당 코드의 실행 컨텍스트가 스택이 생성됨

현재 실행중인 코드에서 함수 호출 등으로 해당 컨텍스트와 관련없는 코드 실행시 새로운 컨텍스트 스택이 생성되고 제어권이 넘어감

 

var x = 'xxx';

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

1. 전역 코드 실행시 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓임. 전역 컨텍스트는 애플리케이션이 종료될 때 까지 유지

2. 전역 코드 실행중 foo함수 호출부분에서 전역  코드실행은 일시 중지

3. foo함수 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓임, 제어권은 전역 실행 컨텍스트에서 foo함수 실행 컨텍스트로 넘어옴

4. foo함수 코드 실행중 bar함수 호출부분에서 foo함수 코드 실행 일시 중지

5. bar함수 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓임, 제어권은 foo함수 실행 컨텍스트에서 bar함수 실행 컨텍스트로 넘어옴

6. bar함수 코드가 전부 실행되면 bar함수 실행 컨텍스트가 종료되고, 실행 컨텍스트 스택에서 제거

7. bar함수 실행 컨텍스트 스택 제거후 실행컨텍스트 스택에는 foo함수 실행 컨텍스트 스택이 위치하며 제어권이 넘어옴

8. foo함수 코드 전부 실행 후 foo함수 실행 컨텍스트 종료, 실행 컨텍스트 스택에서 제거 

9. 스택에는 전역 실행 컨텍스트만 남게되고 제어권이 전역 실행 컨텍스트로 넘어감

10. 전역 코드 전부 실행되고 전역 실행 컨텍스트 종료 및 실행 컨텍스트 스택에서 제거

 

 

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

 

실행 컨텍스트 자제는 코드를 형상화하고 구분하는 추상적인 개념이지만 물리적으로는 객체의 형태를 가지며 3가지 프로퍼티를 가짐

 

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

    변수, 매개변수, 인수정보, 함수 선언의 정보를 담고있는 객체

    컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 정보를 수집

    전역 실행 컨텍스트와 함수 실행 컨텍스트 일때 내용이 다르다

    전역 컨텍스트의 경우 - 유일하며 최상위에 위치하고 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체(Gloval Object / GO)

    함수 컨텍스트의 경우 - Acrivation Object(AO / 활성 객체)를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고있는

                                       arquments object가 추가됨

    

    호이스팅 - 변수를 선언하고 초기화 했을때 선언 부분이 코드의 최상단으로 끌어올려지는 현상.

                     선언부만 올라가므로 최기화 또는 대입 부분은 그대로 남아있음

                     함수 선언식의 경우에는 함수 전체가 통째로 끌어올려짐

 

호이스팅 예제 1)

function a (x) {
  console.log(x);
  var x;
  console.log(x);
  var x = 2;
  console.log(x);
}
a(1);

위의 코드를 호이스팅 개념처럼 변경하면

function a () {
  var x;
  var x;
  var x;
  
  x = 1
  console.log(x);
  console.log(x);
  x = 2;
  console.log(x);
}
a()

인자들과 함께 함수를 호출한 경우의 동작은 전달된 인자를 arquments object에 담는 것을 제외하면 코드내부에서 변수를 선언한 것과 다르지 않아서 함수 내부의 코드 최상단에서 선언 및 할당이 이뤄진것으로 간주하여 적용 

 

호이스팅 예제 2)

function a () {
  console.log(b);
  var b = 'bbb';
  console.log(b);
  function b () {};
  console.log(b);
}
a();

위의 코드를 호이스팅 개념처럼 변경하면

function a () {
  var b;
  function b () {};
  console.log(b);
  b = 'bbb';
  console.log(b);
  console.log(b);
}
a();

함수 선언식의 경우는 식이 통째로 끌어올려지는것에 주의

 

  2. Scope Chain(SC)

    스코프 체인은 일종의 리스트, 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장

    해당 전역 또는 함수가 참조 할 수 있는 변수, 함수 선언 등의 정보를 담고있는 전역 객체 또는 활성 객체의 리스트

    현재 실행 컨텍스트의 활성 객체로 시작해서 순차적으로 상위 컨텍스트의 활성 객체를 가리키며 마지막에는 전역 객체를 가리킴

    스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능

    스코프 체인은 식별자 중에서 변수를 검색하는 메커니즘

 

스코프 체인 예제 

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

    

  3. this value

    this 프로퍼티에는  this 값이 할당 됨

    this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.