Event Loop

single thread

스레드(thread)는 어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다.
자바스크립트의 큰 특징 중 하나는 '단일 스레드' 기반의 언어라는 점이다.
스레드가 하나라는 말은 곧, 동시에 하나의 작업만을 처리할 수 있다라는 말이다. 하지만 실제로 자바스크립트가 사용되는 환경을 생각해보면 많은 작업이 동시에 처리되고 있는 걸 볼 수 있다.
예를 들면, 웹브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, Node.js기반의 웹서버에서는 동시에 여러 개의 HTTP 요청을 처리하기도 한다.

JS Engine

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

호출 스택 (Call Stack)

자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어 있다.
MemoryHeap은 우리가 프로그래밍을 할 때 선언된 변수, 함수 등이 담겨지는, 메모리 할당이 일어나는 곳이다.
Call Stack은 코드가 실행될 때 쌓이는 곳이고, Stack형태로 쌓이게 된다.
Stack은 LIFO(Last In First Out) 선입후출 즉, 가장 마지막에 들어온 게 먼저 나가는 구조이다.

	function test () {
    
    
    }

콜백 함수(Callback Function)

다른 함수의 인자로 넘겨지는 함수
콜백 수신 함수에 의해 특정 시점에 실행
동기 콜백의 경우 호출 즉시 실행
비동기 콜백의 경우 나중에 조건을 만족했을때 실행
이벤트 리스너
타이머 / XMLHttpRequest 요청

Web API

Web API는 브라우저에서 제공하는 API로, Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백함수를 Callback Queue에 넣어준다.
우리가 자주 사용하는 setTimeout이나 AJAX 같은 비동기 호출, 이벤트들을 웹에서 작업을 수행할 수 있도록 한다.

Callback Queue / Task Queue

비동기로 실행된 콜백 함수가 보관되는 영역
Queue 자료구조는 FIFO(First In First Out) 구조로 섭입 선출, 먼저 들어간 게 먼저 나오는 구조이다.

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)이라 한다.)

정리

자바스크립트는 비동기 동적 언어, '단일 스레드' 기반의 언어

Memory Heap: 메모리 할당이 발생하는 곳

Call Stack : 실행된 코드의 환경을 저장하는 자료구조, 함수 호출 시 Call Stack에 push 된다.

Event Queue : Web API를 지나온 비동기 코드를 순차적으로 저장하는 자료구조

Web APIs: DOM, AJAX, setTimeout 등 브라우저가 제공하는 API

Event Loop: Callback Event Queue에서 하나씩 꺼내서 동작시키는 Loop를 Event Loop라 말한다.