자바스크립트 큐(Queue) 데이터 구조 완벽 가이드: FIFO 원리와 활용법

자바스크립트의 큐(Queue) 데이터 구조란?

큐(Queue)는 스택(Stack)과 어느 정도 유사한 추상 데이터 구조입니다. 하지만 스택과 달리 큐는 양쪽 끝이 모두 열려 있다는 점에서 차이가 있습니다. 한쪽 끝은 항상 데이터를 삽입하는 용도로 사용되고(인큐, enqueue), 반대쪽 끝은 데이터를 제거하는 용도로 사용됩니다(디큐, dequeue).

큐는 FIFO(First-In-First-Out, 선입선출) 방식을 따릅니다. 즉, 가장 먼저 저장된 데이터 항목이 가장 먼저 접근·처리됩니다.

실생활의 예를 들어보면, 일차선 일방통행 도로를 생각할 수 있습니다. 이 도로에서는 먼저 진입한 차량이 반드시 먼저 빠져나가게 되며, 이것이 바로 큐의 동작 방식과 같습니다.

큐의 주요 연산

다음 다이어그램은 큐가 어떻게 작동하는지 보여줍니다.

• enqueue(인큐): 큐의 뒤쪽(rear) 끝에 새로운 데이터를 삽입합니다.
• dequeue(디큐): 큐의 앞쪽(front) 끝에서 데이터를 제거하고 반환합니다.
• peek(피크): 데이터를 제거하지 않고 맨 앞의 요소만 확인합니다.
• isEmpty: 큐가 비어 있는지 검사합니다.

자바스크립트에서의 간단한 큐 구현 예시

class Queue {
  constructor() {
    this.items = [];
  }

  // 뒤쪽에 데이터 추가
  enqueue(element) {
    this.items.push(element);
  }

  // 앞쪽에서 데이터 제거 후 반환
  dequeue() {
    if (this.isEmpty()) return null;
    return this.items.shift();
  }

  // 맨 앞 요소 확인
  peek() {
    if (this.isEmpty()) return null;
    return this.items[0];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

큐의 대표적인 활용 사례

• 작업 스케줄링: 자바스크립트 이벤트 루프의 태스크 큐(Task Queue)가 대표적인 예입니다.
• 메시지 처리: 채팅 시스템이나 메시지 브로커에서 순서대로 메시지를 처리할 때 사용됩니다.
• BFS(너비 우선 탐색): 그래프나 트리를 탐색할 때 방문 순서를 관리하는 데 활용됩니다.
• 프린터 대기열: 문서가 들어온 순서대로 인쇄되는 시스템에 적용됩니다.

이처럼 큐는 순서가 중요한 처리 흐름에서 필수적인 자료구조이며, 자바스크립트 개발에서 비동기 작업 관리 등 다양한 분야에 널리 활용됩니다.