[자바스크립트] 콜 스택 분석하기

그동안 어렴풋 하게만 알고 있던 콜스택에 대해 강의를 듣고 정리해보았다. 

 

// c함수 선언
function c() {
  const y = 'y';
  console.log('c');
}

// a 함수 선언
function a() {
  console.log('a');
  function b() {
    console.log('b');
    c(); // c함수 호출
  }
  b(); // b함수 호출
}

a(); // a 함수 호출 /출력: a, b, c 
c(); // c 함수 호출 /출력: c

 

[배운 것]

1.  자료구조

• - 스택: 명함집/저금통 FILO or LIFO (가장 처음에 들어온 것이 가장 마지막에 나감)
• - 큐: 컨베이어 벨트 FIFO (가장 처음 들어온 것이 가장 먼저 나감)

2.  호출과 선언을 명확하게 구분해서 '호출만' 스택에 담아서 호출스택을 확인하자. 헷갈리면 선언이면 에디터에서 접어버리고 확인하기

3. 함수가 호출되면 선언이 실행된다.(중괄호 안) 따라서 위의 예제에서 a()호출하고 c()호출되는 것이 아니라, a의 선언부분으로 간다.

4. 선언 실행이 끝나면 다시 함수 호출 부분을 살펴본다. 호출과 선언사이에 연결고리가 있다고 생각하기

5. 선언이 끝나는 때가 호출스택에서 빠져나가는 때이다.

 

[콜스택 단계별로 확인하기]

[1단계]
|     |
|     |
| log | console.log('a') --> 호출이나 별도 선언문은 없다 / 입력: a
|__a__| a()


[2단계]
|     |
|     |
|     | console.log('a') --> 끝나면서 스택에서 제거된다.
|__a__| a()


[3단계]
|     |
| log | console.log('b') --> 호출이나 별도 선언문은 없다 / 입력: b
|  b  | b()
|__a__| a()


[4단계]
|     |
|     | console.log('b') --> 끝나면서 스택에서 제거된다.
|  b  | b()
|__a__| a()


[5단계]
|     |
|  c  | c()
|  b  | b()
|__a__| a()


[6단계]
| log | console.log('c') --> 호출이나 별도 선언문은 없다 / 입력: c
|  c  | c()
|  b  | b()
|__a__| a()


[7단계]
|     | console.log('c') --> 끝나면서 스택에서 제거된다.
|  c  | c()
|  b  | b()
|__a__| a()


[8단계]
|     | 
|     | c() -> 함수 c의 실행이 끝났으므로 스택에서 제거된다.(선언이 끝나는 부분이 스택에서도 빠져나가는 때이다)
|  b  | b()
|__a__| a()


[9단계]
|     | 
|     | 
|     | b() -> c 선언 실행이 끝났으므로, 다시 c 함수 호출부분으로 돌아가보자. 
|     | 살펴보면 함수 b 선언의 끝 부분이다. 함수 b의 실행이 끝났으므로 스택에서 제거된다.
|__a__| a()


[10단계]
|     | 
|     | 
|     | 
|_____| a() -> b 선언 실행이 끝났으므로, 다시 b 함수 호출부분으로 돌아가보자. 
        살펴보면 함수 a 선언의 끝 부분이다. 함수 a의 실행이 끝났으므로 스택에서 제거된다.


[11단계]
|     |
|     |
| log | console.log('c') --> 호출이나 별도 선언문은 없다 / 입력: c
|__c__| c()


[12단계]
|     |
|     |
|     | console.log('c') --> 끝나면서 스택에서 제거된다.
|__c__| c()


[13단계]
|     |
|     |
|     | 
|_____| c() -> 함수 c의 실행이 끝났으므로 스택에서 제거된다.

 

[개발자 도구에서 호출스택 확인]

debugger를 사용하면 sources 탭에서 call stack을 확인할 수 있다.

 

참고자료 : https://www.youtube.com/watch?v=ZF6aDhBp5r8&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=4