실행컨텍스트에 대해 알아보자.

코어 자바스크립트를 공부하면서 실행 컨텍스트에 관한 내용이 나왔다. 지금까지 면접 준비를 하면서 실행컨텍스트의 개념은 알고 있었지만, 정확히 어떻게 작동을 하는지는 자세히 알지 못했다.

코어 자바스크립트 책을 보면서 어떻게 실행 컨텍스트가 생성되고 쓰이는지 알아보자!

실행 컨텍스트?

실행컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다.

자바스크립트는 어떤 실행 컨텍스트가 활성화 되는 시점에 호이스팅을 하고, 외부 환경정보를 구성하고, this값을 설정한다.

자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

여기서 “동일한 환경”은 하나의 실행컨텍스트를 구성할 수 있는 방법으로 전역공간, eval()함수, 함수등이 있다.

자동으로 생성되는 전역공간과 eval을 제외하고 우리가 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것이다.

실행 컨텍스트 예시 코드

var a = 1;
function outer() {
  function inner() {
    console.log(a, 'inner'); // (1) inner undefined
    var a = 3;
  }
  inner();
  console.log(a, 'outer'); // (2) outer 1
}
outer();
console.log(a, 'global'); // (3) global 1

/*
console.log 실행순서
1. inner undefined
2. outer 1
3. global 1
*/

위 코드를 실행했을 때, 자바스크립트 콜 스택에 쌓이는 순서를 그림으로 표현해보자.

예시 그림

코드가 실행되는 순간 전역 컨텍스트가 콜스택에 담긴다.
outer함수의 실행컨텍스트를 생성한 뒤 콜스택에 담는다.
outer함수 내에 있는 inner함수를 실행시키고 실행 컨텍스트를 콜스택에 담는다.
inner함수를 실행시키고 (1)번째 콘솔로그를 실행시킨다.
이때 a에는 아무런 값이 없으므로 undefined다.
inner()함수를 다 실행시키고 난 뒤 콜스택에서 제거한다.
다음 스택 순서인 outer함수내에 있는 (2)번째 콘솔로그를 실행시킨다. 이 때 a는 1이다.
(3)번째 콘솔로그를 실행시킨 후 더 이상 실행할 코드가 없으므로 전역 컨텍스트도 콜스택에서 제거한다.

실행 컨텍스트가 활성화 될 때 자바스크립트는 해당 컨텍스트와 관련된 코드를 실행하는데 필요한 정보들을 실행 컨텍스트 객체에 저장한다.

실행컨텍스트에 대해 알아보자.