Javascript는 어떻게 동시에 여러 작업을 하나요?

답변

JS는 코드를 위에서 아래로 읽으면서 순서대로 한 번에 하나만 실행하는 싱글 스레드입니다.

그런데 우리가 동시에 여러 작업을 할 수 있는 이유는, 코드를 읽어 내려오다가 비동기로 처리하도록 짜놓은 코드를 만나면, JS는 그 브라우저나 실행 환경에 비동기 작업에 대한 실행을 위임하기 때문입니다. 위임받은 작업이 끝나면, 그 결과나 다음에 실행할 콜백 함수를 대기 목록(태스크 큐)에 넣어둡니다.

그러는 동안 JS는 비동기작업 완료 기다리지 않고 다음 줄을 계속 실행합니다. 그러다 JS가 지금 실행 중이던 작업들을 다 끝내서 작업 목록이 비면, 이벤트 루프가 그걸 감지하고 대기 목록(태스크 큐)에 있는 걸 하나씩 꺼내서 실행시킵니다.

이런 구조 덕분에 자바스크립트는 싱글 스레드여도 전체 실행이 멈추지 않고 계속 진행되는 거예요.

부연설명

• 싱글 스레드 : 이전 작업이 완전히 끝날 때까지 다음 작업을 대기시킵니다. 프로그램이 하나의 작업 흐름(스레드)만을 사용해 명령을 순차적으로 처리하는 방식을 말합니다. 한 번에 하나의 일만 처리할 수 있지만, 자원 공유 충돌이 없고 문맥 교환(Context Switching) 비용이 발생하지 않아 구조가 단순합니다

• 이벤트 루프 : 자바스크립트 이벤트 루프(Event Loop)는 싱글 스레드 기반인 자바스크립트가 여러 작업을 동시에(비동기적으로) 처리할 수 있도록 도와주는 핵심 메커니즘입니다.

  • 이벤트 루프의 동작 순서

    • 동기 코드가 호출 스택에 쌓이고 순서대로 실행됩니다.

    • 비동기 코드를 만나면 해당 작업은 웹 API(또는 백그라운드)로 보내져 처리됩니다.

    • 비동기 작업이 완료되면, 그 콜백 함수는 대기 목록인 태스크 큐로 이동합니다. 이때 태스크 큐는 우선순위에 따라 두 가지 종류로 나뉘어 들어갑니다

      • 마이크로태스크 큐: Promise.then, async/await 같은 고순위 콜백이 들어가는 곳

      • 매크로태스크 큐(일반 큐): setTimeout, setInterval 같은 일반 콜백이 들어가는 곳

    • 호출 스택이 완전히 비워지면, 이벤트 루프는 다음 규칙에 따라 큐에 있는 작업을 스택으로 이동시켜 실행합니다:

      • 태스크 큐 중 마이크로태스크 큐에 쌓인 모든 작업을 먼저 실행합니다. (이때 실행 중에 새로 추가된 마이크로태스크까지 전부 처리합니다.)

      • 마이크로태스크 큐가 완전히 비워지면, 그제야 매크로태스크 큐에서 딱 하나의 작업만 꺼내어 호출 스택으로 보내 실행합니다.

      • 그 매크로태스크 한 개가 끝나면 다시 마이크로태스크 큐를 확인하러 돌아가며, 이 순환 과정을 계속 반복합니다.