콜백 함수에 대한 내용을 작성하기 전에 동기와 비동기에 대해 알아야 된다 생각을 하고 내용 정리를 했는데 비동기 동작에 이벤트 루프 내용이 들어가기 때문에 이벤트 루프 내용 정리을 정리 해보려고 합니다.
Event Loop
콜스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수(콜백 함수, 이벤트 헨들러)가 있는지 반복해서 확인한다. 콜스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜스택으로 이동시킴. 콜스택으로 이동한 함수는 실행이 된다.
이벤트 루프가 어떻게 동작이 되는지 확인해 보시죠!
브라우저 구조
JavaScript Engine
위 사진에 JS라고 적혀져 있는 부분이 자바스크립트 엔진부분 입니다.
Memory Heap과 Call Stack으로 구성이 되어 있습니다.
자바스크립트는 싱글 스레드로 동작하는 프로그래밍 언어이고 Call Stack이 한 개를 뜻합니다.
- Memory Heap : 메모리 할당이 일어나는 곳입니다.
- Call Stack : 코드가 실행될 때 호출 스택이 쌓이는 곳입니다. LIFO 후입선출
함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다.
Web APIs
자바스크립트 언어 자체가 비동기 동작을 지원하는 것이 아니고 비동기로 동작하게 해주는 것은 브라우저에서 도움을 줍니다. 그림에서 Web APIs가 브라우저가 제공하는 API목록입니다.
- Call Stack에서 실행된 비동기 함수는 Web API를 호출하게 됩니다.
- Web API는 콜백함수를 태스크 큐에 넣습니다.
Callback Queue
비동기적으로 실행된 콜백함수를 저장하는 자료구조, FIFO 선입선출
Event Loop 예시
위에 이벤트 루프를 설명한 부분을 따라 동작원리를 알아보자
우선 저런 코드로 실행을 한다면 1, 3, 2순으로 실행이 된다.
-
console.log("1")이 Call Stack에 추가된다. 그 이후 실행되어 콘솔에 값이 출력된 후, Call Stack에서 제거된다.
-
setTimeout이 Call Stack에 추가됩니다.
-
setTimeout이 실행이 되고 브라우저에서 제공하는 Web API에 있는 Timeout을 호출하고 Call Stack에서 제거 됩니다.
-
console.log("3")이 Call Stack에 추가된다. 그 이후 실행되어 콘솔에 값이 출력된 후, Call Stack에서 제거된다.
-
setTimeout함수의 0ms만큼의 시간이 지난 뒤 Callback으로 전달된 name함수가 Task Queue에 추가됩니다.
-
Event Loop는 Call Stack이 비어있는 것을 확인하고 Task Queue를 살펴보고 name 함수를 발견하여 Call Stack에 name함수를 추가해줍니다.
-
name함수가 실행 되고 내부의 console.log("2")가 Call Stack에 추가됩니다.
-
console.log("2")이 실행되어 콘솔에 값이 출력되고 Call Stack에서 제거되고, name함수도 제거됩니다.
