[JavaScript] 이벤트 루프

 

이벤트 루프

 

---

 

# 자바스크립트는 싱글 스레드 언어

 

 자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 작업을 할 수 있다. 어떻게 가능한 것일까? 이를 이해하기 위해서는 자바스크립트가 웹 브라우저 내에서 동작한다는 사실을 알아야 한다. 웹 브라우저 내에 있는 기능들이 자바스크립트를 도와주어 비동기 작업을 처리할 수 있게 해준다.

 

 

# 웹 브라우저 내부

 

 

 자바스크립트 밖에 Web API가 존재한다. 즉, Web API란 브라우저가 제공하는 비동기 API이다. 자바스크립트는 이렇게 외부의 도움을 통해 비동기 작업을 처리할 수 있다. 콜스택에서 비동기 코드를 만나면 해당 코드는 Web API 영역으로 빠진다. 그리고 그 비동기 작업은 이후 queue라는 곳으로 이동하여 대기하다가 콜스택이 비면 순서대로 콜스택으로 이동하여 실행된다. 이때 queue에서 콜스택으로 비동기 작업을 이동시켜주는 역할을 하는 것을 이벤트 루프라고 부른다. 이벤트 루프이다. 즉, queue와 콜스택을 연결해주는 역할이다.

 

 

# 예시

 

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

 

 

1. bar()는 호출된 후 Web API에 담긴다. setTimeout은 비동기 작업이기 때문에 Web API에서 처리한다.

2. bar()가 콜스택에서 Web API로 이동한 후 foo()가 호출되고 바로 console.log("First")가 실행된다.

3. foo()가 실행된 후 baz()가 호촐되어 console.log("Third")가 실행된다.

4. baz()가 실행되어 콜스택이 비었다. 콜스택이 비었기 때문에 bar()가 queue에서 콜스택으로 이동한다.

5. console.log("Second")가 실행된다.

 

 

 자바스크립트는 싱글 스레드 언어이지만 이렇게 브라우저 내부에 비동기 작업을 도와주는 장치가 존재하기 때문에 비동기 작업도 처리할 수 있다. 이 내용을 통해 콜스택이 비어야만 queue 내부의 작업이 처리될 수 있다는 것을 알 수 있다. 따라서, 콜스택 내부에서 실행되는 함수가 시간이 오래 걸리는 함수라면 코드 전체의 효율성이 나빠질 수 있다는 것을 알 수 있다.

 

---

 

for문 너무 자주 사용하면 웹 페이지 느려지는 것 같은 기분이던데 이것 때문이었을까!!🤔🤔 이제는 코드를 막 쓰지 말고 효율성도 따져가며 작성해야겠다.

 

 

참고 자료

gif 출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

https://youtu.be/v67LloZ1ieI