JavaScript 동작원리를 간단히 정리한 글입니다.
JavaScript 엔진
JavaScript 코드를 실행시키는 엔진. 대대표적으로 google의 V8이 있다.
엔진의 구조도
- Memory Heap은 메모리 할당이 발생.
- Call Stack은 코드 실행에 따라 호출 스택이 쌓인다.
JavaScript는 하나의 Call Stack과 하나의 Memory Heap으로 이루어진 싱글 스레드 언어이다.
한번에 하나의 명령어만 실행하는 동기식 언어이다.
그러면 JavaScript는 어떻게 비동기 동작을 수행할까?
JavaScript의 비동기 작업
JavaScript는 동기식 언어이기 때문에 한 코드가 시간이 오래 걸리게 되면
다음 코드 실행이 오래걸리게 된다. (Block 상태)
때문에 효과적인 event 관리를 위해서 Callback Queue, Event Loop가 필요하다.
Callback Queue, Event Loop
웹 브라우저나 런타임에서는 Callback Queue, Event Loop를 지원한다.(Web API 포함)
자바스크립트가 비동기 함수를 만났을 경우에는 어떻게 동작할까?
JavaScript는 비동기 함수를 처리할때, 바로 실행하지 않고 Web API로 보내고
다음 작업을 실행한다.Web API에 있는 비동기 함수는 비동기 작업이 끝난후 Callback Queue로 보내진다.
Event Loop는 Callback Queue에 있는 함수를 Call Stack에서 처리하기 위해
Call Stack이 비어있는지 확인한다. (Call Stack이 비어있다면 Call Stack으로 보낸다.)Call Stack에 있는 함수를 실행한다.
1
2
3
4
Call Stack이 비어있어야 하는 이유?
JavaScript라는 언어가 동기화 문제를 가지는 것을 피하고
싱글 스레드 언어라는 것을 보장해주기 위해서
요약
JavaScript는 Call Stack과 Memory Heap이 하나씩 있는 싱글 스레드 언어지만
Callback Queue, Event Loop, Web API를 이용해 비동기 함수를 제어할 수 있다.
참고자료 (reference)
[JavaScript] JavaScript 파헤치기 - 동작 원리
진짜 ! 쉽게 알아보는 자바스크립트 동작 원리
자바스크립트의 동작원리: 엔진, 런타임, 호출 스택
틀린점, 오타에 대한 것은 언제든지 알려주세요!