자바스크립트의 동작 원리

자바스크립트는 싱글스레드 언어지만 동시성을 가진 언어 이기도 하다.

싱글스레드 언어면 한번에 하나씩만 처리할 수 있는 언어인데 어떻게 한번 Non-blocking 처리가 가능한 걸까?

자바스크립트가 싱글스레드라 불리는 이유는 모든 변수나 함수의 실행구문은 하나의 콜스택에 차례대로 들어가서 순차적으로 하나씩 처리되기 때문입니다.
하지만 브라우저나 Node.js와 같은 자바스크립트 런타임에는 자바스크립트의 엔진 안의 콜스택 뿐만 아니라 Web API, 콜백큐, 그리고 Event Loop라는 장치가 있어 하나씩 처리하더라도 시간이 걸리는 이벤트함수들은 이벤트 조건을 만족시키는 동안 다른 함수들을 먼저 실행시켜 Blocking 현상을 없앨 수 있습니다. 이로써 하나의 콜스택으로 처리하더라도 처리속도가 빨라 마치 동시에 처리되는 것처럼 느껴지는 동시성을 만족시키게 됩니다.

왜 일반적인 함수는 스택으로 가고, 비동기함수는 큐로 가게 되는 걸까?

기본적으로 자바스크립트에서 모든 함수들은 결국엔 콜스택에 들어가서 순서대로 처리됩니다.
다만 앞서 설명드린 대로 setTimeout과 같이 즉시 실행이 불가능한 이벤트함수를 만났을 때 Web API에서 setTimeout을 처리 후 그 안에 들어있던 함수를 콜백큐에 넘기게 됩니다. 큐라는 것은 선입선출을 위한 자료구조입니다. 즉 Web API에서 이벤트 조건을 먼저 만족시킨 순서대로 실행시켜야만 Non-blocking이 실현되기 때문에 이벤트함수는 큐라는 자료구조를 이용합니다. 일반 함수가 콜스택을 이용하는 이유는 함수 안에 다른 함수를 실행시키는 구문이 있을 경우, 함수 내부에 있는 함수부터 실행시켜야 하는데, 그러려면 후입선출이란 특징을 가진 스택을 사용해야만 합니다.