js는 싱글 스레드 언어? 🧵

다른 언어와 다르게 js는 싱글 스레드 언어이다. 싱글 스레드 언어란 리터럴리하게 스레드가 한개만 있어 한 번에 하나의 작업만 수행할 수 있다. 즉, 순차적으로 one by one해야 한다는 뜻이다. 동기 방식은 직관적이다는 장점이 있지만 응답이 올 때까지 다른 작업을 처리하지 못하고 대기해야 하기 때문에 느리다고 할 수 있다. 🐢

동기에서 비동기로 🔄

앞선 이유 때문에 여러 작업을 동시에 처리하기 위해서 비동기라는 개념을 도입해 동시에 작업할 수 있다. 가장 대표적인 비동기 함수는

setTimeout()
fetch()

등을 예시로 들 수 있다.
비동기는 메인 스레드가 작업을 다른 곳으로 전달해서 처리하게 되고 그 작업이 완료되는 시점에 콜백 함수를 받아 실행하는 방식이다. 이는 백그라운드로 작업한다고 볼 수 있다.

다음 그림과 같이 특정 태스크를 기다리지 않고 동시에 처리하기 때문에 처리 시간이 줄어드는 것을 확인 할 수 있다.

비동기 처리 원리 🔧

Call Stack과 Event Loop에 대해서 먼저 알아야된다.

다음 그림을 확인하면 Callback 함수가 Event Loop에 의해서 CallBack Queue에 담기고 다시 싱글 스레드인 Call Stack에 담겨서 콜백 함수가 실행된다.

자바스크립트는 싱글 스레드 언어인데 어떻게 여러 작업들을 동시에 처리할 수 있을까? 🤔

자바스크립트의 이벤트 루프와 호출 스택에 대해 배우면서 Call Stack의 우측에 있는 Web APIs를 간과했을 가능성이 크다. 자바스크립트의 콜 스택(Call Stack)은 싱글 스레드로 작동하지만, 서버에 리소스를 요청하거나 파일 입출력, 타이머 대기 작업 등을 처리하는 Web APIs는 멀티 스레드로 작동하기 때문이다. (멀티 스레드가 생소하다면, 백그라운드에서 동시에 작업이 진행된다고 생각하면 된다)

즉, 브라우저라는 소프트웨어가 멀티 스레드 구조를 가지고 있어, 메인 자바스크립트 스레드를 차단하지 않고 다른 스레드를 사용하여 Web API의 작업을 처리하여 동시 처리가 가능하다.

예를 들어, 아래와 같이 3초를 대기하는 setTimeout 비동기 함수와 다른 작업(Task)들이 있을 때, 이 setTimeout 코드는 Web APIs 중 Timer API로 넘어가 3000ms 밀리초를 병렬로 처리하면서, 동시에 메인 콜 스택의 Task1, Task2 등을 처리할 수 있다.

결론적으로, 브라우저는 멀티스레드로 구성되어 있고 비동기 함수 덕분에 이러한 동시 작업 처리가 가능하여 성능을 향상시킬 수 있었다는 점이다.🚀