[자바스크립트 개발자가 알아야 할 33가지] #1 실행 컨텍스트

https://github.com/yjs03057/33-js-concepts#1-%ED%98%B8%EC%B6%9C-%EC%8A%A4%ED%83%9D

GitHub - yjs03057/33-js-concepts: 모든 자바스크립트 개발자가 알아야 하는 33가지 개념

위의 링크를 참고하여 자바스크립트 개발자가 알아야 할 33가지를 공부해보자. 특히 첫 번째는 콜 스택에 대한 내용인데 더 큰 개념으로 실행 콘텍스트를 이해하는 것이 중요하다고 생각하여 실행 콘텍스트에 대한 내용을 정리하고 콜 스택의 내용을 조금 포함시키려고 한다.

---

실행 컨텍스트라는 이름의 의미

ECMAScript에는 실행 콘텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 설명하고 있다. 한 번에 의미를 이해하기 어려웠다. 쉽게 말하면 소스코드가 실행하는 데 필요한 환경을 제공하고 실행 결과들을 관리하는 영역이라 할 수 있다.

 

다음 코드를 통해 실행 컨텍스트의 의미를 이해해보자. 그전에 자바스크립트 엔진은 소스코드의 평가 과정과 실행 과정으로 나뉜다는 것을 알아야 한다. 즉 평가 과정을 통해 선언문을 등록하고 런타임 시에 소스코드가 실행된다. 

const a = 5;

function foo() {
  const b = 10;
  console.log("hello");
}

foo();

위의 코드가 실행되는 순서는 다음과 같다.

 

전역 코드의 평가

먼저 전역 코드의 평가 과정이 실행된다. 이때 실행 가능한 코드를 형상화하기 위한 실행 콘텍스트가 생성이 되고 변수와 함수 선언문을 key-value 쌍으로 등록한다. 즉 변수 a와 함수 foo가 전역 실행 콘텍스트에 등록된다.

 

전역 코드의 실행

이제 런타임 환경에서 전역 코드가 실행이 되면 순차적으로 코드가 실행되고 변수 a에는 5라는 값이 대입되며 함수 foo가 실행된다. 이제 함수 foo 내부에 들어가게 된다.

 

foo함수의 평가

foo함수가 전역에서 호출되어 foo함수 내부에 들어서게 되면 마찬가지로 평가 과정이 실행되어 foo 실행 컨텍스트가 생성되어 변수 b가 등록된다.

 

foo함수의 실행

이제 함수 foo가 실행되면서 변수 b에 10이 대입되고 "hello"가 출력된다. 이어서 함수가 종료되고 foo 실행 콘텍스트가 콜 스택에서 POP 되고 함수 foo를 호출한 전역 코드로 돌아가게 된다.

 

이처럼 정상적으로 코드가 실행되기 위해서는 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. 따라서 실행 컨텍스트라는 추상적인 공간을 만들고 식별자를 등록하여 관리, 스코프와 코드 실행 순서를 관리를 한다. 

이제 ECMAScript에서 정의한 실행 컨텍스트의 의미인 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이 조금은 와닿을 수도 있다.

---

콜 스택

코드를 실행하기 위한 환경인 실행 컨텍스트를 생성하면 코드의 실행 순서를 관리해야 한다. 이때 생성된 실행 콘텍스트들의 순서를 관리하는 것은 콜 스택(실행 콘텍스트 스택)에서 이루어진다.

 

아래의 코드와 그림을 통해 콜 스택으로 어떻게 실행 컨텍스트를 관리하는지 알아보자.

const a = 5;

function foo() {
  console.log("hello");

  function bar() {
    console.log("world");
  }

  bar();
}

foo();

 

아래의 그림은 위의 코드가 실행되는 순서를 콜 스택으로 구현한 것이다. 

• 코드가 실행되고 전역 실행 컨텍스트가 생성되면서 콜 스택에 쌓인다.
• 전역 코드에서 foo함수를 호출하고 foo 함수 실행 콘텍스트가 콜 스택에 쌓인다.
• foo 함수에서 bar 함수를 호출하여 bar 함수 실행 컨텍스트가 콜 스택에 쌓인다.
• bar 함수가 종료되면서 콜 스택에서 제거된다.
• bar 함수를 호출했던 foo 함수로 돌아오고 foo 함수도 종료되어 콜 스택에서 제거된다.
• foo 함수를 호출했던 전역 코드로 돌아오게된다.

위의 그림처럼 생성된 실행 콘텍스트의 순서를 콜 스택을 통해 관리하게 된다.