42.1 동기 처리와 비동기 처리

자바스크립트 엔진은 단 하나의 실행 컨텍스트를 갖는다.
= 싱글 스레드 single thread 방식으로 동작한다.

동기 처리 synchronous

• 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식
• 장점 : 실행 순서 보장
• 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 됨

비동기 처리 asynchronous

• 태스크를 블로킹하지 않고 곧바로 실행하는 방식
• 장점 : 블로킹이 발생하지 않음
• 단점 : 태스크의 실행 순서가 보장되지 않음
• 전통적으로 콜백 패턴을 사용
  • 콜백 패턴은 콜백 헬(callback hell)을 발생시켜 가독성을 나쁘게 함
  • 비동기 처리 중 발생한 에러의 예외 처리가 곤란
  • 여러개의 비동기 처리를 한번에 처리하는 데도 한계가 있음
• 비동기 처리 방식으로 동작하는 것들 : setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 등
• 비동기 처리는 이벤트 루프와 태스크 큐와 깊은 관계가 있다.

42.2 이벤트 루프와 태스크 큐

이벤트 루프?

• 자바스크립트의 동시성을 지원해주는 브라우저에 내장되어 있는 기능 중 하나

[이벤트 루프와 브라우저 환경]

---

자바스크립트 엔진

콜 스택 call stack

• 실행 컨텍스트가 추가되고 제거되는 스택 자료구조

힙 heap

• 객체가 저장되는 메모리 공간
• 구조화되어 있지 않다

브라우저 환경

태스크 큐 task queue/event queue/callback queue

• 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

이벤트 루프 event loop

• 콜 스택이 비어있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인

• 만약 콜 스택이 비어 있고, 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 콜 스택에서 태스크가 실행된다.

  자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.

• 브라우저는 자바스크립트 엔진 외에도 렌더링 엔진과 Web API를 제공한다.

• Web API는 ECMAScript 사양에 정의된 함수가 아니고 브라우저에서 제공하는 API로, 비동기 처리를 포함한다.