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

자바스크립트를 잘 쓰기 위해서는 동작 원리를 이해해야 한다고 생각합니다. 이번 기회에 자바스크립트의 동작 원리를 정확히 이해하기 위해 글로 정리해보겠습니다.

자바스크립트 엔진이란 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터입니다. 주로 웹 브라우저에서 사용됩니다.

대표적인 자바스크립트 엔진으로는 구글 Chrome과 NodeJS에서 사용하는 V8 엔진이 있습니다.

여기서 Chrome과 NodeJS는 무엇일까요?

프로세스나 프로그램을 위한 소프트웨어 서비스를 제공하는 가상머신의 상태를 런타임이라고 합니다.

쉽게 생각하면 자바스크립트를 구동하는 가상머신을 런타임이라고 생각하면 될것 같습니다.

많은 분들이 NodeJS를 프레임워크라고 생각하고 부릅니다.. 하지만 NodeJS 공식 홈페이지에 표시된 것과 같이 NodeJS는 자바스크립트 런타임이며 프레임워크가 아닙니다.

NodeJS는 V8엔진이 사용되었습니다. Chrome, NodeJS은 V8엔진을 사용했습니다. 하지만 이들 뿐 아니라 다른 브라우저들도 자바스크립트 런타임입니다.

자바스크립트의 동작 원리를 설명하기 앞서 간단하게 헷갈리거나 애매하게 이해한 표현들을 정리했습니다.

그렇다면 이제 본격적으로 자바스크립트의 동작 원리를 알아보도록 하겠습니다.

자바스크립트의 엔진은 위와 같이 메모리 힙(Memory Heap) 과 콜스택(Call Stack)으로 이루어져 있습니다.

메모리 힙은 메모리 할당을 담당하며 콜스택은 코드 실행이 스택으로 쌓이는 곳입니다.

콜스택을 통해 자바스크립가 싱글쓰레드임을 알 수 있습니다. 하나의 콜스택이기에 동시에 여러 코드 실행을 할 수 없습니다.

콜스택은 기본적으로 스택 자료구조입니다. 스택에 대한 기본적인 이해는 아래 글을 참고하면 좋을것 같습니다.

[자료구조] 스택과 큐 (Stack & Queue)

스택(Stack) 스택은 후입선출(LIFO, Last In First Out) 방식으로 새로 들어오는 데이터는 저장소의 끝 부분이고, 내보내는 데이터도 끝 부분입니다. Push (삽입) 새로운 데이터를 가장 끝에 삽입합니다 Pop

wlswoo.tistory.com

위 그림은 자바스크립트의 비동기 처리를 설명한 그림입니다.

자바스크립트의 비동기 처리는 엔진이 아닌 런타임에서 지원하는 방식입니다.

위 그림에는 자바스크립트 엔진과 Web APIs, Callback Queue(Task Queue), Event Loop가 있습니다.

이벤트 루프: 콜백 큐(태스크 큐)에 담겨있는 콜백함수들을 콜스택에 넘겨줍니다.

콜백 큐(태스트 큐): Web API에서 비동기 작업의 수행 후 호출될 콜백함수들이 대기하는 큐 입니다.

Web API: 브라우저에서 지원하는 API입니다. Dom이벤트, setTimeout과 같은 비동기 작업들을 수행할 수 있는 API를 지원합니다. (NodeJS의 경우 다른 방식 사용)

그렇다면 어떻게 동작할까요?

자바스크립트는 시간이 오래 걸리는 작업을 Web APi에서 처리합니다. 이와 같은 비동기 방식으로 자바스립트는 논블록킹을 지원합니다.

꼬꼬마 블로그