[Javascript] 자바스크립트 동작 원리

자바스크립트 동작 구조

먼저 JS의 전체적인 동작 구조를 살펴보자.

자바스크립트를 실행하기 위해서는 JS 엔진이 필요하며, 대표적으로는 Chrome의 V8엔진이 있다.

아래 그림은 자바스크립트를 실행할 수 있게 해 주는 V8 엔진을 간략하게 표현한 그림이다.

출처 :  https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

자바스크립트 엔진 자체는 싱글 스레드로 구성되어 있으며, Memory Heap과 Call Stack으로 구성되어 있다.

• Memory Heap : 메모리 할당이 일어나는 장소(Ex 선언한 변수, 함수 등이 담겨져 있다)
• Call Stack : 코드 실행에 따라 스택이 하나씩 쌓이는 장소

JS는 콜 스텍을 통해 명령문을 실행하는데, 하나의 스레드에서 하나의 콜 스텍으로 모든 명령을 순차적으로 실행하기 때문에 싱글 스레드 언어라고 볼 수 있다.

즉, 한 번에 하나의 테스크만 처리가 가능하다.

그런데 어떻게 병렬처리를 제공할 수 있을까?? 그것은 Javascript Runtime의 Web API, Event Loop와 Task Queue에 의해 가능하다.

우리가 Javascript로 작성한 코드를 동작 시킬 때 Javascript Runtime에 동작한다는 것을 알고 있다.

그렇다면 전체적인 Javascript Runtime 대해 알아보자.

Javascript Runtime이란??

• 프로그래밍 언어가 구동되는 환경으로, 쉽게 말해 프로그램을 뜻한다.
• 즉, 런타임이란 "어떤 프로그래밍 언어가 동작할 수 있는 프로그램"을 의미한다.
• 자바스크립트의 런타임으로는 브라우저 or Node.js가 대표적이며, 여기서는 브라우저 환경으로 설명한다.

출처 : https://coding-lks.tistory.com/174

JS Runtime의 구성 요소는 총 4가지로 되어 있으며, JS engine, Web APIs, Callback Queue, Event Loop로 구성되어 있다.

하나씩 살펴보자.

Web APIs

자바스크립트를 사용하다보면 SetTimeOut()과 같은 수많은 API를 사용하곤 한다. 이러한 API를 Web API라고 해서 웹 브라우저 혹은 node.js와 같은 런타임에서 지원해주는 API이다. 

Web APi에는 Ajax와 같은 HTTP method, Click과 같은 Dom event, 등 여러가지가 지원되며, JS 엔진 Call Stack에서 비동기 호출이 있다면 Web API로 이동되어 처리가 진행되고, Call Stack에서는 Task가 사라지게 된다.

그렇다면 Web API로 이동된 Task가 처리된다면 어디로 이동하게 되는걸까??

 

Callback Queue

Web API에서 처리가 끝난 비동기 호출은 이 Callback Queue에 쌓이게 된다.

이 공간은 콜백 함수들이 끝나서 대기를 하는 공간으로, Web API에 있는 Task가 끝나는 순서대로 FIFO 형태로 Task가 쌓이게 된다.

(Callback Queue에도 여러 개의 Queue가 있지만, 추후에 다루도록 한다)

Event Loop란??

자바스크립트 런타임(Brower, node.js)에서 가지고 있는 하나의 장치로써, Call Stack과 Callback Queue를 감시하며, Call Stack이 비어있는 경우, Callback Queue에서 가져와 Call Stack에 넣어 주는 동작을 한다.

즉, Task가 들어오길 기다렸다가 Task가 들어오면 이를 처리하고, 처리할 Task가 없는 경우에는 대기하는 형태이다.

왜 Call Stack이 비어있어야 Event Loop에서 Task를 넣어주는 것인가?

이 점은 Stack overflow에서 찾아볼 수 있다.

출처: https://stackoverflow.com/questions/52906975/call-stack-event-loop-why-waiting-for-empty-stack

결론부터 말하자면, 자바스크립트라는 언어가 동기화 문제를 안는 것을 피하고, 단일 스레드 언어라는 것을 보장하기 위함이다.

예를 들어 Call Stack에 정상적으로 처리되고 있는 함수들이 있다고 가정을 해보자.

그런데 어떤 함수를 잘 처리하고 있던 와중에 갑자기 Event Loop에서 Callback Queue의 내용을 Call Stack으로 Push 해서 처리해야 한다고 말한다. 그래서 어쩔 수 없이 잘 처리하고 있던 함수를 중단하고 Event Loop가 보낸 함수를 처리해야한다. 그런데 또 갑자기 Event Loop에서 Callback Queue의 내용을 Call Stack으로 Push 해서 처리해야 한다고 또 하네? 과연 이 경우 실행의 결괏값을 어떻게 될까요? 과연 내가 처리하려고 했던 함수는 내가 예상했던 시간에 끝나고 값을 제대로 도출할 수 있을까?

이러한 상황이 발생한다면, 멀티 쓰레드에서 발생하는 문제 상황을 그대로 단일 스레드 언어에서 안을 수 밖에 없게 된다.

JS가 Single Thread인 이유

결국, 자바스크립트의 메인 Thread인 Event loop가 싱글 스레드이기 때문에 자바스크립트를 싱글 Thread 언어라고 부른다.

하지만 JS Runtime으로 인하여 비동기 호출을 처리할 수 있으며, 동시성 문제를 해결할 수 있다!

참조

https://velog.io/@jaehyeon23/Javascript-%EC%99%80-%EC%8A%A4%EB%A0%88%EB%93%9CThread

https://tristy.tistory.com/51

https://coding-lks.tistory.com/174