자바스크립트 호출스택 정리

다음 코드의 결과값을 예측해보자.

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(); // a b c
c(); // c

호출 스택을 이해하려면 함수의 선언과 호출에 대해서 이해를 먼저 해야한다.
함수 선언 호출, 고차함수 정리 글

위의 글에서 함수의 선언과 호출에 대해서 정리해놓았다.

const x = "x";

function c() {...}

function a() {...}

a();
c();

저 function 부분은 함수의 선언, a() 와 c() 는 함수의 호출인데 함수가 호출이 되면 호출 스택에 함수가 쌓인다.

코드는 아래에서 밑으로 순차적으로 실행이되니 먼저 a함수가 호출 되고 콘솔창이 출력된다. 그 후 a안에 b함수를 선언하고 호출하는 코드가 또 있기 때문에 b함수가 호출되고 콘솔창이 출력된다.

그리고 또 b함수 안에 있는 c 함수가 호출이 되고 콘솔창이 출력된다.

그 후에 c 함수가 호출이 되고 콘솔창이 출력된다.

❗️ 함수를 호출하면(()를 만나면) 그 함수의 {} 부분으로 이동한다 ❗️