[ 개발 ] 자바스크립트 동작 원리
이전 한 개발자분에게 질문을 받았습니다. 자바스크립트는 어떻게 동작 하는가?에 대하여 완벽하게 대답 못한 부분이 있어 복습겸 다시 공부 할 예정입니다.
1. 기본적으로 자바스크립트는 Memory Heap과 Call Stack로 구성되어 있습니다.
Memory Heap
변수, 함수, 객체 모든 메모리 할당을 담당하는 곳입니다.
Call Stack
함수의 호출을 스택 형식으로 저장합니다. 호출 스택은 함수가 동작하고 있는지, 다음 호출되어야 하는 함수는 어떤것인지 등을 제어합니다.
자바스크립트가 싱글 스레드 기반 언어라고 불리는 이유는 위의 Call Stack이 하나이기 때문입니다. 따라서 가장 먼저 호출된 작업부터 한 작업씩만 처리 할 수 있습니다.
하지만, 자바스크립트는 비동기적으로 시간이 걸리는 작업은 따로 처리가 됩니다. 이건 어떻게 동작하는것일까요?
Web API
비동기 함수들은 Web API으로 보내집니다.
Web API는 비동기 작업을 실행하고, Callback Queue로 보내게 됩니다.
이후 Event Loop는 Call Stack에 비어있을 때, Callback Queue에 대기하던 Callback 함수를 Call Stack으로 보냅니다.
Event Loop
이벤트 루프는 어떻게 감시하는가? 라는 질문에 명확한 답변을 내지 못하여 찾아보는 결과 이벤트 루프라고 불리는 이유는 다음과 같이 만들어져 있다는것을 알았습니다.
while (queue.waitForMessage()) {
queue.processNextMessage();
}이러한 방식으로 메세지에따라 작업을 처리한다는것을 이해하였지만, 싱글 스레드인데 어떻게 동시에 처리를 하지? 라는 의문이 들었고 잘못된 생각을 하고있다는것을 알았습니다.
위의 그림을 보면 이해가 됩니다 우리가 이야기하는 자바스크립트의 싱글스레드란 Js engine이 싱글 스레드이며 실제 런타임 환경을 보면 멀티스레드처럼 동작하도록 이루어져있다는 것을 알았습니다.
위의 결과가 잘 정리 되어있는 글을 발견해 남겨둡니다
결론
자바스크립트는 싱글 스레드 방식으로 동작한다. 하지만 싱글 스레드 방식으로 동작하는 것ㅇ느 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진일 뿐이고, 만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면 자바스크립느느 비동기로 동작할 수 없으며 프로그램의 처리 속도와 무게가 효율적으로 진행되지 않을 것이다. 즉 자바스크립트 엔진은 싱글스레드로 동작하지만 브라우저는 멀티 스레드로 동작하며, 이는 Web API, Callback Queue, Event Loop에 의해 가능하다
참고 사이트
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop