자바스크립트는 싱글 스레드 언어인데, 어떻게 동시에 여러 작업들을 수행하나요?

A

자바스크립트는 싱글 스레드 언어로, 한번에 하나의 작업만 진행할 수 있는 단일 콜스택을 가집니다.

하지만 Web API, 이벤트루프를 통해 비동기 작업을 진행할 수 있습니다.

 

1. fetch, promise, setTimeout과 같은 비동기 작업이 발생하면, 자바스크립트 엔진은 해당 작업을 브라우저 web api에 위임하고 다음 코드를 실행합니다.

2. web api에서 비동기 과정이 완료되면, 해당 콜백함수가 태스크 큐에 추가됩니다.

3. 이벤트 루프는 콜스택이 모두 비어있는지를 확인 후, 비어있다면 태스크 큐의 작업들이 콜스택으로 전달합니다.

 

이러한 구조로 싱글 스레드인 자바스크립트에서 동시에 여러 작업을 수행할 수 있습니다.

 

Q 앞서 말씀하신 태스크 큐의 종류에는 어떤 게 있나요? 

태스크 큐의 종류는 메크로 태스크 큐(Macro TaskQueue)와 마이크로 태스크 큐(Microtask TaskQueue)가 있습니다.

 

먼저 Macro TaskQueue에는 일반 비동기 함수의 콜백함수가 들어갑니다.

Microtask TaskQueue는 promis와 같은 비동기 콜백함수가 들어갑니다. 

Microtask TaskQueue가 더 우선순위가 높아 Microtask TaskQueue 처리가 완료된 후 Macro TaskQueue가 처리됩니다.

 

Q setTimeout의 실행 시간이 정확하지 않을 수 있는 이유는 무엇인가요?

setTimeout 실행 시간이 정확하지 않을 수 있는 이유는 이벤트 루프와 콜 스택의 동작 방식 때문입니다.

 

비동기 로직은 모든 동기 로직이 종료되고 콜스택이 비게 되면 태스크 큐에 저장된 setTimeout의 콜백이 실행됩니다.

만약 콜 스택이 다른 작업으로 바쁘다면, 시간이 지연 될 수 있습니다.

따라서 setTimeout에 설정된 시간은 최소 지연 시간일 뿐, 그 시간이 지났을 때 반드시 실행된다고 보장할 수 없습니다.

 

 

참고 자료

Songlog