[JavaScript] 이벤트 루프

🙋‍♀️목차

JavaScript는 싱글 스레드로 동작?!

브라우저 환경

비동기 코드는 어떻게 작동하는가?

• 헷갈리기 쉬운 예제 (0초 후에 실행?)

---

💻Javascript는 싱글 스레드로 동작?!

✅싱글스레드 = 한 번에 하나의 작업만 수행

그런데 어떻게 비동기로 일을 처리할 수 있는거지?🤔??

→ 자바스크립트가 구동되는 환경(브라우저, Node.js 등)에서는 주로 여러개의 스레드가 사용되며,

이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 바로 이벤트루프!!

 

💻브라우저 환경

이미지 출처 : https://medium.com/@vdongbin/javascript-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC-single-thread-event-loop-asynchronous-e47e07b24d1c

위 그림은 브라우저 환경을 간단하게 그림으로 표현한 것이다.

• 자바스크립트 엔진 (자바스크립트 코드를 해석하고 실행하는 인터프리터)
  • Heap : 메모리 할당이 일어나는 부분
  • Call Stack : 함수가 호출되는 순서대로 쌓이는 스택
• 자바스크립트 엔진 외
  • Web API : 브라우저에서 자체 지원하는 API. setTimeout이나 XMLHttpRequest 등 비동기 작업을 수행할 수 있도록 함
  • 콜백 큐(태스크 큐) : Web API에서 비동기 작업이 실행된 후 콜백함수들이 대기하는 곳
  • 이벤트 루프 : 콜스택이 비어있을 때 태스크 큐에 있는 콜백 함수들을 넘겨줌

 

💻비동기코드는 어떻게 작동하는가?

https://youtu.be/wcxWlyps4Vg 를 참고해서 제작한 이미지

• 함수를 실행하면 콜스택에 쌓이게 되고, 함수가 값을 반환함과 동시에 스택에서 빠져나와 사라진다.
• setTimeout은 web API에 Timer를 생성하고, 콜백함수를 넘겨준다.
• Timer는 일정 시간을 대기하면(혹은 비동기 일을 끝내면) callback을 태스크큐에 넘기고 사라진다.
• 이벤트루프는 태스크큐와 콜스택을 지켜보고 있다가, 콜스택이 모두 비면 태스크큐에 있는 콜백을 콜스택에 올린다.

 

✅헷갈리기 쉬운 예제(0초 후에 실행?)

 

0초 후에 실행 = 지금 바로 실행??🤔

→ 아니!!😱

setTimeout에 의해 콜백(console.log("언제 출력??"))은 태스크큐에 올라가 있는 상태!

콜스택이 비어있어야 콜백을 올릴 수 있기 때문에, 1과 2가 출력된 후 콜스택이 비면 "언제 출력??"이 출력된다.

 

 

👀참고 (감사합니다)

https://youtu.be/wcxWlyps4Vg

https://youtu.be/8aGhZQkoFbQ

https://meetup.toast.com/posts/89

자바스크립트와 이벤트 루프 : NHN Cloud Meetup

https://medium.com/@vdongbin/javascript-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC-single-thread-event-loop-asynchronous-e47e07b24d1c

Javascript 동작원리 (Single thread, Event loop, Asynchronous)