Javascript Promise, async/await MicroTask queue 동작차이 🖇

Javascript 내에서 callback를 더 효율적으로 사용하기 위해 promise가 등장하였고 promise를 더 효율적으로 사용하기 위해 es8에서 async/await 이 등장하였습니다.

 

promise와 async/await이 브라우저에서 어떻게 구현되는지 동작의 차이를 알게되었고 이를 글로 적어보려 합니다.

promise, async/await은 둘다 promise를 return하거나 throw하므로 micro task queue에서 다루어집니다.

callback queue에는 3종류가 있습니다.
macro task queue, micro task queue, animationFrame
우선순위는 micro task queue > animationFrame > macro task queue 순입니다.

macro task queue에 있는 것이 비워지기 전에 항상 micro task queue, animationFrame을 전부 실행시킵니다.

micro task queue 전부 실행
animation Frame 전부 실행
macro task queue 하나 실행

micro task queue 전부 실행
animation Frame 전부 실행
macro task queue 하나 실행

위와 같이 실행됩니다.
이렇게 동작하는 이유는 micro task queue, animation frame을 항상 동일한 상황에서 실행 시키기 위함이라고 합니다.

 

promise의 예시입니다

console.log('start')

setTimeout(() => console.log('setTimeout'),0)

Promise.resolve('Promise').then(res => console.log(res))

console.log('End')

promise의 resolve는 바로 micro task queue에 함수를 추가시킵니다.

실행결과는 아래와 같습니다.

start
end
promise
setTimeout

 

async/await을 활용 했을때의 예시입니다.

const myPromise = () => {
    return new Promise((resolve, reject) => {
        resolve('hihi')
    })
}
// const myPromise = () => Promise.resolve('hihi')

const myFunc = async () => {
    console.log("Inner function")
    console.log(await myPromise())
    console.log("goOut function")
}

console.log("Before Function")
myFunc()
console.log("After Function")

위의 출력 결과는 아래와 같습니다.

Before Function
Inner function
After Function
hihi
goOut function

결론 => async 함수에서 await을 만나면 해당 함수는 pause 상태가 된채로 micro task queue로 이동되어집니다. 이후 콜스택이 비어지길 기다렸다가 micro task queue에서 실행이 됩니다.

그래서 위의 실행결과에서 After Function이 먼저 실행되고 hihi, goOut function이 실행된것입니다.

 

 

위의 동작으로 인해 async내에서 await끼리의 순서는 보장됨이 확인 되었습니다.

async 내에서 await을 만나면 pause된 상태로 micro task queue로 이동되어 지고 실행되고 

await을 또 만나면 다시 pause된 상태로 micro task queue로 이동되어지면서 실행 되기 때문입니다.

 

나중에는 promise -> generator -> async/await을 알아보겠습니다.

 

 

 

 

출처: https://towardsdev.com/event-loop-in-javascript-672c07618dc9

The JavaScript Event Loop: Explained

https://velog.io/@chojs28/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EC%9D%98-%EC%9B%90%EB%A6%AC-Event-Loop-Task-Queue

자바스크립트 동작 원리와 비동기 처리의 원리 (Event Loop, Task Queue)

https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)