[1장][효리] 리액트 개발을 위해 꼭 알아야 할 자바스크립트 (2)
Closed this issue · 5 comments
hyoribogo commented
퀴즈
A. 다음 코드의 출력 결과를 작성하시오.
console.log('Start');
setTimeout(function() {
console.log('Timeout callback 1');
Promise.resolve().then(function() {
console.log('Promise inside setTimeout resolved');
});
}, 100);
Promise.resolve().then(function() {
console.log('Promise resolved');
setTimeout(function() {
console.log('Timeout callback 2');
}, 0);
});
console.log('End');
B. 다음 코드 출력 결과 요약해서 적으시오
Array.from({ length: 100 }, (_, index) => index + index).forEach((i) => {
console.log('동기임 for문 안의 실행컨텍스트지')
setTimeout(() => {
console.log(i + 1)
}, 0)
Promise.resolve().then(() => {
console.log(i)
})
})
답
정답
Start
End
Promise resolved
Timeout callback 2
Timeout callback 1
Promise inside setTimeout resolved
- 'Start'와 'End'는 콜 스택에서 바로 실행됩니다.
- 첫 번째 Promise.resolve().then은 마이크로 태스크 큐에 콜백을 추가하며, 따라서 'Promise resolved'는 콜 스택이 비어있을 때 실행됩니다.
- 두 번째 setTimeout으로 등록된 'Timeout callback 1'은 100ms 뒤에 태스크 큐에 콜백을 추가하며, 이는 콜 스택이 완전히 비어있을 때 실행됩니다.
- 'Timeout callback 2'는 마찬가지로 태스크 큐에 콜백을 추가하며, 0ms 뒤에 실행됩니다.
- 첫 번째 setTimeout의 콜백 내부에서 사용된 Promise.resolve().then은 마이크로 태스크 큐에 콜백을 추가하며, 'Promise inside setTimeout resolved'는 콜 스택이 완전히 비어있을 때 실행됩니다.
댓글 작성법
(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>
HeeSeok-kim commented
Start, End, Promise resolved, Timeout callback 2, Timeout callback 1, Promise inside setTimeout resolved
hayamaster commented
A: Start, End, Promise resolved, Timeout callback 2, Timeout callback 1, Promise inside setTimeout resolved
B:
동기임 for문 안의 실행컨텍스트지
동기임 for문 안의 실행컨텍스트지
동기임 for문 안의 실행컨텍스트지
...
0 2 4 6 8 ...
...
1 3 5 7 ...
...
khj0426 commented
Start
End
PRomise resolved
Promise inside setTimeout resolved
Timeout callback 2
Timeout callback 1
HeeSeok-kim commented
동기임 for문 안의 실행컨텍스트지 * 100
2 ~ 199
khj0426 commented
0부터 차례로 [0,2,4,6..]
동기임 for 문안의 실행 컨텍스트지
0,2,4,6,,..
1.3,5,7.9,,,