이벤트 루프 (Event Loop)

이벤트 루프 설명

JavaScript는 단일 스레드 환경, 동기적으로 이벤트를 처리하는 메커니즘을 갖는다.

이벤트 루프란 이벤트 처리를 위한 주요한 컴포넌트로서, 이벤트 발생과 이벤트 핸들러 실행 사이의 상호작용을 관리한다.

 

일반적으로 JavaScript 코드는 순차적으로 실행되지만, 이벤트 루프를 통해 비동기적인 작업은 바로 반환되지 않고 나중에 완료될 때까지 기다리지 않고도 계속해서 다음 코드를 실행 할 수 있다.

 

이벤트 루프의 역할

1. 비동기 작업을 관리하고 완료되면 이벤트 큐에 해당 이벤트를 넣는다. 이벤트는 이벤트 큐에 순서대로 쌓이게 된다.

2. 현재 실행 중인 코드의 완료 여부를 확인하고, 실행할 다음 이벤트를 이벤트 큐에서 가져와 처리한다.

•  이벤트 큐(Event Queue) JavaScript에서는 이벤트 루프와 동일어로도 쓰인다.
•  비동기 이벤트 처리를 위해 사용되는 자료구조. 이벤트를 기록하고, 순차적으로 처리하는 방식으로 동작한다. 일반적으로 이벤트 큐는 이벤트가 발생하는 순서대로 큐에 저장되고, 발생한 순서대로 처리한다.

이벤트 루프의 동작 과정

1. Call Stack에 코드를 추가하여 실행한다.

2. Call Stack이 비어 있으면 이벤트 큐에서 다음 이벤트를 가져와 Call Stack에 추가한다.

3. Call Stack에 추가된 이벤트의 코드가 실행되고 Call Stack이 다시 비워질 때까지 이과정을 반복한다.

 

while(queue.waitForMessage()){
  queue.processNextMessage();
}

queue.waitForMessage() 함수는 현재 처리할 수 있는 메시지가 존재하지 않으면 새로운 메시지가 도착할 때까지 동기적으로 대기한다.

 

런타임 상황의 메모리 동작

런타임 환경에서 메모리 관리

Stack

• 스택은 메모리의 한 영역으로, 함수 호출과 관련된 정보를 저장하는데 사용된다.
• 함수가 호출될 때마다 Stack Frame이라는 메모리 블록이 생성되어 스택에 쌓인다.
• 현재 실행 중인 함수의 정보, 매개변수, 로컬 변수 및 복귀 주소 등이 스택 프레임에 저장된다.
• 함수가 실행을 완료하면 해당 함수의 Frame이 제거되고 스택의 맨 위에 있는 다음 스택 프레임이 실행된다. 이를 함수 호출 스택 (CallStack)이라고 한다.

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

const baz = bar(7) // 42를 baz에 할당

1. bar를 호출할 때, bar의 인수와 지역 변수를 포함하는 첫 번째 프레임이 생성됩니다.
2. bar가 foo를 호출할 때, foo의 인수와 지역 변수를 포함하는 두 번째 프레임이 생성되어 첫 번째 프레임의 위로 푸시됩니다.
3. foo가 반환하면, 맨 위의 프레임 요소를 스택 밖으로 꺼냅니다. (bar 호출 프레임만 남음)
4. bar가 반환하면, 스택이 빕니다.

Heap

• 힙은 동적으로 할당되는 객체 데이터를 저장하는데 사용된다. 객체와 배열 같은 자료구조들은 힙에 저장되며, 이들을 참조를 통해 접근한다.
• 힙은 가비지 컬렉션에 의해 관리되며, 사용하지 않는 개체들은 자동으로 해제된다.

 

Queue

• 큐는 비동기 작업의 처리를 위해 사용되는 자료구조
• 비동기적으로 발생하는 이벤트나 작업은 이벤트 루프를 통해 큐에 추가된다.
• 큐는 FIFO 원칙에 따라 동작하며, 새로운 이벤트는 큐의 뒤에 추가 되고 실행 할 이벤트는 큐의 앞에서 제거된다.
• 이벤트 루프는 큐에 있는 이벤트를 순차적으로 처리하고, 해당 이벤트에 할당된 콜백 함수를 실행한다.

 

이러한 메모리 구조와 큐는 자바스크립트의 비동기적인 특성을 관리하고, 함수 호출과 객체 데이터를 저장하며, 이벤트 처리를 순서대로 처리함으로써 프로그램의 실행을 관리한다.

 

참조

• Mdn web docs  https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop  
• 코어 자바스크립트