이벤트 루프와 실행 컨텍스트

이벤트 루프와 실행 컨텍스트는 함께 작동하여 자바스크립트의 동기 및 비동기 작업을 효율적으로 관리하고, 코드의 실행 흐름을 제어한다.

 

이벤트 루프

• 자바스크립트의 비동기 작업을 관리하는 메커니즘
• 콜 스택이 비어있는지 지속적으로 확인하고 태스크 큐에 있는 작업을 하나하나 콜 스택으로 이동시키는 역할을 한다.

실행 컨텍스트

• 이벤트가 실행되는 환경을 관리하고, 콜 스택에 쌓여서 동기 작업을 순차적으로 처리한다.

 

이벤트 루프의 작동방식

1. 코드 실행 시작
   • 전역 실행 컨텍스트가 생성되어 콜 스택에 푸시되고
   • 이벤트 루프가 시작되어 콜 스택을 모니터링 한다.
2. 동기 코드 실행
   • 코드가 순차적으로 실행되며, 함수 호출 시 새로운 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.
   • 각 실행 컨텍스트는 자신의 변수 환경, 스코프 체인, this 바인딩을 가진다.
3. 비동기 작업 처리
   • setTimeout, AJAX 요청 등의 비동기 작업을 만나면, 해당 작업은 Web API 로 전달된다.
   • 비동기 작업의 콜백 함수는 태스크 큐 에 대기한다.
4. 콜 스택 비우기
   • 동기 코드의 실행이 완료되면, 실행 컨텍스트들이 콜 스택에서 차례로 제거된다.
5. 이벤트 루프 작동
   • 이벤트 루프는 콜 스택이 비어있는지 확인한다.
   • 콜 스택이 비어있다면, 태스크 큐 의 첫 번째 태스크(콜백함수)를 콜 스택으로 이동시킨다.
6. 비동기 콜백 실행
   • 콜백 함수에 대한 새로운 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.
   • 콜백 함수가 실행되고, 실행이 완료되면, 해당 실행 컨텍스트가 콜 스택에서 제거된다.
7. 반복
   • 이벤트 루프는 이 과정을 계속해서 반복하며 태스크 큐에 있는 모든 태스크를 처리한다.

 

핵심기능 요약

이벤트 루프와 실행 컨텍스트는 단일 스레드 환경에서도 비동기 작업을 효과적으로 처리하는 역할을 한다.