[JavaScript] 자바스크립트 이벤트 루프(Event Loop)

JS 엔진

• 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있다.
  - 가장 유명한 것이 구글의 v8이다.
• 자바스크립트는 단일 스레드(single thread) 프로그래밍 언어.
  - 이것은 콜스택이 하나라는 의미
  - 멀티가 되지않고, 하나씩 처리한다는 의미
• 메모리힙
  - 메모리할당이 일어나는 곳 => 우리가 선언한 변수, 함수 등이 담겨져있다.
• 콜스택
  - 코스가 실행될때 쌓이는 곳. stack 형태로 쌓인다.
  - stack이란? 자료구조 중 하나. 선입후출의 룰을 따른다.

Web API

• 그림에서 봤을때 JS엔진 바깥에 그려져있다.
  - 즉, JS엔진이 아니다는 뜻.
• 웹 api는 브라우저에서 제공하는 api로 timeout과 ajax, DOM이 있다.
• 콜스택에서 실행된 비동기함수는 web api에서 호출하고, web api에서는 Callback Queue에 밀어넣는다.

Callback Queue

• 비동기적으로 실행된 콜백함수가 보관되는 영역이다.
• 예를들어, setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자), addEventListener에서 click이벤트가 발생했을때 실행되는 함수(2nd 인자)등이 보관된다.
• queue : 자료구조 중 하나, 선입선출의 룰을 따른다.

이벤트루프

• 이벤트루프에서는 콜스택과 콜백큐의 상태를 체크하여 콜스택이 빈상태가 되면, 콜백큐의 첫번째 콜백을 콜스택에 밀어넣는다.
• 이러한 반복적인 동작을 틱(tick)이라고 한다.

정리

v8엔진에서 코드가 실행되면, call st ack에 쌓인다.

stack은 선입후출의 룰을 따라서, 마지막에 들어온 함수가 먼저 실행되며 stack에 쌓여진 함수가 모두 실행된다.
- 비동기함수가 실행되면, web api가 호출되고,
- web api는 비동기함수의 콜백함수를 콜백큐에 밀어넣는다.
- 이벤트루프는 콜스택이 빈상태가되면 콜백큐에서 첫번째콜백을 가져와 콜스택으로 이동시킨다.

자바스크립트는 단일스레드 언어기 때문에 한번에 하나씩 실행된다.

그러나 web api, 이벤트루프, callback queue 때문에 멀티스레드처럼 보인다.

---

출처

Event Loop

콜스택 (Call Stack)

https://velog.io/@fromzoo/%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A3%A8%ED%94%84

---

이벤트 루프와 스택 호출 예제 사이트

이벤트 루프와 스택 호출 예제 사이트 https://www.jsv9000.app/