[자바스크립트] 실행 컨텍스트에 콜 스택 더하기

내용 구성

1. 실행 컨텍스트
2. 스택
3. 콜 스택 (Call Stack)
4. 마치며

 

참고 자료

• (195) [NHN FORWARD 2021] 결국 자바스크립트를 알아보기로 했다. - YouTube

---

실행 컨텍스트

이전 글에서 실행 컨텍스트를 다뤘다. 자바스크립트가 로드되면 엔진이 실행 컨텍스트를 생성하는데, 실행 컨텍스트는 코드를 실행하는 데 필요한 정보의 모임이다.

자세한 내용은 아래 링크를 참고하면 되고, 이제 콜 스택에 대해 알아보자!

예제 코드로 맛 보는 실행 컨텍스트

 

 

 

스택

콜 스택이란 이름에서 알 수 있듯 콜 스택은 스택 구조다. 따라서 먼저 스택 자료 구조에 대해 간단히 복습해보자.

 

스택에 1, 2, 3 순서대로 데이터 삽입 후 pop 연산 1회 실행

 

• LIFO (Last In, First Out)

스택은 가장 먼저 들어온 데이터가 가장 늦게 스택을 빠져 나간다. 다르게 말하면 가장 늦게 들어온 데이터가 가장 먼저 나간다. 그래서 불공평한 자료 구조라고도 말한다.

 

 

• top

스택의 데이터 삽입과 삭제는 모두 스택의 한쪽 끝에서만 이뤄지기 때문에 top이라는 변수가 따라 다닌다. top은 스택의 가장 최상단, 즉 가장 마지막에 들어온 데이터를 가리킨다. 따라서 스택에 pop 연산이 발생하면 top이 가리키고 있는 데이터가 제거되고, top은 그 밑의 데이터를 가리키게 된다. 이 대목에서 top이 스택의 크기와 같다는 특징도 알아낼 수 있겠다.

 

 

 

콜 스택 (Call Stack)

콜 스택은 실행 컨텍스트가 쌓이는 구조체이다. top은 현재 실행되고 있는 실행 컨텍스트를 가리킨다. 가장 최근에 생성된 실행 컨텍스트가 스택의 최상위에 쌓이기 때문이다.

 

function add3(n) {
  const three = 3;
  const result = three + n;
  return result;
}

function calc(num) {
  let retValue;

  const addResult = add3(num);

  retValue = "결과는 " + addResult;
  return retValue;
}


const number = 5;
const calcResult = calc(number);

 

위 코드에는 add3 함수와 calc 함수가 있고, calc 함수가 내부적으로 add3 함수를 호출한다. 이 코드로 콜 스택을 알아보자.

 

 

위 자바스크립트 코드가 로드되고, 엔진은 전역 실행 컨텍스트와 그것의 메모리를 생성한다. 이때 콜 스택 구조체에도 전역 실행 컨텍스트가 삽입된다. 현재 실행되고 있는 실행 컨텍스트는 전역 실행 컨텍스트! 이제 한 줄씩 코드에 접근하면서 전역 메모리에 라벨과 값을 할당하자.

 

라인1, 7, 17 18

 

1번, 7번, 17번 라인을 지나서 18번 라인에 도달했을 때의 모습이다. add3 함수와 calc 함수, number 변수가 전역 메모리에 등록됐다. calcResult 라벨도 전역 메모리에 등록됐지만, 아직 calc 함수가 호출되진 않아 그 값은 정해지지 않았다.

 

18번 라인 - calc 함수 호출

 

소괄호를 사용해 calc 함수를 호출해보자. 그러면 아래 3단계가 진행된다.

 

1. 전역 실행 컨텍스트 내부에 calc 실행 컨텍스트와 이것이 사용할 로컬 메모리가 생성된다.
2. 콜 스택에 calc 함수가 Push 된다.
3. 콜 스택의 스택의 top이 새로 호출(=삽입)된 calc 함수를 가리킨다.

 

10번 라인 - add3(num) 호출 전

 

calc 실행 컨텍스트에서 retValue 라벨과 addResult 라벨을 로컬 메모리에 등록했고, 10번 라인을 통해 add3 함수를 호출한 상황이다. calc 실행 컨텍스트 내에서 add3 함수를 호출했기 때문에, calc 실행 컨택스트 안에 add3 실행 컨텍스트와 그것의 로컬 메모리가 생성된다.

 

역시 콜 스택에도 add3 함수가 Push 되고, top이 add3 함수를 가리키도록 바뀐다.

 

4번 라인

 

add3 함수의 지역 변수들이 로컬 메모리에 등록되고, result = three + n; 코드의 결과가 result에 할당됐다. 이제 4번 라인을 통해 result 값을 반환하여 calc 함수의 addResult에 할당하자.

 

10번 라인 - add3(num) 함수 종료

 

add3 함수가 return 되면서 해당 함수가 종료됐다. 함수가 반환 값을 뱉는 즉시 해당 함수(add3)의 실행 컨텍스트 종료되고, 콜 스택에서도 pop 되어 사라진다.

 

12번 라인

 

retValue 라벨은 진작부터 로컬 메모리에 등록되어 있었다. 이제 calc 실행 컨텍스트에서 "결과는"이라는 문자열과 addResult를 더하는 연산을 진행하고, 그 결과를 retValue에 할당한다.

 

13번 라인

 

13번 라인을 통해 calc 함수의 retValue 값이 전역 메모리의 calcResult에 할당된다.

 

18번 라인

 

calc 함수가 리턴 값을 반환함으로써 처음 calc 함수를 호출했던 18번 라인으로 돌아왔다. add3 함수가 종료됐을 때와 마찬가지로, calc 함수가 리턴 값을 반환하자마자 calc 실행 컨텍스트가 종료되고 콜 스택에서도 pop 되어 사라졌다.

 

이제 18번 코드까지 모두 실행하고나면 전역 실행 컨텍스트가 종료되고, 콜 스택에서도 전역 실행 컨텍스트가 삭제되면서 프로그램이 종료된다.

 

콜 스택 변화 정리

 

정리하자면, 위 자바스크립트 코드를 실행하면서 콜 스택의 변화 과정만 나타내면 이러하다. 전역 실행 컨텍스트는 콜 스택의 가장 바닥에 존재하며, 프로그램이 처음 실행될 때 생성되고 종료될 때까지 존재한다. 멋진 말로 표현하자면 전역 실행 컨텍스트의 생명 주기는 프로그램의 생명 주기와 동일하다.

 

 

 

마치며

콜 스택은 나중에 비동기 처리, 이벤트 루프 등을 다룰 때에도 필수적으로 따라오는 개념이다. ... 자바스크립트의 동작 원리에 포함되니까 어딜 가나 당연히 빠지지 않고 등장하겠지만.

 

아무튼. 꼭 기억해야 하는 것은 콜 스택은 현재 실행 중인 컨텍스트를 추적하기 위해 사용하는 자료 구조라는 것이다! top을 통해 새로운 실행 컨텍스트가 Push 되면 그걸 가리키고, 실행 컨텍스트가 종료되면 Pop 해서 이전에 실행되던 실행 컨텍스트로 옮겨가서 그걸 가리키고 있으니까. top의 행동 덕분에 콜 스택이 실행 컨텍스트를 추적한다는 의미가 잘 와닿는다.