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

Question

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밑 부분들이 테스크 큐로들어와 이벤트루프에 의해 호출컨텍스트로 들어와 최종적으로 실행되는 것입니다.

제로초(조현영) · Answer

네 맞습니다. await을 만나는 순간 promise의 then과 같습니다. 거기서 함수 f는 호출스택에서 빠져나오게 됩니다. 이 때 Hei가 호출스택에 들어가서 호출됩니다. 나중에 resolve되는 순간 await 부분부터 재개가 됩니다(태스크큐->호출스택)