자바스크립트로 개발을 할 때 내 생각과 달리 한박자씩 늦게 데이터가 나오고, 아직 못 받은 데이터(id 등)로 다른 api호출을 해서 에러가 났던 적이 많았다.
이벤트 루프를 다시 한번 공부해보자.
자바스크립트 특징
- 자바스크립트는 싱글 스레드 기반의 언어이고 한번에 하나의 처리만 할 수 있다. (CallStack이 한개)
- 자바스크립트가 비동기로 동작할 수 있는 이유는 브라우저(혹은 node.js)의 이벤트 루프 때문이다.
이벤트 루프 기본 구조
자바스크립트 엔진
Heap
객체가 저장되는 메모리 공간
Call Stack
함수를 호출하면 함수 실행 컨텍스트가 순차적으로 Call Stack에 푸쉬되어 순차적으로 실행된다. 실행 중인 컨텍스트가 종료되어 Call Stack에서 제거되기 전까지 다른 태스크는 실행하지 않는다.
브라우저 환경
Tesk Queue
setTimeout이나 setInterval같은 비동기 함수의 콜백 함수, 이벤트 핸들러가 일시적으로 저장되는 공간
Web APIs
브라우저에서 제공하는 api
클릭같은 DOM Event, AJAX 네트워크 호출, Timer 등 은 실행시킬 경우 콜백 함수를 넘기게 되는데, 이 콜백 함수는 비동기 작업이 끝나면 Tesk Queue에 넣어지고 순차적으로 Call Stack에 푸쉬된다.
Event Loop
이벤트 루프는 Call Stack에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. Call Stack의 실행이 끝나고 비워져 있을 때만 태스크 큐의 함수를 순차적으로 푸쉬해주는 역할
예시
console.log('Hi');
setTimeout(function cb(){
console.log('Dami');
},0);
console.log('Daisy');
// Hi
// Daisy
// Dami위와 같은 코드가 있을 때 setTimeout의 콜백함수가 태스크 큐에 저장되고 "Hi"와 "Daisy"를 출력한다. 그 후 비워져 있는 Call Stack에 setTimeout의 콜백함수를 푸쉬를 해주면서 마지막으로 "Dami"를 출력한다.
출처
프로그래머스 데브코스 교육 내용을 바탕으로 정리한 글 입니다.
