자바스크립트는 어떤 언어인가?

자바스크립트는 싱글 스레드이면서 논블로킹 언어이다.

용어 정리

스레드 (Thread)

• 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다.

싱글 스레드 (Single Thread)

• 스레드가 하나밖에 존재하지 않아 한 번에 하나의 작업만 할 수 있다.
• 자바스크립트가 싱글 스레드로 설계된 이유는 동시성 문제를 해결하기 까다롭기 때문이다.
• 동시성 문제란, 여러 스레드가 동시에 공유된 자원에 접근하면서 발생하는 충돌 문제를 말한다.
• 쉽게 말해 하나의 변수를 두 명이 동시에 수정하려고 하면 어떤 값이 맞는지 알 수 없게 되는 것이다. 이런 문제를 원천적으로 피하기 위해 싱글 스레드로 설계되었다.

비동기 처리

• 특정 로직의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 먼저 실행하는 처리 방식이다.

싱글 스레드인데 비동기가 어떻게 가능한가?

자바스크립트는 비동기 처리를 통해 싱글 스레드이지만 블로킹 되지 않게 한다. 하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행함으로써 문제를 해결한다.

그렇다면 스레드가 하나인데 어떻게 다른 작업을 동시에 수행할 수 있는 걸까? 그 핵심에는 이벤트 루프가 있다.

비동기 처리의 핵심 구조

콜 스택 (Call Stack)

• JS 엔진이 실제로 코드를 실행하는 공간이다.
• 함수가 호출되면 콜 스택에 쌓이고, 실행이 끝나면 빠져나간다.
• 싱글 스레드이기 때문에 콜 스택은 하나만 존재하고, 한 번에 하나의 함수만 실행할 수 있다.

Web APIs

• setTimeout, fetch, DOM 이벤트 등은 JS 엔진이 아니라 브라우저가 제공하는 API이다.
• 비동기 작업이 호출되면 JS 엔진은 해당 작업을 Web API에게 넘기고 콜 스택에서 바로 제거한다.
• 즉, 무거운 작업을 브라우저에게 맡기고 JS 엔진은 다음 코드를 바로 실행할 수 있다.

태스크 큐 (Task Queue)

• Web API에서 처리가 완료된 콜백 함수가 대기하는 공간이다.
• setTimeout, DOM 이벤트의 콜백 등이 여기에 들어간다.

마이크로태스크 큐 (Microtask Queue)

• Promise.then, async/await의 콜백이 대기하는 공간이다.
• 태스크 큐보다 우선순위가 높다. 마이크로태스크 큐가 비워질 때까지 태스크 큐의 작업은 실행되지 않는다.

이벤트 루프 (Event Loop)

• 콜 스택과 큐들을 계속 감시하면서, 콜 스택이 비어있으면 큐에서 작업을 꺼내와 실행시키는 역할을 한다.
• 처리 순서: 콜 스택 비우기 → 마이크로태스크 큐 전부 처리 → 태스크 큐에서 하나 꺼내기
• 이 과정이 반복되기 때문에 "루프"라고 부른다.

실행 순서 예시

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve().then(() => {
  console.log("3");
});

console.log("4");

출력 결과: 1 → 4 → 3 → 2

1. console.log("1") → 콜 스택에서 바로 실행
2. setTimeout → Web API에 넘기고, 콜백은 태스크 큐에 대기
3. Promise.then → 콜백은 마이크로태스크 큐에 대기
4. console.log("4") → 콜 스택에서 바로 실행
5. 콜 스택이 비었으므로 마이크로태스크 큐의 "3" 먼저 실행
6. 마이크로태스크 큐가 비었으므로 태스크 큐의 "2" 실행

전체 흐름 정리

코드 실행 → 콜 스택에서 처리
       ↓
비동기 작업 만남 → Web API에 위임
       ↓
Web API 처리 완료 → 콜백을 큐에 전달
  - Promise 계열 → 마이크로태스크 큐
  - setTimeout 등 → 태스크 큐
       ↓
이벤트 루프가 콜 스택이 비었는지 확인
       ↓
마이크로태스크 큐 먼저 → 태스크 큐 다음

최종 정리

자바스크립트는 싱글 스레드이면서 논블로킹 언어입니다. 싱글 스레드인 이유는 여러 스레드가 공유 자원에 동시에 접근하는 동시성 문제를 원천적으로 피하기 위해서입니다. 그런데 싱글 스레드임에도 비동기 처리가 가능한 이유는 이벤트 루프 구조 덕분입니다. JS 엔진은 코드를 콜 스택에서 실행하다가 비동기 작업을 만나면 브라우저의 Web API에 위임하고 다음 코드를 바로 실행합니다. Web API에서 처리가 완료된 콜백은 큐에 대기하게 되는데, Promise 계열은 마이크로태스크 큐에, setTimeout 등은 태스크 큐에 들어갑니다. 이벤트 루프는 콜 스택이 비었는지 계속 감시하면서, 마이크로태스크 큐를 먼저 처리하고 그 다음 태스크 큐의 작업을 실행하는 방식으로 동작합니다. 이 구조 덕분에 자바스크립트는 하나의 스레드만으로도 블로킹 없이 효율적으로 동작할 수 있습니다.