Event Loop (얘 땜에 싱글 스레드이지만 비동기 가능) :이벤트 루프는 Call Stack에 현재 실행중인 실행 컨텍스트가 있는지, Task Queue에 대기중인 함수가 있는지 반복적으로 확인 콜스택이 비어있다? => 큐에 대기중인 함수가 있는지 확인 후 여러개라면 순차적으로 콜스택에 push
- 코드가 순서대로 실행되지 않으며, 실행중인 코드가 완료되지 않았음에도, 다음코드가 실행된다.
console.log("1);
setTimeout(() => {
console.log("2");
}, 0);
console.log("3");
// 이 아래로 수백줄의 코드가 있다해도 setTimeout이 가장 나중에 실행
이번에도 출력이 1, 2, 3 순서로 나올거라고 예상하셨겠지만, 1, 3, 2가 출력
왜? setTimeout이 비동기 함수(API)이기 때문
동작원리 setTimeout()호출 시 Call stack으로 들어갔다가 지정한 초가 지나고 나면 Task Queue로 들어가서 나머지 동기적 코드가 전부 실행되기를 기다린다. => Call stack이 비어야 Event Loop가 Task Queue에 있던 콜백함수를 콜스택에 push
요약
동기: 코드가 간단하여 직관적일 수 있음 but, 결과를 반환할때 까지는 아무것도 못하고 대기해야함.
비동기: 코드가 직관적이지 않아, 복잡하지만 결과를 반환하기 전까지 다른 작업을 할 수 있기 때문에 자원 효율적으로 사용 가능
JS 작동원리
JS를 실행하기 위해선 JS엔진이 필요하다. JS엔진은 V8, Rhinom SpiderMonkey등 다양하게 있지만 이중에서 가장 대표적인 예로는 Google에서 만든 V8엔진이다.
엔진은 위 그립과 같이 두 가지 구성요소로 구성된다. 메모리힙은 메모리 할당이 발생하고, 콜스택은 코드 실행에 따라 스택이 하나씩 쌓이는 곳이다.
JS를 사용하다 보면 setTimeout()같은 수많은 API를 사용한다. 이런 API들은 Web API라고 웹 브라우저 혹은 node.js같은 JS런타임에서 지원해주는 API이다. 그래서 어떤 브라우저는 지원을 안해줄 수도 있다.
그런데 JS는 위에서 나온 setTimeout()과 같은 비동기 코드 작성이 가능함에도, 자바스크립트 자체에는 비동기 코드를 처리하기 위한 개념은 갖고있지 않다. 그런데 어떻게 비동기 처리를 하냐? 바로 Event Loop & Callback Queue 덕분이다.
Web API 와 더불어 웹 브라우저나 런타임에서는 Event Loop와 Callback Queue도 지원해준다.
코드가 실행됨에 따라 콜스택에 차곡차곡 쌓이게 된다. 그 중 비동기 함수들은 Web API로 보내져 처리된다.
Web API에서 작업을 완료한 비동기 함수들을 Callback Queue에 넘겨주게 된다. 여기서 Event Loop는 콜스택이 빈 상태를 확인하게 되면 Callback Queue에 있는 비동기 함수들을 Call Stack에 push 해준다.(우선순위 : Job Queue 다음이 Task Queue) 그 후 Call Stack에서 비동기 함수를 실행시키게 된다.
JS는 Single Thread인데, 비동기가 어케 가능???
Event Loop때문이다.
Task Queue와 Job Queue(microtask queue)의 우선순위는 Job Queue가 더 높다.
따라서 Event Loop가 콜스택이 비었다는 것을 확인 후 Job Queue의 함수들을 순차적으로 콜스택에 push 해준다.
