[JavaScript] JS가 크롬 브라우저에서 어떻게 동작할까?

자바스크립트는 싱글 스레드(Single Thread) 언어로, 한 번에 하나의 작업만 수행할 수 있습니다. 하지만 크롬에서 제공하는 웹 API(Web API) 와 비동기 처리 메커니즘을 통해 효율적으로 여러 작업을 동시에 처리할 수 있습니다.

 

크롬 브라우저의 자바스크립트 실행 환경은 크게 다음과 같은 요소로 구성됩니다

1️⃣ 콜 스택(Call Stack)
2️⃣ 웹 API(Web API)
3️⃣ 태스크 큐(Task Queue / Callback Queue)
4️⃣ 마이크로태스크 큐(Microtask Queue)
5️⃣ 이벤트 루프(Event Loop)

 

---

콜 스택(Call Stack)

자바스크립트는 콜 스택(Call Stack)을 사용하여 함수를 실행합니다.

콜 스택은 LIFO(Last In, First Out) 즉 후입선출 구조로, 마지막에 호출된 함수가 가장 먼저 실행됩니다.

 

예제

function first() {
    console.log("첫 번째 함수 실행");
    second();
}

function second() {
    console.log("두 번째 함수 실행");
    third();
}

function third() {
    console.log("세 번째 함수 실행");
}

first();

 

실행 과정

1️⃣ first() 함수가 콜 스택에 들어감
2️⃣ console.log("첫 번째 함수 실행") 실행
3️⃣ second() 호출 → second()가 콜 스택에 추가됨
4️⃣ console.log("두 번째 함수 실행") 실행
5️⃣ third() 호출 → third()가 콜 스택에 추가됨
6️⃣ console.log("세 번째 함수 실행") 실행 후 third() 제거
7️⃣ second() 제거
8️⃣ first() 제거

 

결과

첫 번째 함수 실행
두 번째 함수 실행
세 번째 함수 실행

 

 

---

 

이벤트 루프(Event Loop) & 비동기 처리

자바스크립트는 기본적으로 동기적(Synchronous) 으로 실행되지만, 비동기(Asynchronous) 코드도 실행할 수 있습니다.
이를 가능하게 해주는 것이 바로 이벤트 루프(Event Loop) 입니다.

 

예제

console.log("시작");

setTimeout(() => {
    console.log("3초 후 실행");
}, 3000);

console.log("끝");

 

실행 과정

1️⃣ console.log("시작") 실행 (콜 스택)
2️⃣ setTimeout() 호출 (웹 API에 등록)
3️⃣ console.log("끝") 실행 (콜 스택)
4️⃣ 3초 후, 콜백 함수가 태스크 큐에 추가됨
5️⃣ 이벤트 루프가 콜 스택이 비었는지 확인 후 태스크 큐에서 콜백 함수 실행

 

결과

시작
끝
3초 후 실행

 

 

"3초 후 실행"이 마지막에 나오는 이유?
setTimeout()은 비동기 함수이기 때문에 즉시 실행되지 않고, 3초 후에 태스크 큐(Task Queue)에 추가되었다가 이벤트 루프가 실행

 

---

 

마이크로태스크 큐(Microtask Queue) - 프로미스(Promise) 처리

자바스크립트에서는 마이크로태스크(Microtask) 가 태스크(Task)보다 우선 실행됩니다.
대표적인 마이크로태스크는 Promise 입니다.

 

예제

console.log("시작");

setTimeout(() => {
    console.log("setTimeout 실행");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise 실행");
});

console.log("끝");

 

실행 과정

1️⃣ console.log("시작") 실행
2️⃣ setTimeout() 실행 (웹 API로 이동)
3️⃣ Promise.then() 실행 (마이크로태스크 큐에 추가)
4️⃣ console.log("끝") 실행
5️⃣ 이벤트 루프가 마이크로태스크(Promise) 먼저 실행
6️⃣ setTimeout 콜백 실행

 

결과

시작
끝
Promise 실행
setTimeout 실행

 

왜 Promise가 먼저 실행될까?
마이크로태스크(Promise)는 태스크 큐(setTimeout 등)보다 우선 실행되기 때문입니다.

 

---

 

정리

1️⃣ 콜 스택(Call Stack): 함수 실행을 담당 (동기 코드 실행)
2️⃣ 웹 API(Web API): 비동기 함수(setTimeout, fetch 등)를 처리
3️⃣ 태스크 큐(Task Queue): 웹 API에서 실행된 콜백 함수가 대기
4️⃣ 마이크로태스크 큐(Microtask Queue): Promise.then(), MutationObserver 등이 대기
5️⃣ 이벤트 루프(Event Loop): 콜 스택이 비면 마이크로태스크 → 태스크 순서로 실행

 

비동기 코드 실행 순서

1️⃣ 콜 스택 실행
2️⃣ 마이크로태스크(Promise) 
3️⃣ 태스크(setTimeout 등) 실행