이벤트 루프(Event Loop)

JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있다.

 

자 여기까지만 말하면 대체 뭔소리야 싶긴하다 나도 처음 봤을때 이게 뭔소린가 싶었으니까...

이 Event Loop 개념에 대해서 알려면 일단 JavaScript 가 단일 쓰레드 기반 언어라는 것을 알아야한다.

 

단일 쓰레드라는 걸 간단하게 설명하자면 한번에 하나의 동작밖에 못한다고 생각하면 편하다, 그러면 여기서 

"아니 자바스크립트는 비동기로 실행된다며 그러면 여러개를 한번에 처리하는거 아니야???" 하는 의문이 든다

나도 처음에는 그랬다, 이렇게 자바스크립트가 여러 동작을 한번에 처리하게끔 보여지게 (절대 한번에 처리되는 것이 아니다) 하는게 이벤트 루프이다.

 

이 이벤트 루프를 알기 위해서는 콜 스택(call stack) 과 태스크 큐라는 개념을 알아야 한다, 하나씩 짚어보자

 

1. 콜 스택(call stack)

function first(){
	console.log("첫번째 입니다");
    second();
}

function second() {
	console.log("두번째 입니다");
    third();
}

function third() {
	console.log("세번째 입니다");
}

first();

이런 식으로 first 함수가 second 함수를 부르고 second 함수가 third 함수를 부른다고 가정했을 때,

아래 그림과 같이 콜스택에 추가가 되고 실행 될 때 실행된 함수는 콜스택에서 빠져나갈 것이다.

(편하게 설명하기 위해서 함수단위로 잘랐습니다, 절대 콜 스택에는 함수 단위로 추가되지 않습니다.)

이렇듯 자바스크립트가 실행될 때 생기는 실행 컨택스트를 저장하는 자료구조를 콜 스택이라고 부른다.

 

2.큐(Queue)

큐란 비동기로 처리되기 전에 잠시 대기하고 있는 장소라고 생각하면 편한데 대표적으론 setTimeout 이 있다.

setTimeout(() => console.log("setTimeout"),0);
for(let i =0; i< 1000; i++){
}
console.log("for문 끝");

위와 같은 코드가 있다고 가정해보자 for 문을 1000번 돌리는게 당연하겠지만 0초보다는 많이 시간 소요가 될 것이다,

그렇다면 0초 뒤에 실행하는 코드가 있다고 하면 과연 어떻게 될까?

아마도 많은 분들이 콘솔창에 "setTimeout" 이 찍히고 그 뒤에 "for문 끝" 이라는 값이 찍힐거라 예상하셨겠지만

실제로는 그렇지 않다.

실제로 코드를 실행하면 "for문 끝" 이 "setTimeout" 보다 먼저 실행될 것이다 그 이유는 이 비동기로 실행되는 코드들은 코드 순서와 상관없이 순차적으로 큐라는 곳에 쌓이는데 위의 코드를 그림으로 표현하면 대략 이런 느낌이 된다

그리고 이 큐에 들어가있는 코드들은 콜스택이 전부 비워지기전에는 실행이 되지 않는다는 특징이 있다.

그렇기 때문에 for 문이 끝나고 "for문 끝"이라는 단어가 콘솔에 찍히고 그 이후에 setTimeout 함수가 실행되는 것이다.

 

 

자 여기까지가 콜스택과 큐에 대한 설명이었다, 이벤트 루프는 여기까지 안다면 정말 간단한데 이 큐에서 대기 중인 실행 컨택스트를 콜스택으로 옮겨주는 것을 이벤트 루프라고 한다.

 

물론 좀 더 깊게 들어가면 설명할게 많아지긴 하지만 그런건 차차 알아가보자

 

 

ps. 혹시 제가 잘못알고 있는 개념들이 있다면 댓글로 남겨주시면 감사하겠습니다.