이런 코드는 어떤식으로 동작하나요?

async function f() {
    console.log("Hei2");

    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("완료!"), 1000);
    });

    let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)

    console.log(result); // "완료!"
    console.log("Hei3");
}

f();

console.log("Hei");

위와 같은 코드를 분석중인데요.

처음에 호출스택에 f()가 들어가고 console.log('Hei2'); 가 호츨스택에 실행되어서 나와 출력되고 그 다음 프로미스가 생성되어서 setTimeout()이 호출스택에 들어가서 실행되고 백그라운드에 1초짜리 timer가 올라가고 1초후에 task큐로가서 호출스택에 아무것도 없으면 then이 실행되어 result에 해당 값이 들어가고 console.log(result)와 console.log("Hei3")가 출력된다고 생각되었습니다.

실제 출력 결과는

Hei2 -> Hei -> 완료! -> Hei3 순인데

함수 f는 프로미스가 이행될때까지 pause상태인데 어떤식으로 중간에 Hei가 호출스택에 쌓이고 출력되는 것인지 잘 모르겠어 질문드립니다.

제 추측은 await 밑이 전부 then 함수처럼 처리되어서 백그라운드로가게 되고 f()가 종료되어 호출스택에서 나와서 Hei가 먼저출력되고 그다음 백그라운드에있던 await promise밑 부분들이 테스크 큐로들어와 이벤트루프에 의해 호출컨텍스트로 들어와 최종적으로 실행되는 것입니다.

인프런 커뮤니티 질문&답변