안녕하세요. await async 강의 7분31초 부분에서 질문입니다. 7분 31초 부분에서 질문있습니다.

Question

안녕하세요.   const p = add(1,2); console.log(p);   여기서 Promise { <pending> } 이 출력되는데요. add 함수 내부에서 await setTimeout 호출되면 add 함수는 더 진행되지 않는다고 하셨습니다. 그럼 return 도 못한건데 왜 p 에 값이 Promise 가 들어왔는지 궁금합니다..

drajin · Answer

async 함수는 Promise 객체를 반환해서 동시적으로 실행되도록 합니다. 그러니까, const p = add(1, 2)가 호출되는 순간, 이미 p에는 Promise 객체가 반환된 것입니다. 그리고, add() 함수에서 setTimeout() 함수를 await 하면서, context switching 일어나고, console.log(p) 가 pending 상태의 Promise 객체임을 출력합니다.   이것이 자바스크립트의 동시 실행 방식입니다.   쓰레드와 같이 OS 수준에서 병렬적으로 실행되는 것과 다릅니다. 쓰레드가 생성되면, OS 수준에서 core를 나눠서 병렬적으로 실행됩니다. 하지만, 자바스크립트의 동시 실행은 코드 실행이 멈추고 event loop에 대기 상태가 되면 context switching이 되고 task queue에서 다음 작업을 이어서 실행합니다.   그러니까, async 함수 add()가 호출되면서 Promise 객체가 반환되고 task queue에 넣어집니다. add() 함수에서 async setTimeout() 함수가 호출되면서 Promise 객체가 반환되고 task queue에 넣어집니다. setTimeout() 함수에서 시스템에게 1초 timeout을 등록하고 종료합니다. event loop에서는 다음 task를 실행합니다. 따라서, console.log(p)가 출력됩니다. console.log(p)가 출력되고 나면, event loop에서 다음 task를 실행합니다. 다음 task는 await로 Promise가 완료될 때까지 기다립니다. 1초 timeout이 지나면, 시스템은 timeout event가 발생하고, timeout event에 의해서 Promise 객체가 완료됩니다. 그러면, event loop에서 다음 task가 실행되고, 이때, console.log(result) 등이 출력됩니다.   JavaScript engine이 어떻게 event loop와 task queue를 사용해서 프로그램을 동시적으로 실행하는 지를 상상해 보시면 좋을 듯 합니다.

gibbs · Answer

네. 이해했습니다. 감사합니다.