--- title: 호출 스택 slug: Glossary/Call_stack tags: - Glossary - JavaScript - 호출 스택 translation_of: Glossary/Call_stack ---

호출 스택은 여러 함수들({{glossary("function","functions")}})을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터 (웹 브라우저의 자바스크립트 인터프리터같은)를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고있는 지, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는 지 등을 제어합니다.

예제

function greeting() {
   // [1] Some codes here
   sayHi();
   // [2] Some codes here
}
function sayHi() {
   return "Hi!";
}

// Invoke the `greeting` function
greeting();

// [3] Some codes here

위 코드는 다음과 같이 실행될 것입니다.

  1. greeting() 함수에 도달할 때까지, 모든 함수를 무시합니다.
  2. greeting() 함수를 호출합니다.
  3. greeting() 함수를 호출 스택 리스트에 추가합니다.

    호출 스택 리스트:
    - greeting

  4. `greeting` 함수 내부의 모든 코드를 실행합니다.
  5. sayHi() 함수를 얻습니다.
  6. sayHi() 함수를 호출 스택 리스트에 추가합니다.

    호출 스택 리스트:
    - greeting
    - sayHi

  7. sayHi() 함수의 끝에 도달할 때까지, 함수 내부의 모든 코드를 실행합니다.
  8. sayHi() 가 호출된 라인으로 돌아와 greeting() 함수의 나머지를 계속 실행합니다.
  9. 호출 스택 리스트에서 sayHi() 함수를 제거합니다.

    호출 스택 리스트:
    - greeting

  10. greeting() 함수 내부의 모든 코드가 실행되었을 때, 이를 호출한 라인으로 돌아와 JS 코드의 나머지를 계속 실행합니다.
  11. 호출 스택 리스트에서 greeting() 함수를 제거합니다.

    호출 스택 리스트:
    EMPTY

우리는 빈 호출 스택으로 시작하며, 함수를 호출할 때마다 자동으로 호출 스택에 추가되고, 해당 코드가 모두 실행된 후, 호출 스택에서 자동으로 제거됩니다. 결국, 마찬가지로 빈 호출 스택으로 끝납니다.

더 알아보기

일반 지식