20230606TIL(동기,비동기,이벤트루프)

어제의 내용의 연장선이라 새로 배운 것들만 정리함!

동기적 제어 흐름

동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것이다. 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다. 네이버 실행이 동기적으로 실행된다면 우리는 네이버를 열때마다 티켓팅 대기화면을 볼 것이다...

let a = 10
console.log("a : ", a)
function foo() {
  for (let i = 1; i < 10; ++i) {
    console.log(i)
  }
}
foo()
출력
a : 10
1
2
3
4
5
6
7
8
9
10

코드의 흐름과 실제 제어 흐름이 동일하다.

비동기적 제어 흐름

현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것이다. 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.

let a = 10
setTimeout(function callback() {
  console.log('a : ', a)
}, 3000)
console.log('Finished')

출력
Finished
~~3초 뒤~~
a: 10

코드 흐름과 실제 제어 흐름이 다르다.눈으로 보이는 코드 순서대로라면 a: 10이 먼저 출력되어야 하나 Finished가 먼저 출력된다.
비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다. setTimeout함수를 3초간 기다리는 동안 console.log('Finished')가 먼저 출력된다.

이벤트 루프

자바스크립트 엔진은 비동기 처리를 제공하지 않지만, 정해진 함수를 활용해 처리할 수 있다. 이러한 함수들을 비동기 API라고 하고 setTimeout,XMLHttpRequest,fetch 등이 있다.

비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있고 이벤트 루프(event loop), 태스크 큐(task queue), 잡 큐(job queue) 등으로 구성된다.
API 모듈은 비동기 요청을 처리 후 태스크 큐에 콜백 함수를 넣는다.
자바스크립트 엔진은 콜 스택이 비워지면, 태스크 큐의 콜백 함수를 실행한다.
태스크 큐는 Web API 작업을 담고, 잡큐는 프로미스 API나 애니메이션 프레임 작업을 담는다.