Call Stack - 호출스택.

const x = "x"; 

function c () { 
  const y = "y" 
  console.log("c") 
}

function a ()  { 
  const x = "x" 
  console.log("a") 
  function b () { 
    const z = "z" 
    console.log("b") 
    c() 
  }
  b()
}

a() 
c() 

위 페이지를 실행시켰을 경우 과연 콘솔창엔 어떻게 출력될까요 ?

와 같이 출력됩니다.

위의 코드를 자바스크립트 엔진은 callStack 이란 곳에 저장해두는데, First In Last Out 처리가 되는 콜스택은
제일 먼저 호출된 함수가 제일 마지막에 종료됩니다.

위 함수를 스택 구조로 표현하자면

c 함수 4번 => 콘솔 c 출력 => 제일 먼저 함수 종료
b 함수 3번 => 콘솔 b 출력 => 다음으로 함수 종료
a 함수 2번 => 콘솔 a 출력 => 마지막으로 함수가 종료되며 콜스택에서 사라짐.
익명 1번 => 전역공간

위와 같이 호출스택에 쌓이는데요
호출 스택은 말그대로 호출된 함수가 쌓인 영역입니다.
결국 제일 먼저 호출된 a함수는 제일 마지막에 호출된 c함수가 종료되면, 다음 b함수가 종료되고, 그 다음 마지막으로 a가 호출되며
호출 스택에서 사라집니다.
그리고 다시 c 함수가 호출되고 다시 한번 log가 찍히며 함수가 종료됩니다.