실행 컨텍스트 (Execution context) 정리

실행 컨텍스트란 (Execution Context,  E.C) 

실행 가능한 javascript 코드 블럭이 실행되는 환경

실행 컨텍스트가 생성되는 시점

실행 가능한 코드(전역 코드, eval() 로 실행되는 코드, 함수 내부의 코드)  가 실행되면 각각의 독립적인 실행 컨텍스트가 생성된다.

(ex. 함수가 실행되는 시점에 해당 함수의 실행 컨텍스트가 생성된다.)

생성 된 실행 컨텍스트는 순서대로 콜 스택(Call Stack) 에 push 된다.

스택이므로 가장 마지막에 추가 된 실행 컨텍스트가 현재 실행되고 있는 컨텍스트다.

실행 컨텍스트는 작업이 종료되면 콜 스택에서 pop 된다.

실행 컨텍스트 생성 코드 예

console.log('this is global context');
 
function ExContext1() {
  console.log('this is ExContext1');
}
 
function ExContext2() {
  ExContext1();
  console.log('this is ExContext2');
}
 
ExContext2();

    다음 코드가 실행되면 함수가 호출되는 시점에 실행 컨텍스트가 생성되고 콜 스택에 push/pop 된다.

1. push - 전역 컨텍스트

2. push - console.log

3. pop - console.log

4. push - ExContext2 컨텍스트

5. push - ExContext1 컨텍스트

6. push - console.log

7. pop - console.log

8. pop - ExContext1 컨텍스트

9. push - console.log

10. pop - console.log

11. pop - ExContext2 컨텍스트

12. pop - 전역 컨텍스트

즉, 예제 코드 실행 결과는 다음과 같다.

실행 컨텍스트 내부 생성 과정

function execute(param1, param2) {
  var a = 1;
  var b = 2;
 
  function func() {
    return a + b;
  }
 
  return param1 + param2 + func();
}
 
execute(3, 4);

1. javascript 엔진에 의해 변수 객체(Variable Object) 생성

- 변수 객체란: 해당 컨텍스트 실행에 필요한 데이터 들을 담을 객체 (변수 객체를 활성 객체라고 부르기도 한다.)

- 변수 객체는 javascript 엔진 내부에서 제어가 이루어진다. 

- 아래 나열하는 2 ~ 5 번들은 모두 변수 객체 내부에 생성된다.

2. arguments 객체 생성

- 매개변수 정보를 담고 있는 유사배열

3. [[scope]] 생성

- 현재 컨텍스트의 유효 스코프 정보를 담고 있는 리스트

4. 지역 변수 생성

- 변수를 생성만 할 뿐, 선언한 값 초기화는 해당 변수나 함수의 표현식이 실행되기 전까지는 이루어지지 않는다.

- 표현식 실행은 2 ~ 5번 과정이 모두 끝나고 6번 과정에서 이루어진다. 

- 예제코드 기준으로 param1 = value, param2 = value, a = undefined, b = undefined, func = Function Object 로 할당된다.

5. this 바인딩

- 해당 함수가 객체의 함수(메소드) 로 호출되는지, 함수로 호출되는지에 따라 this 바인딩이 달라진다.

- 위 코드에서는 함수로 호출 되었으므로 this 는 전역 객체(window) 를 바인딩 한다.

6. 코드 실행

- 표현식 실행과 연산, 다른 함수 실행이 이루어진다.

참고: 인사이드 자바스크립트