자바스크립트 동작 원리

• 자바스크립트는 싱글 쓰레드!

  • 정확하게 말하면 javascript의 메인 쓰레드인 이벤트루프가 싱글 쓰레드

• 그러나 웹브라우서나, NodeJs 같은 멀티 쓰레드 환경에서 실행되어짐

  • 즉 js 자체는 싱글쓰레드, js 런타임 환경은 멀티쓰레드

• 싱글 스레드의 비동기 요청?

  • 동기식 요청 ⇒ 코드를 위에서부터 한줄한줄 차례대로 실행 (끝나면 다음거, 끝나면 다음거)
  • 비동기를 사용? ⇒ 첫번째 코드 실행 뒤 완료될때 끝날때까지 기다리지않고 동시에 다른 작업을 실행

• 자바스크립트에서 비동기를 알기 위해 JS 런타임 환경부터 알아야함

자바스크립트가 실행될 때는 다음과 같은 요소들이 실행을 도와준다.

• Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리

• Web API: 웹 브라우저에서 제공하는 API로 AJAX나 Timeout등의 비동기 작업을 실행

• Task Queue: Callback Queue라고도 하며 Web API에서 넘겨받은 Callback함수를 저장

• Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

• 예시

setTimeout(() => console.log('async chanyeong'));
console.log('hello chanyeong');

위 함수를 실행한다고 할때

1. 첫번째 코드라인 setTimeout 함수가 Call Stack에 쌓임
2. JS 엔진이 처리하지않고 Web API가 처리해서 Task Queue로 작업 전달
3. 두번째 코드라인이 Call Stack에 추가되고 실행
4. Event Loop가 Call Stack 비어있는지 확인