이 글은 모던 자바스크립트 Deep Dive의 내용을 참고하여 내가 정리한 글임을 명시한다.

싱글 스레드 방식

Javascript 엔진은 싱글 스레드 방식으로 동작한다. 즉, 단 하나의 실행 컨텍스트만을 가지므로 한 번에 하나의 Task만 실행할 수 있다.

동기 처리

현재 실행 중인 Task가 종료할 때까지 다음 Task가 대기하는 방식을 동기 처리라고 한다. 실행 순서가 보장된다는 장점이 있지만, 처리 시간이 긴 Task를 실행하게 되면 이후 Task들이 blocking되는 단점이 있다.

비동기 처리

현재 실행 중인 Task가 종료되지 않은 상태여도 다음 Task를 곧바로 실행하는 방식을 비동기 처리라고 한다. 동기 처리와는 반대로 실행 순서가 보장되지 않는다는 단점, blocking이 발생하지 않는다는 장점이 있다. 비동기 함수의 경우, 콜 스택에 push 되면 브라우저에 의해 태스크 큐로 이동된다. 대표적으로 setTimeout Web API의 경우 설정한 시간(3초) 뒤에 브라우저가 태스크 큐에 콜백함수를 넣어주는 방식으로 동작한다. 하지만 어떠한 실행 컨텍스트가 콜스택에 존재한다면 태스크 큐에서 대기하는 시간이 있으므로 함수가 실행되는 시간은 정확히 3초 뒤가 아닐 수 있다. 즉, 태스크 큐에 넣어지는 시간이 정확히 3초이며 그 콜백 함수가 실행되는 시간은 (3+α)초다.
참고 : setTimeout 함수의 최소 대기시간은 4ms로 이보다 작은 값(0)을 전달하면 4ms로 고정된다.

자바스크립트는 싱글 스레드로 동작하지만, 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다. (동시성, concurrency)
즉, 자바스크립트 혼자의 힘으로 모든 progress를 처리하는 게 아니라는 것을 암시한다. 대표적인 협력자로 브라우저와 Node.js가 있으며, 이들은 자바스크립트 엔진을 구동하는 환경이다.

이벤트 루프

브라우저에 내장되어 있는 기능 중 하나로, 자바스크립트의 동시성을 지원한다. 태스크 큐에 있는 실행 컨텍스트를 콜 스택이 비었을 때 콜 스택으로 이동시키는 역할을 한다. 이동시킨 그 함수는 콜 스택이 비어있으므로 즉시 실행된다.

마이크로 태스크 큐

프로미스의 후속 처리 메서드의 콜백 함수를 일시적으로 보관한다.

태스크 큐

브라우저 환경에서 제공하는, 비동기 함수의 콜백 함수 또는 이벤트 핸들러를 일시적으로 보관하는 영역이다.

차후 그림 추가하기