[TIL] 210716 오늘 공부는 이벤트 루프. 자바스크립트 동작 원리

자바스크립트의 메모리 힙이나 콜스택 등의 용어와 작동원리를 공부해봐야지 하다가 날 잡고 한번 유튜브 보고 공부해야겠다 생각이 들어서,

유튜브 보면서 그림으로 이해하니 좀 잘 되었다. 우리밋 님의 유튜브를 보면서 공부했다.

간단한 예제를 보면서 보니까 이해가 좀 쉽긴한데, 태스큐외에도 마이크로태스크 큐, 잡 큐 등이 더 있다고 한다. 더 딥하게 공부해봐야 할 것 같다. 

 

자바스크립트 엔진 구조

출처: https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

 

자바스크립트의 엔진은 Memory Heap과 Call Stack으로 구성되어 있다. 가장 유명한 것은 구글의 V8 엔진 
  자바스크립트는 단일 스레드 프로그래밍 언어 , 즉 Call Stack이 하나라는 뜻,
  따라서 여러 작업을 여러개로 분산하지 않고 하나씩 하나씩 처리한다.

 - 메모리힙: 메모리 할당이 일어나는 곳 ( 선언한 변수나 함수가 담겨있다) 
     * 힙? 구조화 되지 않은 넓은 메모리 영역으로, 객체들이 할당된다. 

 

 - Call Stack(호출 스택) : 실행될 코드의 한 줄 단위로 할당된다. 코드가 쌓이는 곳이고 stack 형태로 쌓인다. (Last In First Out) 구조로, 바구니라고 생각하면 된다. 바구니에 제일 먼저 넣은 것이 맨 마지막에 깔리니, 마지막에 나오게 된다. 

---

 

브라우저의 구성

 

- Web APIs: 비동기 처리를 담당한다. (DOM, AJAX, Timeout 등) JS 엔진 밖에 있는 것, 즉 자바스크립트 엔진이 아님
   브라우저에서 제공하는 API로 Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue에 넣는다. 

 

- Callback Queue: 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당된다. 즉 비동기적으로 실행 된 콜백 함수가 보관되는 영역이다. 자료구조 중 하나인 큐는 스택과 반대로 First In First Out 의 룰을 따른다. 먼저 들어오면 먼저 나간다. 콜백 큐에는 setTimeout에서 타이머가 끝나면 실행되는 함수 등이 대기하게 된다. 

 

 - Event loop: Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다. CallStack이 비어있는지 확인하고, 비었다면 Callback Queue에 대기하는 첫번째 콜백을 콜스택에 밀어넣는다. 이러한 반복적인 행동을 틱(tick) 이라고 한다. 

 

---

제로초님의 블로그를 참조했습니다😊

function run() {
  console.log('동작');
}
console.log('시작');
setTimeout(run, 3000);
console.log('끝');

이 코드를 실행하면 console에 "시작" 이 찍히고, "끝"이 찍히고 3초 후 "동작" 이 찍힌다.

function run() {
  console.log('동작');
}
console.log('시작');
setTimeout(run, 0);
console.log('끝');

이 코드를 실행하면 console에 "시작" 이 찍히고, "끝"이 찍히고 곧바로  "동작" 이 찍힌다.

 

어떻게?

 

setTimeout은 비동기 함수기 때문에 콜 스택에 들어갔다가 Web API로 넘어간다.  코드 순서로 다음인 "끝"이 콜 스택에 쌓이게 되고, "끝"이 실행이 되면 콜 스택에서 모두 사라진다(anonymous 는 설명에서 생략)
 그 동안 WebAPI에 있는 setTimeout의 콜백함수인 run() 함수를  callback Queue에 보낸다. 이벤트 루프가 콜 스택에서 "끝"이 사라졌는지 확인하고, 비어있다면 콜 스택에 run()을 넣어준다. run() 함수의 콘솔인 "동작"이 마지막에 찍히게 되는 원리이다.  

 

---

이처럼 자바스크립트는 싱글 스레드 프로그래밍 언어라 한번에 하나씩만 실행되지만, Web API, Callback Queue, Event loop 등 브라우저가 가지고 있는 것 덕분에 멀티 스레드처럼 작동할 수 있는 것이다.