[이벤트 루프 구조]

// 브라우저의 루프
while(queue.waitForMessage()){
  queue.processNextMessage();
}

// queue.waitForMessage() 함수는 현재 아무 메시지도 없다면 새로운 메시지 도착을 동기적으로 기다립니다.
// 웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다.
// 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면
// 다른 이벤트와 마찬가지로 메시지가 추가됩니다.

• 자바스크립트는 무조건 단일 콜스택 사용
  • Run-to-Completion
• 멀티스레딩은 브라우저나 환경이 이벤트 루프 이용해서 도와준다

[Callstack]

• Call Stack 은 코드가 실행되면서 생성되는 Execution Context 를 저장하는 자료구조
• 함수 실행시 동기적 함수 실행들은 순차적으로 코드 파싱 하면서 콜스택으로 들어가고 실행된다
  • 스택 내부의 함수에서 실행되는 함수는 그 외부 함수 위로 쌓이고 후입 선출로 먼저 실행된다
• 실행이 완료되는 순간 콜스택에서는 제거된다

Execution Context

[TaskQueue]

• setTimeout, DOM 이벤트 등 의 콜백 함수 들은 웹 API가 가지고 있다가 시간 되면 TaskQueue에 넣고 그 후 콜스택이 비워지면 그때 순차적으로 넣어서 실행된다

// case1
function counter() {
  let answer = 0;
  let i;
  for (i = 1; i < 5; i += 1) {
    console.log("out i", i);
    setTimeout(() => {
      answer += i; // 할당된 i 는 for문 밖의 변수 i
      console.log("in i", i);
      console.log("answer", answer);
    }, 0);
  }
  console.log("direct result", answer);
  setTimeout(() => console.log("lazy result", answer), 0);
}

counter();

// Variables declared with var are not local to the loop,
// i.e. they are in the same scope the for loop is in

// case2 let이 for 안에 있을때
....
for (let i = 1; i < 5; i += 1) { // i가 loop안의 지역변수가 된다
    console.log("out i", i);
    setTimeout(() => { // 할당된 i 는 for문 안의 특정시점 블록의 변수 i
...

// case3 var가 for 안에 있을때
....
for (var i = 1; i < 5; i += 1) {
    console.log("out i", i);
    setTimeout(() => {
...

• 출력

[Microtask queue]

• task queue, Animation Frame보다 우선순위를 갖는다
• Promise등이 해당된다