자바스크립트의 동작 원리 - Heap, Stack, Queue

 

 

 

 

자바스크립트를 하다 보면

 

'이 언어는 뭐랄까? 다른 언어랑은 다른 뭔가가 있다'라는 생각(이 언어 개판이네)이 날 때가 있습니다.

 

예를 들어, 1초 간격을 두고 출력하고 싶을 때

 

파이썬으로는

print(1+1)
time.sleep(1) # 1초 스탑
print(2+2)

 

를 실행하면

 

출력 :
2
(1초 후)
4

 

이렇게 됩니다.

 

이걸 자바스크립트로 하려고 하면 어떻게 해야할까요?

console.log(1+1)
setTimeout(function(){}, 1000)
console.log(2+2)

 

이렇게 하면 안 됩니다.

출력 :
2
4

 

멈추지 않고 바로 나와요.

 

그러면 어떡해야하나...

console.log(1+1)
setTimeout(function(){ console.log(2+2) }, 1000)
console.log(3+3)

 

이렇게 해야

출력 :
2
6
(1초 후)
4

 

1초 후 2+2의 결과가 출력됩니다.

 

---

이렇게 되는 이유가 무엇일까요.

 

그걸 알기 위해서는 자바스크립트의 동작 원리를 알아야합니다.

 

기본 개념

• 싱글 스레드 : 자바스크립트는 하나의 호출 스택(Call Stack)에서 작업을 처리함
• 비동기 작업 : 타이머(setTimeout), 네트워크 요청(fetch), DOM 이벤트 처리 등이 발생하면 즉시 실행되니 않고 대기 후 실행됨
• 이벤트 루프 : 자바스크립트가 비동기 작업의 결과를 호출 스택으로 가져와 실행하는 과정

---

주요 구성 요소

 

1. 호출 스택 (Call Stack)

• 함수 실행 순서를 저장하는 자료 구조
• 스택 구조(LIFO)로, 가장 최근에 호출된 함수가 가장 먼저 실행

2. 힙(Heap)

• 동적으로 생성된 객체들이 저장되는 메모리 공간
• etc. 객체, 배열, 함수

3. 태스크 큐 (Task Queue or Callback Queue)

• setTimeout이나 setInterval 같은 비동기 함수의 콜백이 대기하는 큐
• 이벤트 루프는 호출 스택이 비어 있을 때 이 큐에서 콜백을 꺼내 실행

4. 마이크로태스크 큐 (Microtask Queue)

• Promise.then, MutaionObserver와 같은 작업이 대기하는 큐
• 태스크 큐보다 우선순위가 높아 먼저 실행 됨

5. 이벤트 루프 (Event Loop)

• 호출 스택이 비어 있으면 태스크 큐 또는 마이크로태스크 큐에서 대기 중인 작업을 가져와 실행

---

동작 과정

 

1. 호출 스택에 작업 추가

• 함수가 호출되면 호출 스택에 추가

 

2. 동기 작업 처리

• 호출 스택에 있는 작업은 즉시 실행 됨

 

3. 비동기 작업 등록

• 비동기 작업은 태스크 큐나 마이크로 큐에 등록

 

4. 이벤트 루프 확인

• 호출 스택이 비어 있을 때 이벤트 루프는 대기 중인 태스크를 호출 스택으로 가져옴

 

5. 마이크로태스크 우선 실행

• 마이크로태스크 큐의 작업을 우선 실행한 뒤 태스크 큐의 작업을 실행

---

예시

 

console.log("Start");

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

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

console.log("End");

 

 

출력 결과

Start
End
Promise.then
setTimeout

 

실행 순서

1. "Start" 출력 (동기 작업)
2. setTimeout의 콜백 등록 (태스크 큐로 이동)
3. Promise.then 등록 (마이크로태스크 큐로 이동)
4. "End" 출력 (동기 작업)
5. 마이크로태스크 큐 실행 → "Promise.then" 출력
6. 태스크 큐 실행 → "setTimeout" 출력

---

마이크로태스크와 태스크의 차이

• 마이크로태스크(Microtask):
  • 우선순위가 높은 작업.
  • 예: Promise.then, queueMicrotask, MutationObserver.
• 태스크(Task):
  • 마이크로태스크 다음에 실행.
  • 예: setTimeout, setInterval, I/O 작업.