자바스크립트는 동기? 비동기?

이번 포스팅은 자바스크립트의 작동원리중 하나인 동기 비동기에 관하여 작성하려합니다.

자바스크립트는 동기(Synchronous)? 비동기(Asynchronous)?

자바스크립트는 기본적으로 싱글스레드 ( Single Thread ) 언어입니다.
스레드란? 간단히 말하면 코드를 읽고 처리하는 일꾼이라고 생각하면 됩니다.

게임으로 알아보는 싱글스레드와 멀티스레드 ( feat. 스타크래프트 )
스타크래프트라는 게임에서 일꾼은 여러 개체 를 이용게 되는데, 그런 경우를 개발용어로 멀티스레드 ( Multi Thread ) 라고 합니다.
하지만 자바스크립트는 일꾼이 하나인 싱글스레드 언어인데요, 일을 처리하는 일꾼이 하나 밖에 없기때문에 근본적으로 일처리를 한번에 하나씩 밖에 처리할 수 없습니다.

자바스크립트는 동기방식의 언어입니다만, 비동기를 처리해주는 Web APIs 라는 녀석들이 존재하는데요. 아래에서 알아보겠습니다.

---

자바스크립트 실행환경 ( Run Time )

자바스크립트는 인터프리터 언어이기에 전체 코드를 분석하고 실행하는게 아닌, 한 줄 단위로 분석하고 실행합니다.

자바스크립트 런타임은 아래와 같습니다.Memory Heap : 코드 실행중 메모리 할당이 필요한 변수, 객체등을 관리하는 공간

Call Stack( 호출 스택 ) : 실행될 코드를 함수 단위로 할당하여 쌓아놓는 공간

Web Apis : 비동기 처리를 담당하는 공간

Callback Queue ( Task Queue , Event Queue 등) : 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례대로 할당되는 공간

Event Loop : Queue에 할당된 함수를 순서에 맞춰 Call Stack으로 보내주는 녀석

Call Stack ( 호출 스택 ) 이란?

자바스크립트의 Call Stack 이란, 실행해야 할 코드블럭을 순서대로( 동기방식 ) 하나씩 ( 싱글스레드 ) 쌓아두는 공간입니다.

쌓아둔 스택을 처리하는 방식은 후입선출 LIFO( Last-In-First-Out ) 방식입니다. 쉽게 설명하면 편의점 삼각김밥을 진열할 때 안쪽부터 채워나가고 손님은 바깥부터 구매하게되는 것 입니다.
코드의 흐름은 함수가 호출되어서 실행이 끝나면 호출되었던 곳으로 돌아가서 다시 읽기 시작합니다.

Web Apis 란?

Web Apis 란 자바스크립트와는 별개로 브라우저에서 제공하는 기능들을 말하며, 자바스크립트에서 비동기 처리를 하게되면 이 Web Apis 라는 녀석에게 " 이것좀 처리해서 Callback Queue 에 순서대로 올려놔줘 ~ " 라고 명령하고, Web Apis 가 코드를 처리해줍니다.

자바스크립트 자체 엔진인 V8에서 코드를 처리하지 않습니다.

Callback Queue 란?

Web Apis가 처리한 비동기 코드블럭들이 대기하는 공간이며, Task Queue (Event Queue), MicroTask Queue (Job Queue), Animation Frames 등이 존재합니다.
Web Apis가 처리한 비동기 코드에는 실행 우선순위가 존재합니다.

Event Loop 란?

Call Stack 과 Callback Queue 를 주시하고 있는 녀석이고, Call Stack 의 코드블럭이 모두 처리되면 Callback Queue 에 대기하고 있는 비동기 코드블럭들을 순서에 맞게 Call Stack 에 전달해 줍니다.

Callback Queue에 대기하고있는 코드블럭들에는 우선순위가 존재하는데, 이녀석들중 우선순위가 높은 녀석들부터 Call Stack에 보냅니다. 또한, Call Stack 에 하나의 코드블럭을 보내고 처리가 완료되어서 Call Stack 이 비어있는것을 확인하고 다음 코드블럭을 보냅니다. 한번에 다 보내는게 아닙니다.

요약 : 자바스크립트는 인터프리터 언어이며 하나의 코드블럭을 후입선출로 처리하는 동기처리 방식을 지향합니다. 비동기코드블럭은 Web Apis 가 처리하여 Callback Queue 에 대기시키며 Call Stack에 쌓여있던 동기코드가 모두 실행되어 Call Stack 이 비어있게 되면 Event Loop 가 CallBack Queue 에 있던 코드들을 우선순위에 맞게 Call Stack 으로 보내어 처리합니다.