매크로태스크 vs 마이크로태스크

Web API 기능이 종료되면 콜백 함수가 콜백 큐에 순서 대로 담기는데 콜백 함수가 담기는 큐는매크로 태스크와 마이크로 태스크 두가지 종류가 있다

 

마이크로 태스크란?

현재 수행중인 작업이 끝난 뒤에 이어서 실행될 작업을 말한다

프로미스 핸들러에서 볼수 잇는 then(), catch(), finally() 와 같은 예시가 있다

먼저 들어온 작업을 먼저 실행한다=>어떤 작업을 순차적으로 실행하고 싶을 때 유용

콜스택에 실행할 것이 아무것도 남아 있지 않은 경우에 마이크로 태스크 큐에 있는 작업이 실행된다

매크로 태스크 (Macro Task) 보다 실행 우선순위가 높다

Promise
Promise.reslove(value).then((value) => { … });

• reslove(value) 함수 호출 시 마이크로태스크가 생성되어 큐에 추가된다
• 마이크로태스크 대상은 (value) => { ... } 함수

Promise.reject(error).catch((error) => { … });

• reject(error) 함수 호출 시 마이크로태스크가 생성되어 큐에 추가된다
• 마이크로태스크 대상은 (error) => { ... } 함수

=>then 내부의 작업이 마이크로 대기열로 들어간다

async/await

• async 키워드가 붙은 함수도 호출하면 일단 실행되고
• await 키워드를 만나면 마이크로 태스크가 생성된다
  =>await 키워드 뒤에 오는 함수는 실행되고 결과가 반환되는 시점에 마이크로 태스크가 생성된다
• await 키워드의 하위 코드가 모두 마이크로 태스크 대상이다

매크로 태스크란?

일반적으로 콜스택의 작업이 끝난 후에 실행되는 작업을 말한다

보통 콜스택 작업 뒤에 시간이 오래걸리는 UI 업데이트 혹은 다른 Blocking operations 과 같은 작업을 수행하기 위해 사용한다.

• setTimeout(callback, timeout)
• setInterval(callback, timeout)
• setImmediate(callback)
• requestAnimationFrame(callback)

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

// 함수 호출 1
setTimeout(foo, 0);

// 함수 호출 2
Promise.resolve(console.log('1st Promise'))
  .then(() => {
    console.log('1st resolve 1');
    setTimeout(foobar, 0);
  })
  .then(() => console.log('1st resolve 2'));

// 함수 호출 3
Promise.resolve(console.log('2nd Promise'))
  .then(() => console.log('2nd resolve 1'))
  .then(() => console.log('2nd resolve 2'));

// 함수 호출 4
bar();

함수 선언문들이일단 상단의 함수 선언문들은 코드 평가 단계에서 실행 컨텍스트의 환경 레코드에 등록된다
 setTimeout함수는 foo 함수를 0 딜레이 후에(최소 단

위인 4ms 가량 후에 실행될 것이다) 호출해달라는 명령을 브라우저에 위임하고 pop된

이 후 resolve값을 가진 프로미스 객체를 반환하는 프로미스의 내장 메서드 resolve가 호출된다 이때  console.log('1st Promise')가 실행되고 pop되며 그 후로 두 번째 resolve 함수가 호출되어 '2nd Promise'를 출력한다

마지막으로 bar 일반 함수가 호출되어 'bar'를 출력한다

이로서 콜스택은 비게된다. 사실 이 콜 스택이 비워지기 이전에 이미 태스크 큐에는 4ms가 지난 시점에서 foo 함수가 들어가 있을 확률이 높고 마이크로 태스크 큐에도 console.log('1st resolve 1'); 와 console.log('2nd resolve 1'); 가 이미 들어있을 수 있다
=>태스크 큐와 마이크로 태스크 큐, 각각의 프로미스 객체들을 병렬적으로 동작하기 때문

우선 순위가 높은 1번째, 2번째 프로미스 객체의 콜백 함수가 각각 콜스택을 거쳐 실행된 후, 각각이 다시 반환한 두 번째 콜백 함수가 실행되며 마지막으로 태스크 큐에 들어가 있는 foo 콜백 함수와 foobar 콜백함수가 차례로 실행되며 모든 함수 실행을 마치게 된다