Queue (FIFO) Visualization — Step by Step

Two ends, one direction

A queue restricts access to *both* ends, each with a single job: elements enter at the rear and leave from the front. That is the FIFO invariant — First In, First Out — and it is exactly how a checkout line works: you join at the back, and the person who has waited longest is served first. Nothing can jump the line, and nothing can leave from the middle. Keeping a pointer to each end makes both operations O(1): enqueue writes at the rear pointer, dequeue reads at the front pointer, and neither ever scans the elements in between.

Enqueue and dequeue, traced

Start empty and enqueue(5), enqueue(2), enqueue(8). The queue reads [5, 2, 8] — 5 at the front, 8 at the rear. Now dequeue() returns 5, the first value in, leaving [2, 8]. Dequeue again and you get 2. Arrival order is preserved perfectly: elements exit in exactly the order they entered. peek() lets you inspect the front element without removing it, and dequeuing an empty queue is an underflow error. The visualizer demo runs the complete cycle — every value enqueued at the rear, then every value dequeued from the front — so you can watch FIFO play out step by step.

The naive array trap

The obvious implementation — a plain array where dequeue removes index 0 — hides an O(n) cost: removing the front forces every remaining element to shift left one slot (this is what JavaScript's Array.shift() does). For a queue processing millions of items, that turns each dequeue into a full-array copy. Two standard fixes exist. Keep a moving front index and simply advance it past dequeued slots, reclaiming space occasionally; or use a linked structure with head and tail pointers. Either way the goal is the same: dequeue must not move the elements that stay.

The circular buffer

The classic fixed-capacity solution is a circular buffer (ring buffer): an array of capacity k with front and rear indices that advance by (i + 1) % k, wrapping from the last slot back to slot 0. The array is treated as a ring, so slots freed at the front get reused by new arrivals at the rear — no shifting, no reallocation, ever. A count (or one deliberately empty slot) distinguishes full from empty, since both states have front == rear. Circular buffers back real systems everywhere: keyboard input buffers, audio streaming, network packet queues, and bounded producer–consumer channels.

Queues in the wild

Queues appear wherever fairness or arrival order matters. Breadth-first search is the flagship: a queue of frontier nodes guarantees vertices are visited level by level, which is precisely why BFS finds shortest paths in unweighted graphs — swap in a stack and the same code becomes DFS. Operating systems queue processes for CPU time, printers queue jobs, and web servers queue incoming requests. Message brokers like RabbitMQ and Kafka are, at heart, durable distributed queues that decouple producers from consumers so each side can run at its own pace.

JavaScript

class Queue {
  #items = [];
  #head = 0;

  enqueue(value) {
    this.#items.push(value);
  }

  dequeue() {
    if (this.isEmpty()) throw new Error('Queue underflow');
    const value = this.#items[this.#head++];
    // Reclaim space once half the array is dead slots
    if (this.#head * 2 >= this.#items.length) {
      this.#items = this.#items.slice(this.#head);
      this.#head = 0;
    }
    return value;
  }

  peek() {
    return this.#items[this.#head];
  }

  isEmpty() {
    return this.#head >= this.#items.length;
  }
}

Python

from collections import deque

class Queue:
    def __init__(self):
        self._items = deque()

    def enqueue(self, value):
        self._items.append(value)

    def dequeue(self):
        if self.is_empty():
            raise IndexError("queue underflow")
        return self._items.popleft()

    def peek(self):
        return self._items[0] if self._items else None

    def is_empty(self):
        return len(self._items) == 0

    def __len__(self):
        return len(self._items)

Java

import java.util.ArrayDeque;

public class Queue<T> {
    private final ArrayDeque<T> items = new ArrayDeque<>();

    public void enqueue(T value) {
        items.addLast(value);
    }

    public T dequeue() {
        if (isEmpty()) throw new IllegalStateException("Queue underflow");
        return items.removeFirst();
    }

    public T peek() {
        return items.peekFirst();
    }

    public boolean isEmpty() {
        return items.isEmpty();
    }

    public int size() {
        return items.size();
    }
}