Scope와 Call Stack

본 포스팅을 통해 JavaScript Scope와 Call Stack의 차이를 알아보자. 

우선 다음의 코드를 먼저 살펴보자.

const a = 'How old are you?';
first();

function first() {
  const b = 20;
  sedonc();

  function second() {
    const c = 30;
    third();
  }
}

function third() {
  const d = 40;
  console.log(d + c + b + a);
  // ReferenceError
}

함수가 불려진 순서에 따라 콜 스택에 쌓이기 때문에 위 코드에 대한 콜 스택은 다음과 같을 것이다.

각 함수별 실행 컨텍스트가 존재하며 각 실행 컨텐스트에 해당 함수에 포함된 변수들이 표기되어 있다. 함수 별 실행 컨텍스트는 함수가 불려진 순서에 따라 콜스택에 쌓여있다.

콜 스택에 쌓인 실행 컨텍스트

이제, 앞서 본 코드의 scope chain 을 함께 살펴보도록 하자.

함수 Scope 별 접근 가능 변수 

1. global scope에 선언된 변수 및 함수들은 Global EC에 포함된 변수 및 함수들과 동일하다.

2. first() scope은 global scope에 선언된 변수 및 함수를 포함하여 first() 함수 내에서 선언된 변수 및 함수를 가진다. (scope chain)

3. second() scope은 global scope + first() scope에 선언된 변수 및 함수를 모두 포함한다. (scope chain)

4. third() scope은 third() 함수 내에서 선언된 변수와 global scope에 선언된 변수 및 함수만을 포함한다. 

 

Scope Chain에 따르면 global scope에 선언된 third() 함수는 first()와 second() 함수에서 접근 가능한 반면 해당 두 함수 scope에 선언된 변수 및 함수에 접근 수 없다. 따라서 본 포스팅 맨 처음에 첨부한 코드 16 줄에서 ReferenceError가 발생하는 것이다. 

(third() 함수에서 first(), second() 함수 내부에 선언된 변수 c와 d에 접근하려 하기 때문)

 

 

마지막으로 정리하자면, scope chain은 코드가 작성된 순서를 바탕으로 결정되며 함수가 불려진 순서와 무관하다. 

한편, call stack에는 함수가 불려진 순서에 따라 해당 함수의 EC가 call stack에 쌓인다. 

 

두 개념을 확실히 알아두면 JavaScript로 코드를 짤 때 많은 도움이 될 것이다.