이벤트루프

본 내용은 10분 테코톡 피터님의 강의를 토대로 작성하였습니다.

1. 콜백 함수

• 다른 함수의 인자로 넘겨지는 함수
• 콜백 수신 함수에 의해 특정 시점에 실행
• 동기 콜백의 경우 호출 즉시 실행
• 비동기 콜백의 경우 나중에 조건을 만족했을 때 실행
• 이벤트 리스너
• 타이머 / XMLHttpRequest 요청

2. 비동기적 실행

• setTimeout과 같은 함수는 자바스크립트의 뒷편에서 실행된다.
  • 비동기 코드
  • 이벤트 루프에서 실행된다.
  • 비동기 처리, 동시성

3. 자바스크립트 엔진

• Webkit, V8 등
  • 브라우저마다 엔진이 다름
• 자바스크립트 코드를 해석하고 실행하는 인터프리터
• 힙(Heap) + 호출 스택(Call Stack)
• 힙은 메모리 할당이 일어나는 부분
  • 변수, 객체 등이 저장되는 일종의 창고

호출 스택(Call Stack)

• 함수가 호출되는 순서대로 쌓이는 스택
• 함수 실행 시 호출 스택에 해당 함수를 집어넣음
• 함수 return 시(함수 실행이 끝나면) 호출 스택의 맨 위에 있는 해당 함수를 끄집어냄
• 사실은 함수가 아니라 함수의 실행 문맥
  • 실행 컨텍스트
  • 변수, 함수의 선언, 스코프, this를 물리적인 객체 형태로 보관

싱글 스레드 언어

• 자바스크립트는 싱글 스레드 언어
• 호출 스택을 하나만 사용
• 동시에 하나의 일만 처리

4. 브라우저의 구조

• 자바스크립트 엔진 + Web APIs + Event Loop + Callback Queue으로 구성
• Web APIs: 비동기 메소드들
  • DOM
  • AJAX(XMLHttpRequest)
  • Timeout(setTimeout)
• Callback Queue(= Task Queue): Web API의 콜백 함수들이 대기하는 큐
• 자바스크립트 엔진 자체는 싱글스레드이지만, 실제 브라우저에는 여러개의 스레드가 사용된다.
  • Web APIs
• Event Loop, Callback Queue: 자바스크립트가 Web APIs와 상호작용하기 위해 필요한 장치

이벤트 루프(Event Loop)

• 호출 스택과 콜백 큐를 계속 주시
• 호출 스택이 비어있으면, 먼저 들어온 순서대로 콜백 큐에 있는 콜백 함수들을 호출 스택으로 집어 넣는다.

5. setTimeout이 0초일 때?

• 프론트엔드 환경의 자바스크립트 코드에서 종종 볼 수 있는 코드
• 0초로 지정하여도 콜백큐로 들어가기 때문에 setTimeout의 콜백함수는 나중에 실행된다.

Reference

[10분 테코톡] 피터의 이벤트루프