자바스크립트 호출스택 연습

const x = "x";

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

function a() {
  const x = "x";
  console.log("a"); 

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

  b();
  console.log(x);
}

a(); // a b c y z x 
c(); // c y 

위의 코드가 있다고 가정했을때 출력 순서가 어떻게 될것인지 한번 예상해보자.

1. a()가 호출 되었기때문에 a가 호출스택에 쌓인후에 console.log('a')가 실행된다.
2. a함수 안에 b()함수가 호출되어서 b함수가 호출스택에 쌓인다.
3. b함수 안에 console.log('b')가 실행되고 c함수가 호출되어서 호출스택에 쌓인다.
4. c함수 안에 console.log('c')와 console.log(y)가 출력된다.
5. c함수가 전부 호출되어서 호출스택에서 사라지고 console.log(z)가 실행된다.
6. b함수가 전부 실행되었으므로 호출스택에서 사라지고 a함수의 마지막인 console.log(x)가 실행된다. a함수도 전부 실행되었으므로 호출스택에서 사라지고 a() 가 종료된다.
7. c함수가 호출되어서 다시 console.log('c')와 console.log(y)가 실행되고 모든 함수 실행이 종료된다.

a함수가 호출이 되었다고해서 바로 다음 함수인 c 함수로 가는것이 아니라, a의 선언부분으로 회귀해서 a 함수 선언안에 있는 내용들이 실행된다.