서론
- 대부분의 프로그래밍 언어에서는 함수 호출을 관리하는 데이터 구조가 있다.
- 자바스크립트에서 함수 호출을 관리하는 것이 콜 스택이다.
- 콜 스택은 자바스크립트의 보이지 않는 곳에서 작동하는 정적 데이터 구조이다.
- 함수를 호출하게 되면 콜 스택에 스택이 쌓이게 되고 가장 위에 쌓인 함수부터 처리 후 콜 스택에서 제거된다.
- 콜 스택에서 제거되는 조건은 함수가 종료되거나 return을 하게 되었을 때이다.
콜 스택이 동작하는 과정
콜 스택의 과정을 보여주기 위해 작성한 코드 이다.
trigger 함수에 breakpoint를 걸고 우측의 콜 스택 블럭을 통해 진행 과정을 알아보자
trigger 함수 호출
1. trigger 함수 호출
먼저 trigger 함수가 호출되면 콜 스택에 쌓인다.
trigger 함수를 콜 스택에 추가
2. firstFn 함수 호출
이전에 호출된 trigger 함수에서 firstFn 함수를 호출
콜 스택에 firstFn 함수가 쌓이게 된다.
아직 trigger 함수는 끝나지 않은 상태임과 동시에 가장 먼저 호출된 함수이기 때문에 가장 아래에 위치해 있다.
firstFn 함수를 콜 스택에 추가
이후 firstFn 함수는 return 을 한다.
firstFn 함수에서 값을 return
return을 했으니 콜 스택에서 firstFn 함수는 제거 된다.
firstFn 함수를 콜 스택에서 제거
3. secondFn 함수 호출
trigger 함수에서 firstFn 함수가 호출/제거 된 후, secondFn 함수를 호출하게되면 콜 스택에 쌓인다.
이 때도 아직 trigger 함수는 끝나지 않았기 때문에 아직 콜 스택에 남아있다.
secondFn 함수를 콜 스택에 추가
이 후 secondFn 함수에서 generateNumber 함수를 호출하면 콜스택에 쌓인다.이 때 아직 secondFn 함수는 끝나지 않았기 때문에 콜스택에 남아있다.
secondFn 함수에서 값을 return
generateNumber 함수가 1이란 값을 return 했기 때문에 종료 후 콜 스택에서 제거된다.
secondFn 함수를 콜 스택에서 제거
이후 sencondFn 함수는 generateNumber 함수에서 return된 값 1을 가지고 return을 하게 된다.
이렇게 secondFn 함수도 return한 후 콜 스택에서 제거된다.
4. trigger 함수 종료
- secondFn 함수도 종료 / 제거가 되면서 trigger함수는 마지막 남은 console.log를 띄운다.
trigger 함수에서 condole.log를 띄움
console.log를 띄운 후 trigger 함수도 종료가 된다.
trigger 함수에서 띄운 log
trigger 함수를 콜 스택에서 제거
피드백은 언제나 환영입니다.