JavaScript 비동기 처리 실행 순서
위→아래, 왼쪽→오른쪽으로 코드가 실행되는 동기 코드와 달리 비동기 코드는 그렇지 않다.
'이벤트 루프' 를 꼭! 이해하고, 코드만 봐도 비동기 처리 실행 순서를 알 수 있도록 하자!💁♀️
호출 스택(call stack)과 이벤트 루프(event loop)
🔆 호출 스택 - 동기코드 / 이벤트 루프 - 비동기 코드
사실 자바스크립트 엔진은 자바스크립트 소스 코드가 처음 실행되는 순간도 하나의 함수(Chrome의 경우, anonymous)가 실행된다고 본다.
- 어떤 자바스크립트를 실행한다 = function anonymous() {...} 실행
- anonymous 함수가 끝난다 = 호출 스택이 비어졌다 = (call stack)코드 실행 종료
✨용어 구분
▸함수 호출한 경우: 호출 스택에 들어감
▸함수 선언한 경우(함수 호출x) : 호출 스택에 들어가지 않음
자바스크립트 타이머(Timer)
Timer, click Event와 같은 비동기 이벤트는 JavaScript의 가장 큰 특징인 싱글 스레드와 밀접하다.
Queue에서 함수를 하나씩 꺼내서 싱글 스레드에 해당하는 call stack에서 처리하는 과정이다.
즉, 동기적인 코드를 먼저 다 호출하고나서 비동기 콜백 함수들을 호출한다.
single thread인 call stack은 '하나' 이기 때문에 실행하고 있던 일을 멈추지 못한다.
자바스크립트 타이머는 하던 일을 중간에 멈추고 새로운 작업을 실행하지 않고, □초 뒤에 타이머로 넘겨줄 함수를 Queue에 넣는다.(Call Stack)
function은 바로 실행되지 않고, call stack에서 기존에 하던 일을 마무리하고 빈 공간이 되면 Queue에서 call back function이 call stack으로 이동되고 나서야 실행된다.
∴ setTimeout 인자로 설정한 시간이 정확하지 않음을 보여줌.
setTimeout이 정확하지 않을 때는 setTimeout 함수가 실행되기 전의 함수가 일이 많이 실행시간이 오래 걸릴 때이다.
setTimeout이 설정한 시간이 지나도 call stack으로 가지 못해 실행되지 않고, 현재 call stack에 들어있는 이전 함수가 끝나기를 기다리는 대기시간이 추가된다.
