[ Weekly Paper5 ] - 싱글 스레드와 이벤트 루프

예시 코드

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

예상 결과

1. let 키워드로 선언한 num 변수에 1이 할당됨
2. setTimeout을 통해 예약된 콜백 함수가 이벤트 큐에 등록됨 (자바스크립트는 싱글 스레드 언어이므로 콜백 내부의 2 재할당은 이 단계에서 이루어지지 않고 지정된 시간이 경과한 후에 이벤트 큐에 추가됨)
3. num변수에 3이 재할당됨
4. 콘솔에 3이 출력됨

이 단계 이후 num에 setTimeout의 콜백 함수가 코드 블록이 실행을 마치고 나서 실행되므로 (콜 스택이 비어있을 때 이벤트 루프가 해당 콜백 함수를 콜 스택으로 이동시켜 비동기 작업을 실행하기 때문) 2가 재할당 되고, num을 출력해보면 2임을 알 수 있음

💡 싱글 스레드

JavaScript는 기본적으로 싱글 스레드 언어로, 하나의 메인 실행 스레드만을 사용하여 코드를 실행함. 즉, 여러 작업이 동시에 실행되는 것이 아니라, 이벤트 루프를 통해 비동기적인 작업을 처리함

그래서 만약 비동기 작업이 발생하면 (예: setTimeout 콜백 함수), 해당 작업은 콜백 큐에 추가되어 코드 블록이 끝나고 콜 스택으로 불러와 실행됨

💡 이벤트 루프

이벤트 루프(Event Loop)는 JavaScript의 비동기 처리를 담당하는 핵심 메커니즘 중 하나로, 이벤트 루프를 통해 비동기적인 작업을 효과적으로 처리할 수 있음

이벤트 루프는 콜 스택이 비어있을 때, 이벤트 큐에서 대기 중인 작업 중 가장 먼저 들어온 작업을 콜 스택으로 이동시켜 실행함 => 비동기 작업이 비동기적으로 실행되면서도 메인 코드 블록이 블로킹되지 않고 계속해서 실행될 수 있음

• 콜 스택
  • 현재 실행 중인 함수들의 스택을 나타냄
  • 함수가 호출되면 해당 함수의 정보가 스택에 추가되고, 함수가 종료되면 스택에서 제거됨
  • JavaScript는 싱글 스레드로 동작하기 때문에 콜 스택은 하나의 스레드에서 실행됨
• 콜백 큐 (Callback Queue 또는 Task Queue)
  • 비동기 작업의 콜백 함수들이 대기하는 큐
  • 이벤트 루프는 콜 스택이 비어있을 때, 이벤트 루프는 콜백 큐(Callback Queue)에서 대기 중인 작업을 콜 스택으로 이동시켜 실행함