자바스크립트의 특징_싱글스레드 & 비동기 처리

어떻게 자바스크립트는 싱글스레드 기반의 언어(single threaded language)이면서 비동기 방식으로 동작할까? 🧐

싱글스레드

자바스크립트는 싱글스레드 기반의 언어(single threaded language)이다. 즉, 단 하나의 콜스택(call stack)과 단 하나의 메모리힙(memory heap)을 가지며, 동시에 하나의 작업만을 처리할 수 있기 때문에 코드를 순차적으로 실행하며, 하나의 실행이 끝나야 다음으로 넘어가게 된다. 선행 코드의 실행이 오래 걸리면, 다음 코드는 무한정 기다려야 한다는 것이다. 그렇다면 자바스크립트 코드를 어떻게 비동기적으로 처리할 수 있을까?

비동기 처리(asynchronous)

DOM, Ajax, setTimeout 과같은 브라우저가 제공하는 Web API는 브라우저 사이드에서 처리를 하게 된다. 콜스택은 Web API를 인식하여 브라우저 사이드로 보내주고, 콜스택의 모든 처리가 끝나면 event loop에 의해 다시 콜스택에 쌓여 처리되게 된다. 이렇게 자바스크립트는 선행 코드의 연산이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행할 수 있다.

• 자바스크립트의 event loop에 관해서는 아래의 영상이 많은 도움이 되었다.

간단한 예제를 살펴보면, 아래의 코드 실행 시 콘솔에는 ADCB 가 찍히게 될 것이다.

console.log("A");
setTimeout(function() {
  console.log("B");
}, 1000);

setTimeout(function() {
  console.log("C");
}, 500);

console.log("D");

하지만 종종 선행코드의 실행이 끝나고 실행되어야 하는 코드들이 있다. 사용자 이벤트를 처리하거나, 네트워크 응답을 처리하거나, 파일을 읽고 쓰는 등의 작업을 할 때 이러한 처리가 필요하다. 예를들어, db에서 data를 가지고 와, 가지고 온 data를 활용하여 다음 처리를 할 때는 db에서 data를 가지고 올 때까지 기다렸다가 다음 코드를 처리해야 한다. 이를 가능하게 하는 방법에 콜백함수, Promise, 그리고 asycn/await 사용이 있는데, 각각의 방법에 대해 다음 포스트에서 알아보겠다.