Intro

setTimeout()

: 만료된 후 함수나 지정한 코드 조각 실행하는 타이머 설정

2번째 매개변수로 들어간 밀리초 단위가 지난 후

첫 번째 매개변수인 콜백 함수가 호출

=> 3000ms 지난 후 console.log('2'); 실행

---

sync(동기) vs async(비동기)

sync : 시간을 맞춤

이전의 것이 끝나야 다음 것을 할 수 있는 특징

Ex) 대학생이 되는 법 : 고등학교 1학년 -> 2학년 -> 3학년 -> 대학교 입학

async : 시간을 맞추지 않음

시간이 아닌 동시적으로 수행 가능한 방식

Ex) 취직하는 법 : 토익 공부, 자격증 취득, 면접 준비 등

콘솔에 1을 출력 후 setTimeout()으로 3000ms 기다리는 동안 3출력 후 2 출력하는 순서 원리

JavaScript는 동기 언어

but, setTimeout에 콜백함수 실행하는 비동기 함수 사용

어떻게??

setTimeout() -> JS용 함수가 아니다! 브라우저에서 지원!

브라우저에서 지원하는 함수로 비동기 처리 (Node에서도 사용)

---

JS 엔진

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

JS 엔진에는 2가지 요소로 구성

메모리 힙 : 메모리 할당이 발생하는 곳 (변수 정의 시 저장이 되는 창고)

호출 스택 : 코드가 실행될 시 스택들이 쌓이게 되는 곳

Call Stack

함수의 실행 구문이 실행 시 쌓이게 되는 저장소

A함수 호출로 'A-1...'출력 후 B()호출

B의 셋타임 1500ms으로 wait 동안 'A-2...'출력 후 'B-1...'출력

=> call stack 구조로 플로우를 파악해보면

1: A()함수 호출로 쌓임

2: A() 내 console.log('A-1...') 실행 구문으로 쌓임

3: 실행되어 나가게 됨

4: B()함수 호출로 쌓임

5: B()함수 내 setTimeout(fn, 1500)호출로 쌓이게됨

6: setTimeout함수 실행으로 나가게 됨

7: B()함수도 실행도 완료되어 나가게 됨

8: 1500ms 흐르는동안 console.log('A-2...')구문 도착으로 쌓이게됨

9: 'A-2...' 콘솔에 실행되며 나가게됨

10: A() 함수 구문도 완료되었으므로 나가게 됨

11: 1500ms 지난 시점에 console.log('B-1...')구문 쌓이게됨

12: 실행 후 나가게 됨

1500ms은 컴퓨터 시스템 상 큰 시간이다.

충분히 다른 구문들이 실행 완료되어 나갈 수 있는 것이다.

하지만 의문이 드는 한 가지...

JS가 아닌 브라우저에서 지원하는 setTimeout은 어디로 갔다가 다시 온건가?

JS엔진 외에도 Web APIs와 Callback Queue, Event Loop로 작동

setTimeout 함수는 Web APIs에서 별도로 처리를 해주는데,

이는 Callback Queue로 보내서 Event Loop에 의해 기다리게 된다.

Event Loop는 call stack를 우선순위로 예의주시하다가

비게 되면 Callback Queue에 쌓인 큐를 Call Stack에 넣어준다.

그래서 사라졌던 setTimeout함수가 다시 돌아와 나가고,

그 후에 B-1이 출력이 된 것이다.

Event Flow

만약 setTimeout이 0ms라면?

=> 똑같이 A-2 출력이 된다. Why?

: 0ms라도 Web APIs에서 처리되어 Callback Queue로 넘어가 대기상태에 들어가기 때문이다.