[JS 이론] 자바스크립트 내부동작 (이벤트 루프)

✏️JS의 이벤트 루프

자바스크립트의 내부동작 방식을 이해하면 함수 실행의 우선순위를 이해할 수 있게 된다.

전체적인 구조

• JS 엔진
• Web APIs
• Callback Queue
• Event Loop

Web APIs

• 노드에서는 백그라운드로 설명된다.
• 비동기 처리를 담당한다.

Callback Queue

• Task Queue, Event Queue등 다양한 형태로 설명된다.
• 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당된다.

구성

• Task Queue (Event Queue)
• Microtask Queue (Job Queue)
• Animation Frames

우선순위

Microtask Queue > Animation Frames > Task Queue

Event Loop

• Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.

JS 엔진 구조 (v8 엔진을 기준)

• Memory Heap
• Call Stack

Memory Heap

• 메모리 할당이 일어나는 곳이다.

Heap

• 구조화되지 않은 넓은 메모리 영역을 의미한다.
• 객체(변수, 함수)들이 담긴다.

Call Stack

• 호출 스택이라고도 한다.
• 실행될 코드의 한 줄 단위로 할당된다.

자주 발생하는 에러

Uncaught RangeError: Maximum call stack size exceeded

• Call stack 사이즈가 초과한 경우 발생하는 에러이다.
• 브라우저, 엔진마다 Call stack의 한계점이 다르다.
• chrome의 경우, 12만개이다.

동기적인 코드

function first(){
    second();
    console.log("1");
}
function second(){
    third();
    console.log("2");
}
function third(){
    console.log("3");
}

first();
third();

• 3,2,1,3 순으로 출력된다.

비동기적인 코드

console.log("시작");

setTimeout(function (){
    console.log("중간");
}, 3000);

console.log("끝");

• 시작, 끝, 중간 순으로 출력된다.

promise

• 동기적인 함수이다.
• .then()이 비동기로 동작하게 한다.
• Callback Queue의 뒤에 있어도 우선순위를 가지기 때문에 먼저 실행된다.

✅참고자료

이벤트 루프 | JS 내부 동작 1
이벤트 루프 | JS 내부 동작 2