모던 자바스크립트 Deep Dive - 42장 비동기 프로그래밍

동기 처리와 비동기 처리

JavaScript에서 함수가 호출되면 함수 코드가 평가되어 실행 컨텍스트가 생성되고, 생성된 실행 컨텍스트는 콜 스택에 push되고 함수 코드가 실행된다. 함수 코드의 실행이 끝나면 콜 스택에서 pop되어 제거된다.
JavaScript 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉, 한 번에 실행할 수 있는 함수가 단 하나라는 뜻이다. 콜 스택에서 최상위 요소인 현재 실행중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트들은 대기 중인 태스크다. 현재 실행 중인 실행 컨텍스트가 pop되어 제거되면(실행이 끝나면) 비로소 실행되기 시작한다.
이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. 이러한 방식 때문에 처리 시간이 오래 걸리는 태스크를 실행하는 경우 블로킹이 발생한다. 이러한 방식을 동기 처리라고 한다.
현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.

이벤트 루프와 태스크 큐

앞에서 말했다시피 JavaScript는 싱글 스레드 방식으로 작동하는데 우리가 브라우저를 사용하다보면 여러가지 동작들이 한 번에 작동되는 경험을 해봤을 거다. JavaScript는 싱글 스레드 방식으로 작동되지만, 브라우저는 이벤트 루프를 통해 동시성을 지원한다.
이벤트 루프는 브라우저에 내장되어 있는 기느 중 하나다. 브라우저는 비동기 함수를 태스크 큐에 넣어두고 대기하다가 콜 스택이 비게 되면 콜 스택에 푸시하고 재실행시킨다.