이벤트 루프 [event loop]

이 글에서는 javaScript가 어떻게 동작하는지 그리고 이벤트루프는 무엇인지 알아봅시다. 

js언어를 사용해 코딩을 하면서 주먹구구식으로 코드를 작성해서 기능이 동작하는데 초점을 맞추다 보니 사용하는 언어에 대해서 동작방식을 소홀히 여기게됬다. 그러나 조금 더 좋은 코드를 작성하고 싶어서 동작방식에 대해서 공부를 하게 되었다. 

출처는 유튜브 https://www.youtube.com/watch?v=QFHyPInNhbo&t=66s 영상을 보시면 아주 도움이 될것같습니다.

Memory Heap => 메모리 할당이 일어나는 곳

Heap => 구조화 되지 않은 넓은 메모리 영역 | 객체(변수,함수 등)들이 담긴다.

Call Stack(호출스택) => 실행될 코드의 한 줄 단위로 할당된다.
                                        자바스크립트는 인터프리터 언어로써 한 줄씩 실행된다.

Web APIs (node에서는 백그라운드로 설명된다.) => 비동기처리를 담당한다. 

Callback Queue (Task Queue, Event Queue 등 다양한 형태로 설명된다.) 
=> 비동기 처리가 끝난 후 실행되어야할 콜백 함수가 차례로 할당된다. 

Event Loop => Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해 준다. 

먼저 위와같은 사진에서 함수를 실행하게되면 Call Stack에 어떻게 쌓이는지 확인할 수 있는 대목이다. 

Call Stack사이즈(한계점)를 넘어가면 발생하는 오류이다. 
브라우저, 엔진마다 한계점이 다르고 일반적으로 1만개, 크롬은 12만개라고 알고 있으면 된다.

정말 중요한 부분은 이부분이다. 비동기함수를 사용할 때 어떻게 동작하는지 확인해야합니다.

위에 사진을 토대로 순서대로 설명을 해보겠습니다.
1. 콜스택에 anonymous(모든 코드를 가지고 있는 존재)가 먼저 올라가고 다음  console.log('시작')이 올라갑니다.
2. 그러면 시작이 출력되고 비동기 함수가 Call Stack에 올라갑니다. 
3. 비동기함 수를 처리해주는 Web APIs로 넘어가게 됩니다.
4. 다음 밑에있는 console.log('끝')이 출력되게 됩니다.
5. Web APIs에서 3초가 지나면 Callback Queue로 넘어가게됩니다.
6. 이 부분이 중요합니다. Event Loop가 Call Stack이 비어있다면 Callback Queue값을 넘겨 줍니다. 
7. 비동기함수에 있떤 콜백함수가 사용되게됩니다. 그럼으로써 console.log("중간")이 출력됩니다.

 

이벤트루프가 콜스택을 검사해서 비어있으면 콜백큐에 있는 함수를 콜스택에 보내줘서 콜백함수에 있는 실행되어야하는 부분을 콜스택에 쌓아서 실행을 하게 됩니다.

이제 위와 같은 사진을 보면 동작방식을 이해할 수 있을 거라고 생각합니다.
여기서 고민해 봐야하는 점은 Promise자체는 동기입니다. 그러나 then을 만나는 순간 비동기로 동작하게 됩니다.  
이제 기본적으로 Call Stack에서 처리를 다하고 Callback Queue만 남겨놓았는데요 

Queue자료구조이기 때문에 선입선출구조로써 익명-timeout이 먼저 실행될 것이라고 생각하는데요 then을 먼저 사용하게됩니다.
여기서 우선순위가 작용하기 때문입니다.
정상적으로 함수가 작동하면 아래와같이 출력 됩니다.   

우선순위에 대한 자료는 아래와 같습니다.

오늘은 자바스크립트가 어떻게 작동하는지 공부를 해보았습니다.
저와같이 무작정 코드를 작성하시다가 동작원리를 이해해서 조금 더 좋은 코드를 작성하고 싶은 분들을 위해서 블로그를 남깁니다.
아래 퀴즈를 납깁니다. 블로그를 읽고 이해가 충분히 되신분들이라면 아래 접은글을 통해서 퀴즈를 맞춰보면 다시한번 이해하는데 도움이 될거라고 생각됩니다.