동기 처리와 비동기 처리

⇒ 때문에 처리에 시간이 필요한 태스크를 실행하는 경우 **블로킹(작업 중단)**이 발생

eg.

// sleep 함수는 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
function sleep(func, delay) {
  // Date.now()는 현재 시간을 숫자(ms)로 반환한다.("30.2.1. Date.now" 참고)
  const delayUntil = Date.now() + delay;

  // 현재 시간(Date.now())에 delay를 더한 delayUntil이 현재 시간보다 작으면 계속 반복한다.
  while (Date.now() < delayUntil);
  // 일정 시간(delay)이 경과한 이후에 콜백 함수(func)를 호출한다.
  func();
}

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

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

// sleep 함수는 3초 이상 실행된다..
sleep(foo, 3 * 1000);
**// bar 함수는 sleep 함수의 실행이 종료된 이후에 호출되므로 3초 이상 블로킹된다.**
bar();
// (3초 경과 후) foo 호출 -> bar 호출

⇒ 동기(synchronous) 처리: 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식

eg. 타이머 함수인 setTimeout을 사용하여 수정한 버전

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

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

// 타이머 함수 setTimeout은 일정 시간이 경과한 이후에 콜백 함수 foo를 호출한다.
**// 타이머 함수 setTimeout은 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);**
**bar();
// bar 호출 -> (3초 경과 후) foo 호출**

비동기(asynchronous) 처리: 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식

이벤트 루프와 태스크 큐

이벤트 루프(event loop): 브라우저에 내장되어 있는 기능 중 하나로, 자바스크립트의 동시성을 지원함

image.png