이벤트 루프와 브라우저 환경
자바스크립는 싱글 스레드로 동작한다.
싱글 스레드: 한 번에 하나의 태스크만 처리한다는 뜻
(실제 면접에 받은 질문: 이벤트 루프에 대해 설명하는 것.)
❓자바스크립트를 멀티 스레드처럼 사용하는 방법이 뭔가요? 이벤트 루프에 대해서 설명해주세요.
자바스크립트는 싱글 스레드 언어지만 비동기 작업을 통해 멀티 태스크를 수행할 수 있다.
비동기 로직은 이벤트 루프를 통해 처리된다.
![](https://velog.velcdn.com/images/bori_note/post/ed138135-045c-4d84-816f-6f143706fc27/image.png)
힙
콜 스택
- 함수 호출 시 실행 컨텍스트가 생성된다.
- 함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행하지 않음.
이벤트 루프
- 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.(FIFO)
태스트 큐
- 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
예시)
console.log(1+1)
setTimeout(function() {console.log(2+2)}, 1000)
console.log(3+3)
- 실행결과는?
2
6
4
- 동작순서
- console.log(1+1) 이 콜 스택에 올라감 → 2 출력
- setTimeout 함수가 실행되어 타이머가 설정되고 비동기 작업 시작. → setTimeout함수의 콜백함수는 태스크 큐에서 대기.
- console.log(3+3) 이 콜 스택에 올라감 → 6 출력
- setTimeout안의 console.log(2+2)가 태스크 큐로 이동
- 콜 스택이 비어있나 확인 후, console.log(2+2) 콜 스택에 올라감 → 4 출력
마이크로 태스트 & 매크로 태스크
![](https://velog.velcdn.com/images/bori_note/post/38d03833-19b2-4e4f-b26c-3238b16f8d27/image.gif)
태스크 큐는 마이크로 태스크큐와 매크로 태스크큐로 나뉜다.
- 마이크로태스트: Promise의 then, catch, finally와 같은 마이크로 태스크
- 매크로 태스크: setTimeout 및 비동기 작업의 콜백 함수
마이크로태스크 큐는 태스크 큐보다 우선순위가 높다. → 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다. → 마이크로태스크 큐가 비면 매크로태스크 큐에서 대기하고 있는 함수를 가져와 실행한다.