실행 컨텍스트(Excution Context)의 정의
- 자바스크립트 코드가 내부적으로 실행되는 환경이다
- 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
실행 컨텍스트는 Closure, Hoisting, Scope, This 와 같은 주요 동작 원리를 담고 있는 JavaScript 엔진의 핵심 원리이기 때문에, 반드시 공부해두자
실행 컨텍스트의 종류
- 전역 실행 컨텍스트(Global Execution Context) :
- 전역에 존재하는 소스코드를 실행한다.
- 함수 안에서 실행되는 코드가 아니라면 모두 여기서 실행된다고 보면 된다.
- 브라우저의 경우, window 객체가 이에 해당한다.
- 함수 실행 컨텍스트(Function Execution Context) :
- 함수 내부에 존재하는 소스코드를 실행한다.
- 선언된 함수가 호출이 될 때 생성이 되고, 함수가 종료되면 소멸된다.
- Eval Function Execution Context :
- 빌트인 전역 함수인 eval 함수로 실행되는 소스코드를 실행한다.
실행 컨텍스트의 단계
자바스크립트 엔진은 소스 코드를 두 가지 과정으로 나누어 처리한다.
기본적으로 가장 먼저 전역 실행 컨텍스트를 생성한다. (window 객체)
Creation Phase
- 메모리에 변수와 함수를 저장한다.
- 변수는 undefined를 값으로, 함수는 함수 참조를 저장한다.
함수 선언식은 저장되지만, 함수 표현식은 저장되지 않는다.
var 변수는 선언과 초기화가 동시에 이뤄지기 때문에, undefined가 아닌 해당 값이 바로 초기화된다.
Excution Phase
- 위에서 아래로 코드를 순차적으로 실행한다.
- 변수가 초기화 또는 할당되면 값을 넣는다.
- 함수 선언식은 건너뛰고, 함수가 호출되면 함수 컨텍스트를 생성한다.
- 함수 내의 변수나 내부함수는 함수 컨텍스트 내부에 저장된다.
- 함수가 종료되거나 값을 반환하면 함수 컨텍스트는 종료된다.
- 모든 코드가 끝이나면, 실행 컨텍스트 또한 종료된다.
이는 모든 실행 컨텍스트에서 동일하게 진행된다.
실행 컨텍스트의 구성
변수 객체(Variable Object)
- 함수의 인자, 변수, 그리고 선언된 함수들이 저장된다.
- 함수 인자는 해당 함수의 실행 컨텍스트 안에서만 유효하며 함수가 실행되는 동안에만 존재한다.
스코프 체인(Scope Chain)
- 현재 실행 컨텍스트에서 접근할 수 있는 변수들의 구조
- 내부 함수에서 변수를 탐색할 때, 함수의 계층적 구조에 따라 내부 함수부터 외부 함수, 전역 스코프를 단계적으로 탐색하는 과정
this binding
this는 현재 컨텍스트를 가리킨다.
콜 스택(Call Stack)
- 실행 컨텍스트는 콜 스택이라는 자료 구조에 의해 관리된다.
- 함수가 실행되면 해당 함수에 대한 실행 컨텍스트를 생성한 뒤 콜스택에 담는다.
- LIFO(Last-In-First-Out)
function funcA(m,n) {
return m * n;
}
function funcB(m,n) {
return funcA(m,n);
}
function getResult(num1, num2) {
return funcB(num1, num2)
}
var res = getResult(5,6);
console.log(res); // 30
- 가장 먼저 전역 실행 컨텍스트가 생성된다.
- funcA, funcB, getResult 함수와 변수 res가 메모리에 저장된다. [Creation Phase]
- getResult() 함수가 호출되고, 함수 실행 컨텍스트가 콜 스택에 push된다. [Excution Phase]
- 내부 함수 funcB()가 호출되고, 콜 스택에 push된다.
- 내부 함수 funcA()가 호출되고, 콜 스택에 push된다.
- 각 함수의 실행이 종료되면 반환값을 상위 함수에 전달하고, 실행 컨텍스트는 pop되어 사라진다.
- 모든 함수 실행 컨텍스트가 종료되면 변수 res에 최종 반환값이 저장되고 이를 출력한다.
- 마지막으로 페이지를 나가거나 브라우저를 종료하면 전역 실행 컨텍스트가 종료된다.
참조
https://www.datoybi.com/execution-context/
