What a queue is
Think of the line at a coffee shop. New customers join at the back. The barista always serves the customer at the front — the one who has waited longest. Nobody who just walked in gets served first; that would be unfair.
That line is a queue: a container where you add at one end and remove from the other. The first item in is the first item out. That rule is called FIFO — first-in, first-out.
Two moves do all the work. enqueue adds an item to the back. dequeue removes the item at the front. It's the mirror image of a stack: a stack works one end (LIFO), a queue works both ends in order (FIFO).
In the animation, watch the two ends do different jobs: new values slide in at the back, and only the front value ever leaves. Notice what never happens — nothing exits from the middle, and nothing jumps the line.
This section has a step-by-step animation in the interactive lesson.
Quick check
You enqueue 3, then 7, then 5. Which value gets dequeued first?
Answer it in the interactive lesson to keep your progress.
The core operations
Every queue supports the same small set of moves. Picture a queue holding
[3, 7] (3 at the front, 7 at the back) and watch each one:- enqueue(5) — add 5 to the back. Queue becomes
[3, 7, 5]. - dequeue() — remove and return the front. Returns 3, queue goes to
[7, 5]. - front() (or peek) — look at the front without removing it. Returns 3, queue stays
[3, 7]. - isEmpty() — is there anything here?
[3, 7]→ false;[]→ true. - size() — how many items?
[3, 7]→ 2.
The two that change the queue are enqueue (back) and dequeue (front). Notice they act on opposite ends — that separation is what keeps the order fair.
Quick check
Queue is [3, 7] (3 at the front). You enqueue(5) and then dequeue(). Predict the result.
Answer it in the interactive lesson to keep your progress.
Your first queue problem: serve a line in order
A queue's simplest job is processing things in the order they arrived. Picture a help desk: tickets come in, and you always handle the oldest waiting one next. We'll take a list of events — a ticket arriving, or a
serve — and produce the order people were served.The steps
- Keep an empty queue and an empty
servedlist. - For each event: if it's a new ticket, enqueue it at the back.
- If it's a
serve, dequeue the front ticket and add it toserved(skip if the queue is empty). - When the events run out,
servedholds everyone in the order they were handled.
Trace it on join 3, join 7, serve, join 5, serve:
- join 3 → line
[3] - join 7 → line
[3, 7] - serve → front is
3, remove it → served[3], line[7] - join 5 → line
[7, 5] - serve → front is
7, remove it → served[3, 7], line[5]
The order out (
3, 7) exactly matches the order in — that fairness is the queue's whole job. Each event is handled once, so this is O(n) (from the Complexity lesson: the work grows with the number of events). In JavaScript, one way to write those steps:In the animation, keep score of both ends: joins land at the back, serves peel off the front. Before each
serve, predict who leaves — it is always the value that has been in the line longest, never the newest arrival.This section has a step-by-step animation in the interactive lesson.
function processTickets(ops) {
const queue = [];
const served = [];
for (const op of ops) {
if (op === 'serve') {
if (queue.length) served.push(queue.shift());
} else {
queue.push(op); // enqueue
}
}
return served;
}
console.log(processTickets([3, 7, 'serve', 5, 'serve'])); // [3,7]Quick check
In a queue, enqueue and dequeue act on which ends?
Answer it in the interactive lesson to keep your progress.
Where it breaks (and how not to get burned)
The big trap with queues in JavaScript is
Array.shift().A plain array looks like a perfect queue:
push() to enqueue at the back, shift() to dequeue from the front. And it works — but shift() is secretly O(n). Removing the first element forces every remaining element to slide down one slot to fill the gap. On a small queue nobody notices; on a queue of a million items, dequeuing repeatedly becomes an O(n²) disaster.Real queues avoid this by keeping a head pointer (an index that just moves forward, leaving removed slots behind) or by using a linked list, so dequeue stays O(1). The other classic mistake is simply removing from the wrong end —
pop() instead of shift() — which quietly turns your queue into a stack.Quick check
Predict: dequeuing a million items with Array.shift() costs…
Answer it in the interactive lesson to keep your progress.
How fast is it? (complexity)
Using the vocabulary from the Complexity & Time lesson, a proper queue touches only one end per move:
| Operation | Cost | Why |
|---|---|---|
| enqueue | O(1) | add at the back |
| dequeue (proper queue) | O(1) | remove at the front via a head pointer |
dequeue via Array.shift() | O(n) | every element slides down a slot |
| front / isEmpty / size | O(1) | read-only glances |
Storing
n items is O(n) space. The shift() row is the trap from the last section — same idea, very different bill.Key takeaways:
- A queue is FIFO: first in, first out. Add at the back, remove from the front.
- Two movers — enqueue and dequeue; three readers — front, isEmpty, size.
- A real queue is O(1) per operation; watch out for
shift()on big arrays. - Reach for a queue whenever arrival order is what matters.
What's next
You now have both fair-ordering structures: a stack (most-recent first) and a queue (oldest first). That FIFO instinct — handle things in arrival order — powers a family of classics, each its own lesson later (no need to know them yet):
- Breadth-first search (BFS) — explore a graph or grid one level at a time, and find shortest paths.
- Level-order traversal — visit a tree top-to-bottom, left-to-right.
- Sliding-window maximum — built on a double-ended cousin, the deque.
Next up in order: Monotonic Stack — a stack that stays sorted to find the next greater or smaller element.