[JS] 이벤트 루프

10/6 콜스택 내용 추가

브라우저에서 자바스크립트의 실행 흐름은 이벤트 루프에 기반합니다.
이벤트 루프의 동작을 이해하고 있어야, 최적화나 올바른 아키텍쳐 설계가 가능합니다.

JS 환경

자바스크립트는 단일 스레드 기반 언어로, 한번에 하나의 작업만 실행합니다.

하지만, 자바스크립트를 실행해보면 많은 작업이 동시에 처리되는 것 처럼 보입니다.
애니메이션 효과를 보여주면서, 입력을 처리할 수 있는 것 처럼

자바스크립트가 이벤트 루프를 사용해 비동기 방식으로 동시성을 지원하기 때문입니다.

이벤트 루프

이벤트 루프는 task가 들어오길 기다렸다가 task가 들어오면 이를 처리합니다.
끊임없이 돌아가는 자바스크립트 내의 루프입니다.

task는 어디로 들어오고, task는 무엇이고, 이를 어떻게 처리할까요

위 사진은 자바스크립트의 실행 흐름을 알 수 있습니다.

JS 엔진

JS 내에는 다음과 같은 메모리가 있습니다.

• Memory Heap : 선언한 변수나 함수가 담깁니다.
• Call Stack : 함수를 호출하면 이 스택을 형성합니다.
  현재 실행 중인 작업에 관한 정보를 저장하는 stack 자료구조입니다.

function foo(a) {
  let b = 10;
  return a + b;
}

function bar(a) {
  let b = 3;
  return a + b
}

console.log(bar(7));

bar를 호출하면, 함수의 인자와 지역 변수를 포함하는 프레임이 생성되고 스택에 쌓입니다.
bar에서 foo를 호출하면, 두 번째 프레임이 생성되고 쌓입니다.

이처럼 자바스크립트를 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, call stack에 쌓고 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

함수가 반환되면, 스택에서 빠져나옵니다.

Web API

브라우저에서 제공하는 API로 비동기 작업을 수행할 수 있게 합니다.
DOM Evnet, Ajax, Timer함수 등이 이에 해당됩니다.

이들은 콜백 함수를 인자로 받는 고차함수입니다.
전달받은 콜백 함수를 Task Queue에 넣습니다.

Task Queue

비동기적으로 실행될 콜백함수(task)가 보관됩니다.

Event Loop가 하는 일

이벤트 루프는 CallStack과 Task Queue의 상태를 확인하여,
Call Stack이 빈 상태가 되면, Task Queue의 오래된 task를 Call Stack으로 넣습니다.

이처럼, Call Stack이 빈 상태가 되어야 Task Queue에서 task를 처리하는 것이
0초로 설정한 Timer 함수가 다음 코드보다 늦게 실행되는 이유입니다.

console.log(1);

setTimeout(() => console.log(2), 0);

console.log(3);


// 1 3 2

Never Blocking

이벤트 루프에 기반한 실행 흐름은 자바스크립트가 Block하지 않게합니다.

block : 한 작업을 기다리는 동안 다른 작업들이 멈추는 것

타이머 함수를 기다리거나, AJAX 요청의 반환을 기다릴 때도
사용자 입력과 같은 다른 것들을 처리할 수 있습니다.

alert와 같은 예외는 존재합니다. 때문에, 사용하지 않는 것을 권장합니다.