싱글 스레드 언어인 자바스크립트, 동시에 여러 작업이 수행 가능한 이유

답변 확인

1. 싱글 스레드란?

• 자바스크립트는 단일 콜 스택 (Call Stack)을 가진 싱글 스레드 언어로, 한 번에 하나의 작업만 처리합니다.

2. 어떻게 동시에 여러 작업 수행 가능?

• 비동기 작업을 처리할 때 자바스크립트는 콜백함수와 이벤트 루프를 활용하여 비동기적으로 여러 작업을 효율적으로 처리

3. 비동기 작업 처리 흐름

1) 콜 스택(Call Stack )

• 코드가 실행되면 함수 호출이 콜 스택에 쌓이고, 하나씩 처리
• 싱글 스레드이기 때문에 콜 스택에 있는 작업이 완료되어야만 다음 작업 처리 가능

2) Web API (or Node APIs)

• 브라우저 환경(Node.js)에서 비동기 작업setTimeout, fetch, 이벤트 핸들러 등)은 Web API로 보내짐
• Web API는 자바스크립트 엔진 외부에서 비동기 작업 처리

3) 태스크 큐

• 매크로태스크 큐
  • 일반적인 비동기 작업의 콜백(setTimeout, setInterval, I/O 작업, 이벤트 핸들러 등)이 대기하는 큐.
  • 이벤트 루프의 한 번 반복에서 한 개씩 처리됩니다.
• 마이크로태스크 큐
  • 높은 우선순위의 비동기 작업(Promise.then, MutationObserver 등)이 대기하는 큐.
  • 이벤트 루프는 매크로태스크 실행 전에 마이크로태스크 큐를 모두 처리합니다.

4) 이벤트 루프(Event Loop)

• 이벤트 루프는 콜 스택이 비었을 때 태스크 큐에서 대기 중인 작업을 콜 스택으로 가져와 실행합니다.
• 이 과정에서 자바스크립트는 마치 동시에 여러 작업이 처리되는 것처럼 보이게 됩니다.

4. 효과

이러한 메커니즘 덕분에 자바스크립트는 UI가 끊기지 않고, 대기 시간이 필요한 작업도 효율적으로 처리할 수 있음