[JS/TIL] 자바스크립트 동작원리 (Stack, Queue, event loop)
자바스크립트가 내부적으로 어떻게 동작하는지? 자세하게 알기 위해 정리
자바스크립트 엔진의 구조
- 왼쪽에 있는 것이 자바스크립트 엔진의 구조
=> Memory Heap 과 Call Stack으로 이루어져 있다.
- Memory Heap
메모리 할당이 일어나는 곳
Heap은 구조화되지 않은 넓은 메모리 영역 -> 객체(변수, 함수 등)들이 담긴다.
- Call Stack
코드 실행에 따라서 호출 스택이 쌓이는 곳
자바스크립트는 기본적으로 작업을 싱글스레드로 처리. 즉, 단 하나의 호출 스택을 사용한다.
호출 스택에 쌓인 함수나 코드를 위에서부터 아래로 차례차례 실행한다.하나의 작업이 끝나면 pop하고 바로 아래의 함수나 코드를 실행한다. 하나의 작업이 끝날 때까지 또 다른 작업을 실행하지 않는다.
ex)
function first(){
second();
console.log("첫번째");
}
function second(){
third();
console.log("두번째");
}
function third(){
console.log("세번째");
}
first();
-
콜스택에 쌓이는 순서 - first() 호출 -> second() 호출 -> third() 호출 -> console.log("세번째")가 호출되어 콜스택에 쌓임
-
실행순서 : "세번째" -> "두번째" -> "첫번째" 순으로 콘솔이 찍힘
Web APIs
- 자바스크립트 엔진에서 정의되지 않았던 비동기 처리를 담당(DOM, Ajax, Timeout 등)
Callback Queue(Task Queue, Event Queue 등 다양한 형태)
- 자바스크립트에서 비동기로 호출되는 함수들은 호출 스택(Call Stack)에 쌓이지 않고 태스크 큐(Task Queue)로 보내진다.
Event Loop
- 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정한다.
Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당한다.
ex)
console.log("시작");
setTimeout(function(){
console.log("3초후 실행");
}, 3000);
console.log("끝");
// 시작
// 끝
// 3초후 실행
-
먼저 콜스택에 console.log("시작")이 호출되고 콘솔에 찍히고 콜스택에서 제거된다.
-
다음은 setTimeout함수가 호출되는 데, setTimeout함수는 Web API가 처리하므로 Callback함수를 전달하고, setTimeout작업을 요청한다. 그리고 콜스택에서 제거된다.
-
콜스택에 console.log("끝")이 호출되고 콘솔에 찍히고 콜스택에서 제거된다.
-
main()도 콜스택에서 제거된다.
-
Web API는 setTimeout 작업을 실행한다. 3초 후 Task Queue로 Callback 함수를 보낸다.
-
Event Loop는 Call Stack이 비어있는지 확인하고 Task Queue에서 함수를 꺼내 Call Stack에 넣고 실행한다.
그래서 자바스크립트는 동기적 vs 비동기적?
- 원래 동기적으로 처리됨
근데, 비동기적 처리도 가능. 그것이 Web API함수를 사용할 때이다.자바스크립트에서 비동기처리가 필요한 이유
- 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 할지도 모르는 상태에서 다른 코드를 실행 안하고 기다릴 수는 없기 때문
자바스크립트 동작원리
- 단일 스레드 방식으로 작동하여 콜스택에 코드나 함수가 한 줄씩 실행되지만 Web API에 있는 기능을 사용하면서 이벤트 루프를 이용해 비동기 방식으로 동시성을 지원한다
참조: https://www.youtube.com/watch?v=v67LloZ1ieI
