JavaScript 이벤트 루프 및 호출 스택 설명

JavaScript Event Loop And Call Stack Explained

JavaScript Event Loop And Call Stack Explained

위의 글을 읽고 요약정리 합니다.

 

 

브라우저에서 JavaScript가 작동하는 방식

NodeJS 보단 브라우저 JavaScript 동작에 초점

Call Stack

• JavaScript는 단일 스레드
  • 다시말해, JavaScript는 Call Stack이 하나만 있기 때문에 한 번에 하나의 작업만을 수행

 

 

Heap

• 오브젝트가 저장되는 공간 (function, variable)
• call stack, event loop 와 독립적으로 구성되어 패쓰

 

 

Web APIs

• JavaScript는 단일 스레드지만, 브라우저에서 동시적으로 실행하는 것들이 있음
• 웹브라우저에서 JavaScript로 일부 API를 제공해주고 이를 통해 브라우저는 동시적으로 실행함
• 그래서 js callstack에 영향을 주지 않음
• 예를 들어, AJAX 리퀘스트, DOM 조작 등이 있음

 

 

Callback Queue

• 웹 API의 동작이 완료되면 콜백 큐로 웹 API에 걸어 두었던 콜백 함수가 감
• Call Stack이 비어지면 이벤트루프가 발생되어 Callback Queue에 있는 콜백 함수를 끄집어내 콜스택으로 올림
• 동작 영상 샘플은 본문 참고

Event Loop

• 콜스택이 비어지는지 감시하다가, 비어지면 콜백 큐에서 콜백 함수를 콜스택으로 올림
• 계산이 많이 필요한 작업을 콜스택에 실행되어, 콜 스택이 차단되지 않아야함
• setTimeout(fn, 0) 을 사용하여 fn을 콜백큐로 넘기는 트릭 사용가능

 

 

Job Queue and Asynchronous Code

• 콜백 큐 말고 다른 큐도 있는데, Job Queue는 Promise를 허용함
• Promise 는 여기 참고..: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• Promise는 자기만의 큐를 가짐 (Job Queue). Callback Queue와 독자적
• Job Queue Priority > Callback Queue Priority

console.log('a'); // 1
setTimeout(() => console.log('b'), 0); // 4 (Callback Queue라 더느리게 나옴)
new Promise((resolve, reject) => {
  resolve();
})
.then(() => {
  console.log('c'); // 3 (Job Queue 라 더 빠르게 나옴)
});
console.log('d'); // 2

 

 

 

결론

• 해당 글로 자바스크립트가 동작 방식에 대해 잘 이해 되기를 빕니다.
• 원문에서 좋은 참고자료도 많이 소개하고 있으니 참고바랍니다.