이벤트 루프

 

실행 코드

자바 스크립트의 분석

전반적인 JavaScript 구조

• 호출 스택 -> 백그라운드 -> 태스크 큐 형식으로 돌아가면서 동작한다.
• 동작 순서
  1. 파일을 시작하면 반드시 anonymous가 실행이 된다.
  2. 함수를 선언한다(run)
  3. console.log(시작)을 실행한다(콘솔 창에 '시작' 출력)
  4. setTimeout 호출 
     • 비동기적 호출인 setTimeout은 백그라운드로 보내진다.
     • 백그라운드에 어떤 함수가 먼저 실행될지 알 수가 없다.
     • 타이머 (run, 3초)를 전달해 준다.
  5. console.log(끝)을 호출하고 anonymous 또한 호출 스택에서 제거해준다(모든 호출 스택이 비어져 있다) -> 콘솔 창에 '끝' 출력 후, anonymous를 제거
  6. 백그라운드에 타이머가 남아있고, 해당 타이머가 끝나게 되면 run함수를 태스크 큐로 전달한다.
  7. 호출 스택이 비어져 있나 확인 후, 비어져 있다면 호출 스택으로 run함수를 전달해서 실행한다.
  8. 전달 받은 run 함수를 실행하여 콘솔 창에 '3초 후 실행' 메시지를 출력 후 종료한다

동작 구조 자세히 보기

이벤트 루프1

• 이벤트 루프: 이벤트 발생(setTimeout 등) 시 호출할 콜백 함수들(위의 예제에서는 run)을 관리하고, 호출할 순서를 결정하는 역할
• 태스크 큐: 이벤트 발생 후 호출되어야 할 콜백 함수들이 순서대로 기다리는 공간
• 백그라운드: 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간. 여러 작업이 동시에 실행될 수 있음
  • 백그라운드는 JavaScript가 아닌 C++이기 때문에 멀티 스레드가 가능하다.(JavaScript가 멀티스레드로 돌리는게 아니다)

이벤트 루프2

• 예제 코드에서 setTimout이 호출될 때 콜백 함수 run은 백그라운드로
  • 백그라운드에서 3초를 보냄
  • 3초가 다 지난 후 백그라운드에서 테스트 큐로 보내짐
• setTimeout과 anonymous가 실행 완료된 후 호출 스택이 완전히 비워지면, 이벤트 루프가 태스크 큐의 콜백을 호출 스택으로 올림
  • 호출 스택이 비워져야만 올림
  • 호출 스택에 함수가 많이 차 있으면 그것들을 처리하느라 3초가 지난 후에도 run 함수가 태스크 큐에서 대기하게 됨(타이머가 정확하지 않을 수 있는 이유)

이벤트 루프3

• run이 호출 스택에서 실행되고, 완료 후 호출 스택에서 나감
  • 이벤트 루프는 태스크 큐에 다음 함수가 들어올 때까지 계속 대기
  • 태스크 큐는 실제로 여러 개고, 태스크 큐들과 함수들 간의 순서를 이벤트 루프가 결정함