Scope와 Closure, 그리고 Hoisting을 공부하다 보니 실행 컨텍스트를 먼저 더 알아야 쉽게 이해할 수 있다는 걸 깨닫고 정리해보는 글

👩🏻‍💻 실행 컨텍스트란?

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로 동적 언어로서의 자바스크립트 성격에 대해 가장 잘 파악할 수 있는 개념입니다.
자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 넣었다가 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

더 자세하게 말하기에 앞서 아래 코드로 테스트를 해봅시다.

a();
var a = function() {
	//...
}

이 코드를 입력하게 된다면 결과는 어떻게 나올까요?
정답은 TypeError입니다.
표현 식이라 에러가 나는 줄 알았는데 이유는 호이스팅 때문인데요,

var a;
a();
a = function() {
	//...
}

var가 호이스팅 되어서 a가 선언된 상태이고 변수 a를 호출한 상태임으로 타입에러가 발생합니다.

a();
let a = () => {
	//...
}를 입력하세요

이 코드는 Error가 나타납니다.
let과 const는 호이스팅이 되지 않기에 a를 호출해도 아직 정의된 것이 없기에 에러가 나타나는 것이죠.

그럼 실행 컨텍스트에 더 다가가보기 위해 아래 예제 코드를 봐봅시다.

var a = 1;

function outer() {
  console.log(a); 

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

  inner();

  console.log(a); 
}

outer();
console.log(a); 

실행되는 순서와 어떤 값이 출력이 될까요?
정답은

var a = 1;

function outer() {
  console.log(a); //(1) 1

  function inner() {
    // var a; 호이스팅
    console.log(a); //(2) undefined
    var a = 3;
  }

  inner();

  console.log(a); //(3) 1
}

outer();
console.log(a); //(4) 1

이 순서대로 인데요
1. 전역 컨텍스트가 생성되고 전역 공간을 한 줄 한 줄 실행합니다.
2. 변수 a와 함수 outer를 선언하여 환경 레코드에 식별자를 바인딩합니다. (생성단계)
3. 함수 outer()를 호출하면 outer함수의 실행 콘텍스트가 생성되어 콜스택에 쌓입니다.
4. outer함수에 Inner함수를 선언하여 환경 레코드에 식별자를 바인딩합니다. (생성단계)
5. outer함수에 첫 줄 console.log(a)가 실행되고 console.log컨텍스트가 생성되어 콜스택에 쌓입니다.
6. a를 찾아 올라가게 되고(Scope Chain) 1을 출력하여 console.log(a)컨텍스트는 사라지고 콜스택에서 빠져나옵니다.
7. inner함수가 호출되면 inner함수의 콘텍스트가 생성됩니다.
8. inner함수의 변수 a를 선언하여 식별자를 바인딩합니다. (생성단계)
9. inner함수 내의 console.log(a)를 실행하면 console.log실행 컨텍스트가 생성되어 콜스택에 쌓입니다.
10. a는 호이스팅이 되어 undefined를 출력하고 console.log 실행 컨텍스트가 사라지고 콜스택에서 빠져나옵니다.
11. inner 실행 컨텍스가 사라지고 콜스택을 빠져나옵니다.
12. outer 함수의 마지막 줄인 console.log(a)가 실행되면 실행 컨텍스트가 생성되고 콜스택에 쌓입니다.
13. a를 찾아 올라가(Scope Chain)1을 출력한 후 consoel.log실행 컨텍스트가 사라지고 콜스택을 빠져 나옵니다.
14. outer 실행 컨텍스트가 사라지고 콜스택을 빠져나옵니다.
15. 전역 컨텍스트의 마지막 줄인 console.log(a)가 실행되고 console.log실행 컨텍스트가 생성되어 콜스택에 쌓입니다.
16. console.log(a)의 1을 출력하면 console.log 실행 컨텍스트가 사라지고 콜스택을 빠져나옵니다.
17. 컨텍스트도 종료가 됩니다.

순서를 잘 보시면 실행 컨텍스트에 대해서 잘 파악할 수 있을 겁니다.