앞의 내용과 이어지는 부분을 설명하기 위해 순서를 조금 바꾸었다.

2. 이벤트 루프(Event Loop)와 동시성(Concurrency)

배경지식 조금 ...

• 브라우저는 단일 쓰레드(single-thread)에서 이벤트 드리븐(event-driven) 방식으로 동작한다.
• 단일 쓰레드는 쓰레드가 하나뿐이라는 의미이며 이말은 곧 하나의 작업(task)만을 처리할 수 있다는 것을 의미한다. 하지만 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성(Concurrency)을 지원하는 것이 바로 **이벤트 루프(Event Loop)**이다.
• **자바스크립트 엔진(JavaScript engine)**은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 대체적으로 웹 브라우저에서 사용된다.
• V8이 대표적인 자바스크립트 엔진으로, 구글 크롬의 일부이다.
• 비동기 작동방식을 이해하기 위해서는 자바스크립트 엔진의 구조와, 이 **자바스크립트 엔진을 구동시키는 환경, 즉 브라우저(또는 Node.js)**에 대해 이해해야 한다.

JS 엔진의 구조

• 구글의 V8을 비롯한 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 나뉜다.
  • Call Stack(호출 스택) 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.
  • Heap 동적으로 생성된 객체 인스턴스가 할당되는 영역이다.
• 이와 같이 자바스크립트 엔진은 단순히 작업이 요청되면 Call Stack을 사용하여 요청된 작업을 순차적으로 실행할 뿐이다. 앞에서 언급한 동시성(Concurrency)을 지원하기 위해 필요한 비동기 요청(이벤트를 포함) 처리는 자바스크립트 엔진을 구동하는 환경 즉 브라우저(또는 Node.js)가 담당한다.

(브라우저와 Node.js가 가지는) 런타임과 Event Loop의 구조

추가 참고자료: (자료) JavaScript Engine and Runtime Explained 외

• 주제가 조금 다르지만 개념 설명도 좋으니 참고하자.

• JS 런타임에 대한 설명은 다음과 같다.

  A JavaScript (JS) runtime is a comprehensive environment that enables the execution of JavaScript code. It consists of various components working together to facilitate the execution of JavaScript applications. When we refer to a JS runtime, we're typically talking about the entire ecosystem that extends beyond the basic execution of code. … Depending on where JavaScript is running (the web browser or server-side with Node.js), there might be additional environment-specific features in the runtime. …

  Just think of a JS runtime as a big box that includes all the things we need to run JavaScript in the browser. - freeCodeCamp

• JS 런타임은 위 이미지와 같이 JS엔진에 더해 Web API와 Queue 자료구조를 포함하고 있으며, 이들 사이를 관리 감독하는 Event Loop라는 시스템을 가지고 있다고 볼 수 있다. 해당 요소들에 대한 poiemaweb의 설명은 다음과 같다.

  • Event Queue(Task Queue) 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행된다.
  • Event Loop(이벤트 루프) Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue 내의 task가 Call Stack으로 이동하고 실행된다.

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(
		function() { console.log('func2'); }, // setTimeout의 callback함수
		0 // 인수 인터벌. (대기할 시간을 지정하는 인자)
	);
	
	func3();
}

function func3() {
  console.log('func3');
}

func1();