Javascript 동작 원리

안녕하세요. 이번엔 Javascript 의 동작 원리에 대해 알아보려고 합니다.

 

Javascript 코드를 해석하고 구동시키기 위해서는 엔진이 필요하고, 이러한 Javascript 의 엔진은 다양한 종류가 있습니다. 그 중에 가장 유명하고 많이 쓰이는 엔진은 바로 오픈소스로 개발 된 Google의 V8 엔진 입니다. Node.js 도 V8 엔진을 사용하여 Javascript 런타임 환경을 구현합니다. 

 

Javascript 엔진은 크게 2가지 구성요소로 구성되어 있습니다.

 

1. Memory Heap (메모리 힙)

- 메모리 할당이 일어나는 곳

- 정보(데이터)를 저장하는 공간

- 변수, 함수 저장, 호출 등의 작업이 발생하는 공간

 

즉, Memory Heap 은 데이터를 저장하는 창고라고 생각하면 됩니다.

 

2. Call Stack (콜 스택)

- 호출 스택이 쌓이는 곳

- 실행중인 코드를 트래킹(추척,감시,관찰)하는 공간

- 메모리에 존재하는 공간 중의 하나

- 코드를 읽어내려가면서 수행할 작업들을 밑에서부터 하나씩 쌓고, 메모리 힙에서 작업 수행에 필요한 것들을 찾아서 작업을 수행하는 공간

 

즉, Call Stack 은 수행할 작업들을 트래킹하는 공간이라고 생각하면 됩니다.

 

javascript 엔진을 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다.

 

Javascript 를 브라우저에서 사용할 때 저희는 돔에 접근하기 위해 document 객체 또는 setTimeout 등의 함수를 바로 사용하곤 합니다. 하지만 이러한 객체 및 함수들은 Javascript 엔진에서 제공하고 있지 않습니다. 그렇다면 저희는 어떻게 document 나 setTimeout 등을 사용할 수 있었던 걸까요? 그 이유는 바로 브라우저에서 document 나 setTimeout 등과 같은 Web API 기능을 제공하고 있기 때문입니다. 브라우저에서 제공하는 기능들을 javascript 코드로 사용할 수 있도록 브라우저라는 javascript 런타임이 환경을 만들어 준 것입니다. 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다.

 

하지만 여기서 또 의문이 들 수 있습니다. Javascript 엔진은 싱글스레드 기반입니다. 하지만 브라우저에서 Javascript 동작하는 것을 보면 setTimeout 을 걸어 놓고 다른 javascript 코드를 실행 할 수도 있고 그 밖에 여러 작업들을 동시에 진행 하기도 합니다. 싱글스레드 인데 이렇게 비동기처럼 작동할 수 있는 이유가 무엇일까요? 그것은 바로 런타임에서 제공하는 Event Loop 와 Task Queue 의 영향 때문입니다.

 

1. Task Queue

- Javascript 의 콜백 함수가 쌓이는 공간

 

2. Event Loop

- Javascript 엔진에서 Call Stack 이 비어 있는지 계속 확인

- Call Stack 이 비어있다면 Task Queue 에 있는 콜백 함수를 Call Stack 으로 밀어넣음

 

Javascript 에서 DOM 이벤트 설정이나 Http 요청, setTimeout 등과 같은 비동기 함수들이 호출되면 해당 비동기 함수들에 설정된 콜백 함수는 Task Queue 으로 이동됩니다. 이 때 Event Loop 는 Javascript 엔진의 Call Stack 이 비어있는지 계속 확인 하며, 비어있다면 Task Queue 에 있는 콜백 함수들을 하나씩 꺼내어 Call Stack 에 밀어 넣습니다. 그림으로 표현하면 다음과 같이 표현 할 수 있을 것 같습니다.

 

 

즉, Javascript 가 싱글스레드라는 말은 Javascript 엔진 자체만 놓고 봤을 때 해당되는 말이며 실제로는 엔진 바깥에 있는 Task Queue 나 Event Loop 의 도움을 받아 비동기 및 멀티스레드 처럼 동작할 수 있게 됩니다.

 

잘못된 부분이 있다면 댓글로 남겨주세요.

 

감사합니다.

 

 

출처

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174354/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84%EC%9D%B4%EB%9E%80

https://velog.io/@namezin/javascript-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

https://soldonii.tistory.com/53

https://curryyou.tistory.com/200