[ JavaScript ]자바스크립트는 싱글 스레드인데 어떻게 멀티 스레드처럼 동작을 할까?

제목처럼 자바스크립트는 싱글 스레드이다. 기본적으로 한 번에 하나의 작업만 처리할 수 있다. 즉 모든 작업이 순차적으로 동기적으로 실행된다. 그런데 우리는 자바스크립트에서 비동기 작업을 하고 있다. 어떻게 가능한 걸까?

 

자바스크립트는 싱글 스레드가 맞다. 하지만 자바스크립트 런타임 환경인 브라우저, Node.js는 멀티 스레드를 지원한다. 예를 들어서 아래의 코드의 동작 순서를 보기 전에 실행 컨텍스트, 태스크 큐, 이벤트 루프, 콜 스택에 대해서 알아야 한다.

콜 스택 (Call Stack)

• 콜 스택은 자바스크립트 엔진이 함수 호출을 관리하는 스택 구조의 데이터 구조입니다.
• 실행 컨텍스트가 생성될 때마다 콜 스택에 푸시(push)되고, 실행이 끝나면 팝(pop)되어 콜 스택에서 제거됩니다.

실행 컨텍스트 (Execution Context)

• 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미한다.
• 함수가 호출될 때 또는 전역 코드가 실행될 때 실행 컨텍스트가 생성된다.
• 자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나의 실행 컨텍스트만 실행된다.
• 실행 컨텍스트는 코드의 실행과 관련된 모든 정보를 담고 있다.

태스크 큐 (Task Queue)

• 태스크 큐는 비동기 작업의 콜백 함수들이 대기하는 큐
• 태스크 큐는 자바스크립트의 비동기 작업을 처리하기 위해 사용되며, 자바스크립트 엔진과 이벤트 루프의 협력을 통해 관리된다.

이벤트 루프

• 콜 스택에 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 체크한다.

function foo() {
	console.log("foo Hello World");
}

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

foo();

1. 전역 실행 컨텍스트가 콜 스택으로 PUSH

2. setTimeout 함수 실행 컨텍스트가 생성되고 콜 스택으로 PUSH

3. setTimeout 함수가 실행되며, 비동기 작업이 런타임 환경(브라우저의 Web API 또는 Node.js의 타이머 API)에 의해 처리되고, setTimeout 실행 컨텍스트 POP

❗️4-1의 작업이 진행되는 동안 4-2의 대기 시간이 지나면, 4-1이 완료된 후 4-2가 처리된다.

4-1. foo 함수의 실행 컨텍스트가 콜 스택에 PUSH 되고, 함수를 실행시킴 "foo Hello World" 출력하고 foo 함수 실행 컨텍스트 POP

4-2. 이전의 setTimeout 함수의 지연 시간이 지나면 해당 콜백 함수를 태스크 큐에 PUSH

5. 더 이상 실행할 코드가 남아 있지 않기에 전역 실행 컨텍스트도 POP

6. 태스크 큐의 setTimeout 함수의 콜백 함수가 콜 스택에 PSUH

7. setTimeout 함수의 콜백 함수 실행("Hello World")되고 POP

이렇게 브라우저, Node.js의 멀티 스레드 런타임 환경 덕분에 자바 스크립트도 비동기 작업을 처리할 수 있다.

태스크 큐에서 관리하는 주요 콜백 함수들:

• setTimeout
• setInterval
• I/O 작업
• 이벤트 핸들러

마이크로 태스크 큐

태스크 큐 외에도 마이크로 태스크 큐가 있다. 마이크로 태스크 큐는 태스크 큐보다 우선순위가 높다.

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

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

console.log('End');

Start -> End -> Promise -> Timeout 순으로 출력이 된다.

마이크로 태스크 큐에서 관리하는 주요 콜백 함수들:

• MutationObserver
• Promise의 then / catch / finally등