자바스크립트를 설명할 때 가장 주요한 키워드를 두 가지 꼽아보자면.

• 싱글 스레드 언어
• 논 블로킹 언어

가 되겠습니다. 그렇다면 이 두 가지 키워드가 무엇을 말하는지 아래에 설명을 해 보도록 하겠습니다.

자바스크립트는 하나의 힙 영역과 하나의 콜 스택을 가지는 언어입니다. 이러한 특징을 '싱글 스레드' 라고 합니다.
하나의 힙 영역과 하나의 콜 스택을 가진다는 말은, 한번에 한 가지 일을 할 수 있음을 뜻합니다.

• 힙은 변수와 객체의 메모리 할당에 사용되는 비정형 메모리입니다.

싱글 스레드에서는 스택이 하나뿐이기 때문에 한 가지 일만 할 수 있습니다. 따라서 요청에 대한 응답이 오기 전까지는 다른 일을 수행할 수 없습니다.
자바스크립트에서는 이러한 문제를 해결하기 위해 비동기 적으로 작업을 수행함으로서 해당 작업이 수행되는 동안 아무것도 하지 못하는 문제를 해결했습니다.
이러한 특성을 '논 블로킹' 이라고 합니다.

위에서 자바스크립트를 싱글 스레드 언어라고 이야기했고, 그렇기에 한번에 한 가지 일만 수행할 수 있다고 했습니다.
비동기 작업을 통해서 블로킹 문제를 해결했다고 해도 어떻게 멀티스레드처럼 동작하는지 이해하긴 쉽지 않습니다. 이를 이해하기 위해선 자바스크립트 런티임 환경에 대한 이해가 필요합니다.

런타임이란 '어떤 프로그램이 실행되고 있는 동안의 동작'을 뜻한다.

• 런타임

그렇다면, 런타임 환경은 무엇을 말할까요?

런타임 환경이란 어플리케이션이 운영체에의 시스템 자원에 액세스할 수 있도록 해주는 실행 환경이라고 할 수 있습니다.
어렵지만 간단하게 말하자면 프로그래밍 언어가 구동되는 환경이라고 이해하면 되겠습니다.

그럼 한발 더 나아가서 자바스크립트 런타임 이라고 한다면, 우리가 사용하는 Chrome 브라우저나 Node.js 환경을 뜻합니다.

그림을 통해 자바스크립트 런타임이 어떻게 구성되었는지 확인할 수 있습니다. 사진을 통해 알 수 있는점을 간략하게 적어보면,

• 힙 스택과 콜 스택은 싱글 스레드이기때문에 1개씩만 존재합니다.
• Web API, Event Loop, Callback Queue가 존재한다.

위에는 이미 알고있는 사실이니 아래에 있는 항목들에 대해서 알아봅시다.

Web API는 자바스크립트가 실행되는 런타임 환경에 존재하는 별도의 API입니다. 그렇기에 자바스크립트 엔진 (대표적으로 구글 크롬의 V8)에는 Web API의 소스코드는 존재하지 않습니다.
그림에서는 간단하게 DOM, AJAX, Timeout 정도만 적혀있지만 사실 더 많이 존재합니다. 확인하고 싶으신 분들은 하단의 링크를 참조하시면 되겠습니다 :)

• Web API

Event Loop는 콜 스택과 콜백 큐를 관찰하여 콜 스택이 비어있으면 콜백 큐에 존재하는 콜백을 콜 스택에 쌓습니다.

Task Queue는 Web API의 결과를 담아두는 큐 입니다. Callback Queue라고도 합니다. Event Loop는 반드시 하나 이상의 Task Queue(Callback Queue)를 갖습니다.
Task Queue는 Task의 Set입니다. 위의 그림을 보시면 Task의 Set으로 이루어져있다는 것을 쉽게 이해할 수 있습니다!

Event Loop는 Task Queue에 있는 첫 번째 Task를 가져오는 것이 아닌, 실행 가능한 첫 번째 Task를 가져오는 것 입니다.

• [yoonhu.log] JavaScript 런타임 작동방식, 비동기와 이벤트 루프
• [Beomy] 자바스크립트 런타임
• [Kevin] 런타임과 런타임 환경
• [Hanamon] 런타임 작동 방식, 비동기와 이벤트 루프
• [Chanyeong] 자바스크립트는 왜 싱글 쓰레드일까?
• [Gyofeel] Javascript와 Nodejs, 그리고 싱글 스레드
• [oimne.log] Call Stack (Javascript)
• [Lydia Hallie] JavaScript Visualized: Event Loop
• [JSConf] Event Loop