JavaScript 동작 원리 :: 런타임 구성과 비동기 동작 (feat. 비동기 콜백)

JS 동작원리

js는 싱글 쓰레드 기반 언어이므로 호출 스택이 하나고 한 번에 한 작업만 처리할 수 있다. 이에 따른 문제는 하나의 로직을 수행하는데에 시간이 오래 걸리면 다른 로직이 멈춰버린다는 것이다. 이를 해결하려면 비동기 콜백을 사용할 수 있다.

런타임

js 런타임은 JS엔진, web api, task queue, event loop, render queue로 되어있다.

 

엔진

js 엔진의 대표적인 예는 Google의 V8 엔진이다. Chrome과 Node.js에서 이를 사용한다.

• memory heap : 메모리 할당
• call stack : 호출 스택

위의 두가지로 엔진은 구성되어있다.

 

Web API

DOM, Ajax, TimeOut 등의 Web API가 잇다.

Callstack에서 비동기 함수가 실행되면 Web API를 호출하고 API는 콜백함수를 Task Queue에 넣게 된다.

 

Event Loop

CallStack과 Task Queue의 상태를 체크하여, CallStack이 비었을 때 Task Queue의 첫번째 콜백을 CallStack으로 넣는다.

CallStack은 호출을 뜻하고, Task Queue는 Web api가 수행하고 주어진 결과를 뜻한다. 따라서 기존 js 코드에서 호출된 함수를 실행하다가 Web API 호출이 나타나면 비동기로 수행하고 계속 CallStack에서 함수를 꺼내서 실행한다. Web API가 반환하면 Task Queue에 콜백함수를 넣고, CallStack이 빌 때 Task Queue의 함수들을 CallStack으로 넣는다.

 

코드로 보기

// Synchronous
[1,2,3,4].forEach(function(i) {
   console.log(i); 
});

// Asynchronous
function asyncForEach(array, cb) {
    array.forEach(function(){
       setTimeout(cb, 0); 
    });
}
asyncForEach([1,2,3,4], function(i){
    console.log(i); 
});

첫번째는 JS 엔진의 Call Stack에 console.log 함수가 계속 쌓였다가 실행되는 방식으로 수행된다.

두번째는 setTimeout이라는 WebAPI 때문에 TaskQueue로 이동되었다가 Call Stack이 비었을 때 추가되어 실행된다. 이렇게 비동기 콜백을 이용하면 싱글 쓰레드의 단점을 메울 수 있다.

참고 : https://baeharam.github.io/posts/javascript/jshow-javascript-works/