동기 처리와 비동기 처리
// sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
function sleep(func, delay) {
const delayUntil = Date.now() + delay;
while (Date.now() < delayUntil);
func();
}
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
// sleep 함수는 3초 이상 실행된다..
sleep(foo, 3 * 1000);
// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹된다.
bar();
// (3초 경과 후) foo 호출 -> bar 호출자바 스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 즉 한 번에 하나의 태스크만 실행 할 수 있는 싱글 스레드 방식이다. 위의 예시와 같이 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생한다.
이벤트 루프와 태스크 큐
-
콜 스택: 함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 실행된다
-
힙: 콜 스택의 요소인 실행 컨텍스트는 저장된 객체를 참조한다
-
태스크 큐: 비동기 함수의 콜백함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다. 자바스크립트 엔진이 아닌 브라우저 환경에서 제공한다.
-
이벤트 루프: 콜 스택에 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 순차적으로(FIFO) 대기중인 함수를 콜 스택으로 이동시킨다. 브라우저 환경에서 제공한다.
자바스크립트는 싱글 스레드 방식으로 덩직힌디. 이때 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라 내장된 자바스크립트 엔진이다. 즉 자바스크립트 엔진은 싱글 스레드가 맞지만 브라우저는 멀티 스레드로 동작한다.
