자바스크립트 코드를 해석하고 실행하는 인터프리터
⚙ Webkit, V8....
자바스크립트 엔진은 크게 힙 + 호출스택 (Call Stack)
으로 구분된다
힙 Heap
은 메모리 할당이 일어나는 부분
(변수, 객체 등이 저장되는 일종의 창고)
호출 스택 Call Stack
은 함수가 호출되는 순서대로 쌓이는 스택
- 함수 실행 시 호출 스택에 해당 함수를 집어 넣음
- 함수 return 시(함수의 실행이 끝나면) 호출 스택의 맨 위에 있는 해당 함수를 끄집어냄
- 호출 스택이 빈다 = 실행할 함수가 남아있지 않다
- ⚠ 사실 정확히 말하면 호출 스택에 쌓이는 건 함수가 아니라 함수의 실행 컨텍스트가 쌓이는 것!
함수의 실행 컨텍스트(Execution Context)
자바스크립트 엔진이 함수를 실행시키기 위해 가지고 있어야하는 여러가지 정보들
(변수나 함수의 선언, 스코프, this ... 같은 정보들을 물리적인 객체 형태로 보관하고 있다)
스크립트가 시작하면 전역 문맥(Global Context)이 호출스택에 추가된다
스크립트가 끝날 때 전역 문맥이 호출스택에서 사라지면서 끝!
그래서 자바스크립트 엔진은...
= 동시에 하나의 일만 처리할 수 있다
= 호출 스택을 하나만 사용한다
👀 그럼 비동기 처리나 동시성에 대한 처리는 어디서 어떻게 하는 걸까?
브라우저는 자바스크립트 엔진 말고도
Web API, 이벤트루프, 콜백, 큐 ...
같은 것들을 가지고 있다
💡동시성을 지원하기 위해 자바스크립트 엔진을 구동하는 환경인 브라우저가 비동기 처리를 담당한다
setTimeout, DOM 매서드, HTTP 요청
같은 것들은 모두 자바스크립트 엔진 밖에 있는 Web API
에서 제공하는 메서드
Web API
매서드들은 모두 비동기 메서드들이기 때문에
작동을 마치고 콜백함수
를 콜백 큐
에 집어 넣음
콜백 큐 Callback Queue
에 비동기 처리가 끝난 후 실행 되어야 할 콜백함수
들이 차례로 할당되고, 실행을 대기하게 됨
호출 스택 Call Stack
과 콜백 큐 Callback Queue
를 계속 주시하고 있다가
호출 스택
이 비어있으면, 콜백 큐
에 먼저 들어온 순서대로 콜백 큐
에 있는 콜백 함수
들을 호출 스택
으로 집어 넣는다.
호출 스택
에서 콜백 함수
가 실행되고 사라진다.
✨자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프라고 할 수 있다!