자바스크립트 개발자라면 알아야 하는 핵심컨셉 33개
33 Concepts Every JavaScript Developer Should Know
: https://github.com/leonardomso/33-js-...
노마드코더를 통해 학습할 예정이고, 매일매일 기록에 남겨보고자 한다. 기본이 탄탄한 개발자가 되고 싶어서 한동안 사랑했던 리액트를 잠시 미뤄두고 자바스크립트에 집중해 보려고 한다.
Call Stack 이란?
말 그대로 쌓아 올리는 것으로 자바스크립트는 함수를 그 스택 위에 올리고 함수를 다 실행한 후 제거한다.
Call Stack의 실행 순서 (1)
함수는 내부의 명령을 다 실행하거나 return하게 되면 종료된다.
함수의 실행 순서를 알아보기 위해 위와 같이 js 파일을 작성하였고 개발자도구를 이용하여 call stack 을 확인하였다.
다음스텝을 누르면 three 함수가 실행되면서 콘솔에 찍히고 three 함수는 실행이 완료되었으므로 콜스텍에서 사라지게 된다.
Call Stack의 실행순서 (2)
이와 같이 에러를 발생시키는 경우에는 어떻게 될까?
이와같이 차례대로 실행 함수가 쌓이고 three 함수 내에서 콘솔로그를 먼저 실행하게 되고 차례로 two, one 이 실행되고 난 뒤 아래와 같이 zero 함수가 실행될 때야 비로소 error를 던지게 된다.
또한 어느 함수에서 에러가 발생했는지 확인이 가능하다.
Call Stack의 실행순서 (3)
에러를 던지는 위치를 바꾸어보면 어떻게 될까?
이와 같이 콘솔로그를 찍은 후 바로 에러를 띄우게 되고 스택에 남아있는 모든 함수의 실행이 중지되며 스택이 비워지면서 콘솔에 찍히게 된다.
스택 붕괴
이처럼 서로를 call 하는 함수를 만들어 실행해보면 maximum call stack size를 초과했다는 에러 메세지를 받을 수 있는데 이를 통해서 콜스텍의 사이즈의 한계가 있다는 것을 알 수 있고, 사이즈는 각 브라우저와 그 버전에 따라 차이가 있다.
Personal thought
promise 를 공부하면서 살짝 스쳐 지나갔던 스택을 공부하게 되었다. 자바스크립트는 싱글 스레드여서 함수를 실행할 때 단 하나의 call Stack을 이용한다는 것이 어떤 의미였는지 조금 더 깊이 이해할 수 있게 되었다.
