[JS] 비동기 - 이벤트 루프& 콜 스택과 힙

이벤트 루프(Event Loop)와 동시성(Concurrency)

• JS가 비동기적으로 프로그래밍 되어서 어떻게 실행하는 지 설명하는 과정
• 이벤트 루프 ⇒ 자바스크립트는 브라우저에서 싱글 스레드 방식으로 동작하는데 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성을 지원하는 것이 이벤트 루프이다.
  • single-thread : 스레드가 하나뿐이라는 의미, 곧 하나의 작업(task)만을 처리할 수 있다는 것

• 자바스크립트 엔진은 크게 2개의 영역 → JS 파일을 기계어로 바꿔서 컴퓨터가 실행할 수 있게 해줌
  • Call Stack(호출 스택) → function 호출, 저장, 실행 → 어떤 함수를 실행하고 있는지 알 수 있음 → 작업이 요청되면(함수가 호출되면) 요청된 작업은 순차적으로 Call Stack에 쌓이게 되고 순차적으로 실행된다. 자바스크립트는 단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없다.
    
  • Heap → 동적으로 생성된 객체 인스턴스가 할당되는 영역
    
• Event loop ⇒ 이벤트 단위로 실행이 됨 → Call Stack 내에서 현재 실행중인 task가 있는지 그리고 Event Queue에 task가 있는지 반복하여 확인한다. 만약 Call Stack이 비어있다면 Event Queue(Callback Queue) 내의 task가 Call Stack으로 이동하고 실행된다.
  
• Event Queue(Task Queue, Callback Queue) ⇒ 인자로 전달 받은 함수 → 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수(setTimeout(), setInterval())의 콜백 함수가 보관되는 영역으로 이벤트 루프(Event Loop)에 의해 특정 시점(Call Stack이 비어졌을 때)에 순차적으로 Call Stack으로 이동되어 실행
  

console.log('hi'); //Call Stack에 쌓였다가 브라우저에 보여주는 실행을 한 후 Call Stack 에서 지워짐
setTimeout(function cb1() { //Call Stack에 쌓이고 WEB API에서 Timer가 등록이 되고, 
	console.log('cb1');
}, 5000);
console.log('bye') //Call stack

How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with...