Event Loop

김선우·2022년 6월 27일
0

Event Loop는 MDN 문서로 검색하면 "큐의 다음 메시지를 처리합니다" 라고 나온다.

..? 무슨소린지 이해가 잘 가지 않는다..

자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.(그림 왼쪽!)
가장 유명한 것이 구글의 V8 Engine이다.
자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어인데,
이 의미는 Call Stack이 하나 라는 이야기이다.
(멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미!)

  • Memory Heap : 메모리 할당이 일어나는 곳
    (ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨져 있음)
  • Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임.
    Stack(스택) : 자료구조 중 하나, 선입후출(LIFO, Last In First Out)의 룰을 따른다.

Web API

그림의 오른쪽에 있는 Wep API는 JS Engine의 밖에 그려져 있다.
즉, 자바스크립트 엔진이 아니다.
Web API 는 브라우저에서 제공하는 API 로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 밀어 넣는다.

Event Loop

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
Call Stack이 빈 상태가 되면, Callback Queue의 첫번째 콜백을 Call Stack으로 밀어넣는다.
이러한 반복적인 행동을 틱(tick) 이라 부른다.

정리하면,

  • V8 엔진에서 코드가 실행되면, Call Stack에 쌓인다.
  • Stack의 선입후출의 룰에 따라 제일 마지막에 들어온 함수가 먼저 실행되며,
    Stack에 쌓여진 함수가 모두 실행된다.
  • 비동기함수가 실행된다면, Web API가 호출된다.
  • Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
  • Event Loop는 Call Stack이 빈 상태가 되면
  • Callback Queue에 있는 첫번째 콜백을 Call Stack으로 이동시킨다.
  • (이러한 반복적인 행동을 틱(tick)이라 한다.)
profile
생각은 나중에..

0개의 댓글