이벤트 루프에 대해서

자바스크립트 엔진은 두가지 주요 구성 요소로 구성이 된다

• 메모리 힙 - 메모리 할당이 발생하는 곳 (변수나 객체들이 저장되는 창고역할)
• 콜 스택 - 코드가 실행될 때 스택 프레임이 있는 곳

콜 스택

자바스크립트는 단일 스레드 기반 언어이기 때문에, 한번에 하나씩 작업을 진행하는데
하지만 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다
함수가 호출 될 때 콜 스택(함수의 호출을 저장하는 자료구조) 이라는 보관함에 넣어 두고 실행이 완료 되면 스택에서 제거 된다
스택 구조이기 때문에 먼저 들어온 함수가 나중에 제거 된다

이벤트 루프

함수들이 콜스택에 쌓여있을 때 이벤트 루프가 순서를 결정해 준다

이벤트가 발생하면 Wep API에서 콜백 큐(테스크 큐)로 보내지고, 차례대로 콜 스택에 쌓여서 실행되는 구조이다

web API

Web API는 브라우저에서 제공하는 API들이다 대표적인 예시로는 setTimeout 함수가 있다
setTimeout같은 타이머 API 뿐만 아니라 DOM 메서드, HTTP 요청같은 것들은 전부 이 WebAPI에서 제공한다.

콜백 큐

함수들이 콜스택으로 가기 전에 대기하는 곳이다
콜 스택과 다르게 가장 먼저 들어온 함수를 가정 먼저 실행시킨다 콜백 함수는 이 콜백 큐에 잠시 저장 되었다가 콜 스택으로 보내진다

예시

function two() {
  console.log('2');
}

console.log('1');

setTimeout(two, 3000);

console.log('3');

위의 예시의 경우에 1, 3, 2 의 순서로 콘솔에 찍힌다

1. two 함수가 먼저 콜스택에 쌓이고 setTimeout이 실행되고 콜백 함수를 web API로 보낸다
2. 3초후 콜백함수를 테스크 큐로 보내고 콜스택이 비게 되면
3. 콜백함수를 콜스택에 보내 실행 시킨다

참고
https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=841s
https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf