이벤트 루프와 비동기

이전 포스팅에서

콜 스택 (호출 스택)

자바스크립트의 콜 스택 (호출 스택) 에 관하여 알아보았다

포스팅 끄트머리에서 ‘자바스크립트는 싱글 스레드 언어이지만 비동기 작업이 가능하다' 라고 적으면서 비동기 콜백에 관하여 간단하게 소개했었다

스레드가 하나밖에 없다면서 어떻게 비동기 동작이 가능하냐고~~~ 싶은데, 자바스크립트 자체는 비동기를 지원하지 않아도 브라우저랑 Node 엔진이 지원하기 때문이다

이전 포스팅에서는 호출 스택을 중점적으로 다루고 이벤트 루프는 맛보기 정도로만 적었으므로 이번에는 이벤트 루프를 좀 더 자세히 적어보려 한다 (사실 끄트머리에 있는 내용을 여기로 옮길까 했는데 굳이? 싶어서..)

자바스크립트 구동 환경

Untitled

저번에 썼던 사진..

위 코드의 실행 순서로 알맞은 것은?

let i = 0;
  setTimeout(() => {
    console.log("bye");
  }, 50);
  let arr = [];
  while (i < 1000000000) {
    i++;
  }
  console.log(i);
  setTimeout(() => {
    console.log("hello");
  }, 30);
  1. hello가 대기 시간이 제일 짧으니까 가장 먼저 출력되고, bye가 출력되고, while문을 기다린 후 i가 출력될 것이다
  2. bye가 가장 위에 있으니까 가장 먼저 출력되고, i가 출력되고, hello가 출력될 것이다
  3. 동기 코드인 while문이 가장 먼저 실행되며 i가 출력되고, hello가 대기 시간이 더 짧으므로 먼저 출력되고, 마지막에 bye가 출력될 것이다
  4. 동기 코드인 while문이 가장 먼저 실행되며 i가 출력되고, bye가 가장 위에 있으니까 먼저 출력된 후 hello가 출력될 것이다
  5. 랜덤이다! 나도 모르겠다!

Untitled