안녕하세요. await async 강의 7분31초 부분에서 질문입니다. 7분 31초 부분에서 질문있습니다.
397
작성한 질문수 7
안녕하세요.
const p = add(1,2);
console.log(p);
여기서 Promise { <pending> } 이 출력되는데요.
add 함수 내부에서 await setTimeout 호출되면 add 함수는 더 진행되지 않는다고 하셨습니다. 그럼 return 도 못한건데 왜 p 에 값이 Promise 가 들어왔는지 궁금합니다..
답변 2
2
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를 사용해서
프로그램을 동시적으로 실행하는 지를 상상해 보시면 좋을 듯 합니다.
자료집 관련
0
9
1
13. (App 2) 기본기 훈련 에서
0
14
1
챌린지 시작일 문의
0
17
0
2. 어떤 도구를 사용하는 것이 가장 유리할까? 강의 중
0
16
1
11차시 Antigravity IDE 설치 후
0
19
1
처음 에이전트 설정을 잘못 했을 경우 수정 하는 방법
0
16
1
5,6,7,8 내용이 없어요
0
16
1
ThemeProvider를 이용해서 NextThemeProvider를 따로 생성하여 Layout.tsx에 적용하는 이유는 뭘까요?
0
14
1
mission 09-01 을 수행할 수 없어요
0
22
1
Context API vs Zustand 그리고 Auth
0
36
2
순수 함수 / 순수 컴포넌트
0
23
1
css box-sizing 관련 질문
0
34
2
스니펫이 이상해요
0
32
2
Editor Component의 최적화 불가능 이슈
0
38
2
useCallback ⊂ useMemo
0
34
2
깃허브 저장소를 어디에 첨부하셨나요?
1
40
1
nestjs 강의는 없나요??
1
41
2
스타터 저장소
1
43
1
What is Rxjs
0
32
1
라이브러리 설치 질문
0
34
2
linter 질문
0
40
2
수업자료 링크 접속했는데 404에러 뜹니다 ㅠ
1
48
1
리덕스 툴킷 맵다
0
35
1
Promise 객체 강의 7분 27초 부분 질문입니다.
1
520
2