제로초 자바스크립트 입문 <호출 스택과 이벤트 루프>

• 호출 스택은 동기 코드를 담당하고, 이벤트 루프는 비동기 코드를 담당한다 
• 백그라운드 background 는 타이머를 처리하고 이벤트 리스너를 저장하는 공간이다
• 타이머 함수가 실행되면 백그라운드에서 시간을 재다가 지정 시간이 되면 콜백 함수를 태스크 큐로 보낸다
• 태스크 큐 task queue 는 실행될 콜백 함수들이 대기하고 있는 공간이다 
• 큐 queue 는 우리말로 '줄' 이라는 뜻이다
• 태스크 큐에 먼저 들어온 함수부터 실행된다 
• 다만 태스크 큐도 함수를 직접 실행하지 않는다 
• 함수는 호출 스택에서만 실행된다 
• 호출 스택에 들어와야 함수가 호출(실행) 된다고 생각하면 된다
• 태스크 큐에서 호출 스택으로 함수를 이동시키는 존재가 바로 이벤트 루프 이다 

호출 스택 

• 호출 스택은 바닥이 막히고 천장은 뚫린 하나의 통이다
• 이 통에서는 물건을 한 개씩 넣을 수 있고, 뺄 때도 한 개씩 뺄 수 있다
• 하나씩 차곡차곡 쌓이는 구조이므로 위에 있는 물건을 빼야만 물건을 뺄 수 있다 
• 즉, 마지막에 넣은 물건이 뺄 때는 가장 먼저 빠진다
• 이러한 구조를 스택 stack 이라고 한다 
• 함수를 호출할 때 해당 함수를 호출 스택 안에 넣고, 함수가 종료될 때 호출 스택에서 빼낸다 

이벤트 루프 

const timerId = setTimeout(() => {
  console.log('0초 뒤에 실행됩니다.');
}, 0);
console.log('내가 먼저');

1. setTimeout( )  함수가 호출되면서 호출 스택에 들어간다 
2. setTimeout( ) 함수는 콜백 함수를 백그라운드로 보내고 종료된다
3. setTimeout( ) 함수는 종료되면서 호출 스택을 빠져나간다
4. 다음 줄의 console.log('내가 먼저'); 가 실행된다
5. setTimeout( ) 함수가 콘솔에 아무런 출력을 하지 않고 빠져나가므로 console.log( ) 가 setTimeout( ) 함수보다 먼저 실행되는 것처럼 보일뿐이다 

이처럼 대부분의 비동기 함수는 콜백 함수를 백그라운드로 보내는 경우가 많다 

 

재귀함수 

• 어떤 함수가 내부에서 자기 자신을 다시 호출하는 함수를 재귀 함수라 한다

let i = 0;
function recurse() {
  i++;
  recurse();
}
recurse();
Uncaught RangeError: Maximum call stack size exceeded

• 호출 스택은 함수를 담을 수 있는 최대 크기가 정해져 있는데, 이 크기를 초과하는 경우에 해당 에러가 발생
• 웹 브라우저별로 호출 스택의 최대 크기가 다르다
• 웹 브라우저의 호출 스택 최대 크기를 알 수 있는 코드는 아래와 같다 

let i = 0;
function recurse() {
  i++;
  recurse();
}
try {
  recurse();
} catch (ex) {
  alert(`최대 크기는 ${i}\nerror: ${ex}`);
}