자바스크립트에서 어떻게 비동기적인 실행이 가능한걸까?

브라우저에게 맡긴다.

The Javascript Runtime EnvironmentMedium

자바스크립트는 싱글스레드 기반의 언어

하나의 프로세스는 아래 4가지로 이루어진다.

1. code

2. stack

3. heap

4. data

프로세스안에는 쓰레드가 여러개가 존재할 수 있다. 만약 멀티쓰레딩의 프로그램이 있다면 각각의 쓰레드들은 code, heap, data를 공유하고 각 쓰레드 자신만의 stack을 갖는다.

이전에 학습했었던 C언어에서 쓰레드가 자원을 공유하는 특성을 이용해서 철학자문제 를 해결했던 경험이 있다.

자바스크립트는 싱글스레드 언어인데..?

그런데 자바스크립트는 싱글 스레드 언어다. 싱글 스레드라는건 함수가 호출되어서 쌓이는 스택이 하나뿐이라는 것. 이 말은 즉 한번에 하나의 일밖에는 수행하지 못한다는 것이다.

흠... 그러면 지금까지 비동기적으로 실행되는 코드들은 도대체 어떻게 수행되던걸까? 분명 setInterval, promise, setTimeoue 등 멀티쓰레딩 처럼 동작하는 것처럼 보일때가 많았는데 말이지.

비밀은 자바스크립트의 런타임 환경에 있다.

자바스크립트 런타임환경

자바스크립트 런타임 환경

위의 사진이 바로 JS의 런타임 환경이다. 구성원들이 보이는가?

1. HEAP(JS ENGINE)

   • 메모리가 할당되어 있는곳. 여기에 있는 메모리는 파편화되어 저장되어 있다.

2. CALL Stack(JS ENGINE)

   • 코드가 쌓여서 실제로 수행되는 곳

3. Web APIs

   • setTimeout 등이 call stack 에서 실행되면 스택에서 사라짐과 동시에 Web APIs 에서 동작한다. 특징은 해당 api의 실행이 끝날 때 callback 을 task queue 로 넘긴다는 것

4. CallBack queue

   • web api의 실행이 끝나고 등록되어있던 call back 이 쌓이는 곳

   • micro queue 와 task queue

5. Event Loop

   • CallBack queue 에 쌓여있는 JS의 callback 메서드들을 JS의 콜스택으로 넘겨준다.

JS가 멀티쓰레딩처럼 동작하는 이유가 여기있다. 그렇다. Web API를 호출하면 JS는 콜스택에서 실행함과 동시에 해당 일을 WEB 브라우저에게 맡긴다. 그리고 JS는 자기가 할 일을 묵묵히 수행한다.