구현 과정 call stack, Web API, callback queue + promise

🍓 구현 과정

(consol.log "끝"이 출력되기전에 setTimeout"중간"의 타임아웃이 먼저 끝나 callback queue로 간다고 가정)
call stack에 consol.log "시작"이 들어감과 동시에 출력
setTimeout"중간"이 call stack에 들어갔다가 비동기함수이기 때문에 Web API에 들어감
call stack에 consol.log "끝" 들어감
Web API에 있던 setTimeout"중간"의 timeout이 끝나서 callback queue로 감
하지만 아직 콜스택이 비어있지 않은 상태. consol.log "끝" 이 출력되고 빈 자리에
setTimeout"중간"이 들어감
비로소 setTimeout"중간" 출력

🍓 구현 과정

(setTimeout"중간"의 타임아웃이 then보다 먼저 끝났다고 가정(먼저 callback queue로 들어감))

• call stack에 consol.log "시작"이 들어감과 동시에 출력
• setTimeout"중간"이 call stack에 들어갔다가 비동기함수이기 때문에 Web API에 들어감
• 비동기가 된 promise .then도 Web API에 들어감
• call stack에 consol.log "끝" 들어감
• setTimeout"중간"의 타임아웃이 then보다 먼저 끝났다고 가정(먼저 callback queue로 들어감)
• 이벤트 루프가 돌아가면서 콜스택에 뭔가 있음을 감지. consol.log "끝" 출력함.
• 우선순위에 의해 promise .then이 먼저 call stack에 들어감
  console.log ("프로미스")를 출력하면서 then도 빠져나옴
• 빈 call stack에 setTimeout"중간" 들어가고 출력됨