JS(자바스크립트)의 콜스택, 태스크큐, 이벤트루프에 대해 알아보자

싱글스레드인 자바스크립트에서는 어떤 식으로 비동기 처리를 하게 될까?

정답은 콜스택, 태스크큐, 이벤트루프 이 공간안에서 해결한다. 

오늘은 각 개념과 흐름을 보면서 이해해보도록 하자!

---

콜 스택 (Call Stack)

• 콜 스택은 자바스크립트가 현재 실행 중인 함수를 추적하는 자료구조
• 자바스크립트는 단일 스레드에서 동작하기 때문에 한 번에 하나의 코드만 실행할 수 있음
• 콜 스택은 LIFO(Last In, First Out)(후입선출) 구조를 따른다
  • 함수 호출: 함수가 호출되면 콜 스택에 푸쉬(push)
  • 함수 종료: 함수 실행이 끝나면 콜 스택에서 팝(pop)

태스크 큐 (Task Queue)

• 태스크 큐는 비동기 코드(예: setTimeout, webAPI 등)가 완료되었을 때 실행할 콜백 함수들이 대기하는 장소
• 태스크 큐는 FIFO(First In, First Out)(선입선출) 구조를 따른다

이벤트 루프 (Event Loop)

• 이벤트 루프는 콜 스택과 태스크 큐를 관리하고, 자바스크립트가 비동기 작업을 처리할 수 있게 한다
  • 콜 스택 비우기: 콜 스택이 비어 있는지 확인
  • 태스크 큐 확인: 콜 스택이 비어 있으면 태스크 큐에서 작업을 가져와 콜 스택에 푸쉬

동작 흐름 예시

• 동기 코드 실행
  • 콜 스택에 푸쉬되고 바로 실행
• 비동기 함수 호출
  • setTimeout이 호출되면 콜 스택에서 빠지고, 지정된 시간이 지난 후 setTimeout의 콜백함수가 태스크 큐에 추가
• 이벤트 루프
  • 콜 스택이 비어 있으면 태스크 큐에서 작업을 가져와 실행

이러한 과정을 통해 자바스크립트는 비동기 작업을 처리한다.

 

아래 예시코드로 확인해보자!

console.log('Start');

setTimeout(() => { console.log('Timeout'); }, 1000);

console.log('End');

실행 순서

1. console.log('Start')가 콜 스택에 푸쉬되고 실행
2. setTimeout이 콜 스택에 푸쉬되고 실행됨 -> setTimeout의 콜백 함수는 태스크 큐에 추가
3. console.log('End')가 콜 스택에 푸쉬되고 실행됨.
4. 1초 후, 이벤트 루프가 태스크 큐에 있는 console.log('Timeout') 콜백을 콜 스택에 푸쉬하고 실행함.

이렇게 보면 간단한 루프이다. 이 루프들로 비동기 작업을 처리한다.

콜스택과 태스크큐 이벤트루프를 안다면 헷갈리지 않게 코드를 작성하고 어떤 동작으로 비동기 작업을 처리하는 지 알 수 있을 것 같다