js 동작원리 와 eventLoop

javascript를 처리하는 웹 브라우저 내부 구조부터 먼저 알아야한다.

 

이미지 출처: https://velog.io/@hjthgus777/Event-Loop

• memory heap: 메모리 할당이 일어나는 곳
• callstack: 실행될 코드가 한줄 한줄 단위로 할당되는곳
• web api: 비동기 처리를 할당한다
• callback queue: 비동기 처리가 끝난 후, 실행되어야 할 callback 함수가 차례로 할당된다
• event loop: queue에 할당된 함수를 순서에 맞춰 call stack에 할당해준다

---

동작원리를 나만의 로직으로 정리해보자면..

1. 우선 call stack은 하나이므로, 코드가 한줄 한줄 처리된다. -> 그렇기에 js는 single threaded 언어라고 한다

 

2. 그렇게 코드를 한줄 한줄 처리하는 중, 비동기 처리되는 코드를 만나게 된다면..

• 비동기 코드는 stack에서 처리하지 않고, 따로 처리하게 된다
• 비동기로 처리되는 대표적인 webAPI들이 있는데,  ajax, eventlistener, setTimeout 등이 있다

3. 따로 처리 된 비동기 코드들은 처리가 되는 순서대로, 또는 우선순위 대로 callback queue에 저장 되고

 

4. stack이 비어있을 때, queue에 있는 코드들은 stack으로 들어가 처리되게 된다!

• 이때, 비동기 동작을 끝내고 queue에 들어가있는 코드들을 하나하나 call stack에 채워주는 동작을 event loop 가 실행한다

---

추가적으로...

 

callback queue에 있는 코드들을 어떠한 우선순위를 가지고 call stack에 넣는지 알아보자면,

이미지 출처: https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue

 

우리가 아는 callback queue의 내부는 3개의 queue로 나뉜다.

- task queue

- microtask queue

- animation frames

 

여기서 우선순위는

microtask queue > animation frames > task queue

이고, 대표적으로 microtask는 promise, task는 setTimeout 등이 있다.

 

또, 짤막하게 promise를 정리하자면

 

- promise는 동기동작 하지만, 함수 내부에 .then 이 존재한다면 비동기로 동작한다.