자바스크립트 비동기

자바스크립트는 싱글 스레드 언어이기 때문에
한 번에 한 가지의 일 밖에 처리하지 못한다
하나의 작업 흐름만을 가질 수 있다

때문에 작업이 오래 걸리거나
대기를 해야하는 작업이 있는 경우
프로그램 전체가 대기해야 한다

이러한 문제를 해결하기 위해서 자바스크립트에서는
몇몇 함수들을 미리 비동기 함수로 만들어 놓았다

비동기 함수와 task queue

addEventListener, fetch, setTimeout 등
macro task queue에 할당되는 함수들

AnimationFrames(AFs)에 할당되는
requestAnimationFrame

micro task queue에 할당되는
Promise, Object.observe 등

태스크 큐 우선 순위

micro > AFs > macro

event loop

비동기 함수는 web api를 통해 브라우저의 스레드에서 실행된 후
콜백 함수를 각각의 task queue로 보낸다

각 task queue에 적재된 콜백 함수들은
event loop에 의해 관리되는데,
call stack과 task queue를 계속 확인하면서
자바스크립트의 함수가 실행되는 영역인 call stack이 비어있는 경우에만
task queue의 우선순위에 맞추어 콜백 함수를 call stack으로 보내주어
실행될 수 있게 한다

call stack의 우선순위는 동기 함수 > 비동기 함수

동기 함수 > micro > AFs > macro

동기 비동기

동기

작업 흐름이 다른 작업의 완료를 기다림

비동기

작업 흐름이 비동기 작업의 완료를 기다리지 않고 실행됨
비동기 작업은 자신의 작업 완료 후 콜백 함수를 호출

비동기 작업 흐름

function foo() {
	console.log('foo')
}

function bar() {
	console.log('bar')
}

setTimeout(foo, 0)

bar()

1. 전역 코드가 평가되어 전역 실행 컨텍스트가 생성, 콜 스택에 push
2. 전역 코드 실행, setTimeout 호출
   setTimeout 함수의 실행 컨텍스트가 생성되고 콜 스택에 push, 실행중인 실행 컨텍스트가 된다
3. setTimeout 함수가 실행되면 콜백 함수를 호출 스케줄링 하고 종료, 콜 스택에서 pop, 호출 스케줄링(타이머)이 만료되면 브라우저 api 에서 콜백 함수를 태스크 큐에 push
4. 브라우저가 수행하는 4-1, 자바스크립트 엔진이 수행하는 4-2 는 병행 처리된다
   4-1. 브라우저는 타이머 설정 후 만료를 기다린다
   이후 타이머가 만료되면 콜백 함수 foo 가 태스크 큐에 push 된다 delay 를 0 으로 설정했지만 최소 지연 시간 4ms 가 지정되므로 4ms 후에 콜백 함수 foo 가 태스크 큐에 push 되어 대기하게 된다
   이 과정은 브라우저에서 수행, 자바스크립트의 시간 함수들은 지정 시간 이후 태스크 큐로 콜백이 진입, 콜 스택이 비어있는 경우 실행되기 때문에 정확한 시간을 보장하기는 어렵다
   4-2. bar 함수가 호출되어 bar 함수의 실행 컨텍스트가 생성되고 콜 스택에 push 되어 실행 중인 실행 컨텍스트가 된다 bar 함수 종료 후 콜 스택에서 pop 된다 이 시기에 브라우저가 타이머 설정 후 4ms 이 지났어도 foo 함수는 아직 태스크 큐에서 대기중
5. 전역 코드 실행 종료, 전역 실행 컨텍스트가 콜 스택에서 pop 되므로 콜 스택에는 아무런 실행 컨텍스트도 존재하지 않는다
6. 이벤트 루프가 콜 스택이 비었음을 감지, 태스트 큐에서 대기중인 콜백 함수 foo 가 이벤트 루프에 의해 콜 스택에 push 된다

비동기 함수인 setTimeout 의 콜백 함수는
태스크 큐에서 대기하다가 콜 스택이 비었을 때 (전역 코드도 종료된 상태) 비로소 콜 스택에 push 되어 실행된다
자바스크립트는 싱글 스레드 방식으로 동작한다
싱글 스레드로 동작하는 것은 자바스크립트 엔진이고
브라우저는 부라우저가 아니고 브라우저 내의 자바스크립트 엔진인 것
브라우저는 멀티 스레드로 동작한다

브라우저는 자바스크립트 엔진 외에도 렌더링 엔진과
WebAPI 를 제공한다
DOM API 와 타이머 함수, HTTP 요청 같은 비동기 처리를 포함한다
setTimeout 의 경우 두 가지 기능인 타이머 설정과 타이머 만료 후 콜백 함수를 태스크 큐에 등록하는 일은 브라우저가 실행한다
따라서 병행 처리가 되는 것으로 브라우저와 자바스크립트 엔진이 협력하여 비동기 함수를 실행한다