호출 스택 분석

 

함수를 호출하게 되면 함수를 선언한 코드로 돌아가 함수의 선언부를 실행하게 됩니다.

 

이를 하나의 스택이라는 개념을 만들어 호출할 때마다 하나씩 쌓고, 함수가 끝날 때마다 빼는 것이 함수 호출 스택의 기본 매커니즘이라고 생각하면 됩니다. 다음 예제를 보면서 호출 스택의 과정을 자세히 보겠습니다.

 

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();

 

   1. const x 와 function c, function a 는 함수 선언이므로 이 둘을 지나쳐 함수 호출을 하고 있는 a(); 부터 함수호출이 진행돼 a 함수는 호출 스택에 제일 먼저 쌓이게 됩니다. a 함수를 호출했으니 a 함수의 선언부 { } 부터 보겠습니다. const x = 'x' 로 변수 선언하고,(이 역시 호출이 아닌 선언이므로 호출 스택에 변화 x) console.log('a') 는 호출 스택에 쌓이게 됩니다. 하지만, 곧바로 진행돼 콘솔창에 a  문자열을 띄웁니다.

 

   2. 그 다음 function b 가 함수 선언되어 호출스택에 쌓이지 않고, 바로 다음 b(); 를 통해 함수 호출되어 호출 스택에 b 가 두 번째로 쌓이게 됩니다. 바로 b 함수를 실행해 콘솔창에  a 다음으로 b 를 띄웁니다. 

 

   3. 그리고 다음 줄에 만난 c(); 로 인해 c 함수가 세 번째로 호출 스택에 쌓입니다. 곧바로 c  함수를 실행해 콘솔창에  c 를 띄우고, c 함수를 끝낸 b 함수가 종료되고, b 함수를 끝낸 a 함수가 종료됩니다.

 

   4. a  함수는 종료되고, 마지막 줄에 있는 c(); 로 인해 c 함수가 호출되어 세 번째로 마지막으로 호출 스택에 쌓이게 됩니다. 

 

 

이 과정에서 초보자들이 헷갈리는 부분은 역시 b 함수 내에 c 함수를 실행하고, 다시 어디를 봐야 하는지 헷갈리는 부분일 것입니다. 처음부터 조금의 기초지식(스파르타코딩클럽(내일배움단), 생활코딩, 제로초, 백준 등) 이 조금 깔려 있어서 그런지 다행히도 함수 호출이라는 부분이 저에게는 크게 어려운 부분은 아니었지만, 어디가 어떻게 진행되고, 호출이 무엇이고, 스택이 무엇인지에 대해서는 자세히 제 입으로 설명하기엔 불가능했습니다. 

 

과정이 번거롭다고 느끼지만, 자바스크립트 엔진이 되기 위해 결과값을 예상하기 위해서는 반드시 거쳐야 할 과정이라고 생각합니다.

 

호출 스택을 직접 그리지 않고도 debugger 를 사용해 확인할 수 있는 방법이 있습니다.