슬픈코드

https://www.freecodecamp.org/news/understanding-the-javascript-call-stack-861e41ae61d4/

자바스크립트 엔진은 하나의 힙과 하나의 싱글 콜 스텍을 가진 싱글스레드 인터프리터다.

이 엔진은 브라우저 같은 호스팅 환경에 장착되어 있고 주로 DOM, AJAX, Timers같은 API를 제공해준다.

이 블로그에서는 콜스텍이 뭐고 왜 필요한지 다룰것이고 이걸 알면 함수 실행순서와 함수 계층(hierarchy)?을 아는데 도움 될듯하다.

콜 스텍은 함수가 Call되면 사용되고 콜 스텍이 하나라면 함수가 하나씩 위에서 아래로 실행된다. 

이걸 동기적 이라 부른다. 하나씩 실행되니까. 이걸 알아야 비동기적 프로그램을 이해할 수 있다.

비동기적 자바스크립트에서는 callback 함수, event loop, task queue가 있는데 callback함수는 event loop 때문에 스텍에 쌓인 후에 실행되는 동안 콜스텍에 의해서 활성화된다. ???

뭔말인지 모르겠다. 

일단 콜 스텍이 뭐냐면 Last In, First Out(LIFO)하는 데이터구조인데 함수 call을 일시적으로 저장하고 관리한다고 보면된다.

LIFO의 의미는 마지막에 넣은게 제일 먼저 나온다는 의미이다.

function a() {
	throw new Error('Stack Trace Error');
}

function b() {
	a();
}

function c() {
	b();
}

c();

이게 간단한 예제인데 대충보자면 a함수에 에러메세지를 넣어놓고 b로 감싸고 그걸 다시 c로 감싼다.

c를 호출하면 의도한 에러메세지가 뜬다.

그니까 c가 스텍 메모리에 들어가고 다음으로 b가 들어가고 다음으로 a가 들어가서 a에 있는 에러 메세지 띄우고 

스텍 메모리가 할일 다 한 a지우고 다음 순서인 b 지우고 마지막으로 c 지운거다. 그리고 끝

마지막으로 들어간 a가 제일 먼저 나갔다. 이게 LIFO구조이고 이걸 구조로 갖고 있는게 call stack이다.

다시말해 저 코드를 실행하는 순서를 정하는게 콜 스텍이다.

정리하자면 콜 스텍은 

1. 싱글스레드이다. 그래서 한번에 하나씩 한다.

2. 코드 실행이 동기적이다.

3. 함수 선언은 임시 메모리를 갖고 있는 스텍을 만든다.

4. LIFO로 작동한다.

콜 스텍을 아는 것은 비동기적 자바스크립트를 아는데 중요하단다.

ㅇㅇ 할거임