자바스크립트는 흔히 싱글 스레드로 동작되는 스크립트 언어라고 불리우고 있습니다.
하지만 자바스크립트 에서도 비동기 적으로 코드를 처리 할 수 있습니다.
가령 특정 시간 이후 동작 시키는 타이머나 AJAX 처리 등이 있습니다. 그런데 어떻게 싱글 스레드에서 비동기로 처리가 되는 것일까요?
자바스크립트가 어떻게 비동기로 처리 되는지에 대해 알아보겠습니다.
자바스크립트 해석 방식
자바스크립트 언어는 싱글 스레드 입니다. 이 말은 즉 스크립트를 순차적으로 하나 하나씩 해석하며 동작한다는 말과 같습니다.
그럼 어떻게 해석되는지 살펴보면 어떤 원리로 비동기 코드가 처리 되는지 알 수 있겠지요
먼저 자바스크립트는 인터프리터(Interpreter) 언어 입니다. 그렇게 때문에 자바스크립트를 해석할 수 있는 곳에서 사용할 수 있는데 이 부분을 런타임 환경이라 부릅니다.
런타임 환경은 흔히 많이 사용 되고 있는 브라우저입니다. 또는 서버 용도로 많이 사용 되는 Node.js가 될 수 있습니다.
참고로 이런 런타임 환경에서 자바스크립트를 해석하는 과정은 자바스크립트 언어를 추상 문법 트리(abstract syntax tree(AST))로 변환해서 주석 등을 제거하고 바이트코드로 변환해서
런타임 내부에 있는 자바스크립트 엔진이 수행하게 됩니다.
자바스크립트 비동기 동작
자바스크립트가 구동되는 환경은 단 하나의 스택(Stack)만 가지고 있습니다. 스택은 바이트코드를 수행하기 위해 처리 하는 공간인데 바로 이 공간이 하나 뿐 입니다.
그래서 기본적으로 자바스크립트가 싱글 스레드로 동작되는 스크립트 언어라고 불러지고 합니다.
이렇게 하나의 스택 공간에서 바이트코드를 순차적으로 수행하고 있는데 비동기 처리 코드가 있다면 해당 비동기 코드를 바로 처리 하지 않고 자바스트립트가 구동되는 환경에게 비동기 처리를 지시 합니다. 이 부분이 비동기로 수행되서 다른 작업이 수행 가능하도록 하는 것입니다.
위에서도 말했지만 여기서 자바스크립트가 구동되는 환경은 브라우저나 Node.js 환경 입니다. 그리곤 비동기 처리 수행이 모두 완료된 작업들은 별도의 큐(Queue) 공간에 밀어 넣습니다.
(큐는 자바스크립트 처리 엔진 마다 다르고 비동기 처리, 콜백 처리 등 각각 큐 공간이 여러개 있습니다.)
큐는 FIFO 특징으로 먼저 들어간 데이터가 먼저 출력되는 특징이 있습니다.
이렇게 별도의 큐에 비동기 코드 처리완료 대기가 있는 공간을 ‘Callback Queue’라고 표현 합니다.
흔히 자바스크립트에서 사용 되는 setTimeout()함수나 AJAX처리는 자바스크립트 자체에서 처리 되는 것이 아니고 모두 자바스크립트가
구동 되는 환경에서 제공 되는 API를 호출하는 것 뿐입니다.
그럼 자바스크립트가 구동되는 환경에서 비동기 처리가 끝난 이후는 어떻게 동작 하는 건지 알아보겠습니다.
비동기 처리가 끝나면 Callback Queue에 작업완료 대기로 쌓이는데 이벤트 루프(Event Loop)라는 곳에서 Callback Queue에 쌓인 데이터를 하나씩 위에서 말했던 스택(Stack) 공간에 넘겨주게 됩니다.
이때 이벤트 루프는 스택공간이 비어져 있을때만 넘겨 줍니다. 즉 동기로 수행되는 코드가 많아서 스택공간이 꽉 차 있는 경우
현재 동기적으로 먼저 처리 되고 있는 작업이 모두 끝나야 비동기 수행 콜백을 받아 볼 수 있습니다.