자바스크립트는 동시에 하나의 작업만을 처리할 수 있는 싱글 스레드 언어입니다.
정확하게 말하면 자바스크립트의 메인 스레드인 이벤트 루프가 싱글 스레드이기 때문에 자바스크립트를 싱글 스레드 언어라고 부릅니다. 하지만 이벤트 루프만 독립적으로 실행되지 않고 웹 브라우저나 NodeJS같은 멀티 스레드 환경에서 실행됩니다.
즉, 자바스크립트 자체는 싱글 스레드가 맞지만 자바스크립트 런타임은 싱글 쓰레드가 아닙니다.
자바스크립트가 실행될 때는 다음과 같은 요소들이 실행을 도와줍니다.
콜스택은 함수를 호출 하기 위한 정보를 담는 구조입니다. 이때, Javascript 는 단일 호출 스택(call stack)을 가집니다.
단일 스택을 가지고 있다는 것은 한번에 하나의 task 만 처리할 수 있다는 의미입ㅣ다.
스택이라는 이름에서도 알수 있듯이 콜스택은 LIFO(Last In First Out)로 마지막에 들어온 데이터가 먼저 나갑니다.
setTimeout(() => {
console.log(1)
}, 0)
for (let i = 0; i < 1000; i += 1) {
console.log(2)
}
// (1000) 2
// 1
위의 코드가 주어졌을 때, 비동기가 처리되는 과정을 살펴봅시다.
console.log(2) 가 호출 스택에 쌓입니다.
그리고 버튼 클릭과 같은 이벤트가 발생하면 DOM 이벤트, http 요청, setTimeout 등과 같은 비동기 함수는 C++로 구현된 web API를 호출하며, web API는 콜백 함수를 이벤트 큐(콜백 큐)에 밀어 넣습니다.
즉, console.log(1)는 이벤트 큐에 들어가고 대기하다가 스택이 텅 비는 시점에 이벤트 루프를 돌리게 됩니다(스택에 넣음).
따라서 0초 뒤에 실행함에도 불구하고, console.log(2)가 먼저 호출 되고 그 후에 console.log(1)이 실행됩니다.
이벤트 루프의 기본 역할은 큐와 스택, 두 부분을 지켜보다가 스택이 비는 시점에 콜백을 실행시켜 주는 것으로 각 메시지와 콜백은 다른 메시지가 처리되기 전에 완전히 처리됩니다.