[1장][효리] 리액트 개발을 위해 꼭 알아야 할 자바스크립트 (2)

[hyoribogo]

퀴즈

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]

Start, End, Promise resolved, Timeout callback 2, Timeout callback 1, Promise inside setTimeout resolved

[hayamaster]

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]

Start
End
PRomise resolved
Promise inside setTimeout resolved
Timeout callback 2
Timeout callback 1

[HeeSeok-kim]

동기임 for문 안의 실행컨텍스트지 * 100
2 ~ 199

[khj0426]

0부터 차례로 [0,2,4,6..]
동기임 for 문안의 실행 컨텍스트지
0,2,4,6,,..
1.3,5,7.9,,,