JavaScript의 비동기적 동작방식 (Web APIs)

 

JavaScript의 비동기적 동작방식 (Web APIs)

 

 

JavaScript는 근본적으로는 동기적으로 실행되는 싱글쓰레드 방식을 취하고 있다.

동시에 여러 코드가 실행되는 것이 아닌, 앞에 코드가 실행됐다가 종료되면 그제서야 뒤에 코드가 실행되는 방식을 취하고 있다는 의미이다.

 

하지만 setTimeOut, setInterval, 이벤트리스너, AJAX 등을 쓰면 비동기적으로 작동되는 방식을 취한다.

앞에 코드가 끝나든 말든 뒤에 코드가 바로 실행된다는 소리다.

 

이는 위의 함수들이 JS 엔진 내에서 구동되는 것이 아닌, 브라우저에서 구동되는 함수들이기 때문이다.

 

코드와 함께 살펴보면 다음과 같다.

console.log("첫 번째");
setTimeout(() => {
    console.log("두 번째")
}, 1000) // 1초 뒤에 실행되는 setTimeOut 함수
console.log("세 번째");

두 번째 코드에 1초 뒤에 실행되는 setTimeout 함수를 넣었다.

 

 

만약 앞의 함수가 끝날 때까지 기다리는 동기적 함수라면 결과가 이럴 것이다.

첫 번째

(1초 뒤)

두 번째
세 번째

 

하지만 실제 결과는 이렇다.

 

 

세 번째 코드가 두 번째 코드가 끝날 때까지 기다리지 않고 바로 실행되고, 두 번째 코드는 1초 기다렸다가 실행되기 때문에 세 번째보다 늦게 나온다.

setTimeout이 비동기적으로 처리되었기 때문이다.

 

 

동기적 함수는 뭐고, 비동기적 함수는 뭘까?

 

 

이를 그림으로 살펴보면 다음과 같다.

JS 실행구조 (출처: https://medium.com/sessionstack-blog/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5)

 

JS Engine

JS 코드는 JS 엔진이라는 환경에서 처리된다.

이 JS 엔진 내에는 Memory Heap과 Call Stack이 있다.

Memory Heap은 우리가 선언한 변수, 함수가 담기는 곳이고,

Call Stack은 우리가 작성한 코드가 하나씩 담겨 실행되는 곳이다.

Call Stack은 선입후출(Last-In First-Out) 방식을 취하고 있고, 한 번에 하나의 함수만 처리하며 그 함수를 처리하면 Stack을 비워두는 특징을 가지고 있다.

 

 

Web APIs

크롬, 사파리 등 Web 브라우저에서 제공되는 API들을 말한다.

setTimeOut, setInterval, event listner, AJAX, DOM 등이 있다.

JS 엔진은 이들 함수를 받으면 바로 브라우저로 넘긴다. 브라우저는 별도 쓰레드에서 이 함수들을 가지고 있다가 콜백 요청이 들어오면 Callback Que라는 곳으로 보낸다.

 

예를 들어 위 예시의 setTimeout 함수의 경우, JS 엔진은 이 함수를 감지하자마자 이를 브라우저에 보낸다.

브라우저는 이 함수를 받자마자 자체 Timer API를 실행시켜 시간을 센다. 그리고 지정된 시간이 지나면, 브라우저는 이 함수를 Callback Que라는 곳에 보낸다.

 

 

Callback Que

브라우저가 보낸 비동기적 함수들이 담기는 곳이다.

자료구조 Que의 성질에 맞게 선입선출(First-In FIrst-Out) 방식을 취한다.

비동기 함수들은 이 곳에 있다가 Event Loop가 허락을 내리면 Callback Stack으로 보내져 실행된다.

 

 

Event Loop

Event Loop는 Call Stack과 Callback Que를 계속 주시하고 있다가,

Call Stack이 비워지면 Callback Que에 있는 함수를 보낸다.

 

정리

일반 함수들은 JS 엔진 내의 Call Stack에 담겨 선입후출의 차례로 실행된다.

비동기적 함수들은 브라우저로 보내져 콜백 요청이 들어오면 Callback Que로 들어가 실행될 준비를 한다. (이 때는 선입선출)
Event Loop는 Call Stack이 비워지면 Callback Que에 들어있던 함수들을 꺼내어 Call Stack에 집어 넣는다.
그러면 해당 함수들은 다른 일반 함수들과 마찬가지로 선입후출 순서로 실행된다.

 

 

 

 

 

Reference

https://medium.com/sessionstack-blog/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

https://www.youtube.com/watch?v=v67LloZ1ieI 

https://velog.io/@thms200/Event-Loop-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

https://it-eldorado.tistory.com/86