DSA Queues — FIFO Fundamentals Visualized
Learn queue fundamentals — FIFO enqueue/dequeue, O(1) operations, interactive step visualizer, code breakdown, and real-world scheduling examples.
Introduction
Queues are FIFO (First In, First Out) structures — the first element enqueued is the first one dequeued. Think of a line at a coffee shop: first person in line gets served first.
Queues power BFS, task schedulers, print spoolers, and message brokers like Kafka.
Quick index
| # | Section |
|---|---|
| 1 | How queues work |
| 2 | Interactive visualizer |
| 3 | Full implementation |
| 4 | Complexity & use cases |
| 5 | Real-life examples |
1. How queues work
front → [10] [20] [30] ← rear
↑ ↑
dequeue enqueue| Operation | Action | Result |
|---|---|---|
| enqueue | Add at rear | O(1) |
| dequeue | Remove from front | O(1)* |
| front | Read first, no remove | O(1) |
| isEmpty | Check if empty | O(1) |
2. Interactive visualizer
Queue — Fundamentals
FIFO structure — enqueue at rear, dequeue from front. Foundation for BFS, task schedulers, and message brokers.
Queue starts empty — enqueue at rear, dequeue from front.
Queue class
class Queue {
constructor() { this.items = [] }
enqueue(v) { this.items.push(v) }
dequeue() { return this.items.shift() }
front() { return this.items[0] }
isEmpty() { return this.items.length === 0 }
}FIFO — First In, First Out.
enqueue
O(1)
dequeue
O(1)*
Order
FIFO
3. Full implementation
class Queue {
constructor() {
this.items = []
}
enqueue(val) {
this.items.push(val)
}
dequeue() {
return this.items.shift()
}
front() {
return this.items[0]
}
isEmpty() {
return this.items.length === 0
}
}Function calls with output
// ── Demo calls — output shown on the right ──
const q = new Queue()
q.enqueue(10) // → [10]
q.enqueue(20) // → [10, 20]
q.enqueue(30) // → [10, 20, 30]
q.front() // → 10
q.dequeue() // → 10
q.dequeue() // → 20
q.isEmpty() // → false4. Complexity & use cases
| Use case | Why queue |
|---|---|
| BFS | Process nodes level-by-level |
| Print spooler | First submitted doc prints first |
| Task scheduler | Fair FIFO job ordering |
| Message broker | Ordered event processing |
5. Real-life examples
| Scenario | Queue role |
|---|---|
| Support tickets | First submitted ticket answered first |
| Print queue | Documents print in submission order |
| BFS shortest path | Explore neighbors before going deeper |
| Kafka partitions | Consumers process messages in order |
Customer support ticket queue
First submitted ticket gets answered first — classic FIFO fairness.
Customers submit — enqueue at rear.
Real-world implementation
class TicketQueue {
constructor() { this.tickets = [] }
submit(ticket) { this.tickets.push(ticket); return this.tickets.length }
assignNext() { return this.tickets.shift() ?? null }
peekNext() { return this.tickets[0] ?? null }
waitingCount() { return this.tickets.length }
}Full working code for the scenario above.
Function calls with output
| // ── Function calls with output ── | |
| const q = new TicketQueue() | |
| q.submit({ id:"T-101", issue:"Billing" }) | → position 1 |
| q.submit({ id:"T-102", issue:"Login" }) | → position 2 |
Side output shows return value after each call — step through to trace execution.
Summary
Queues give FIFO ordering — essential whenever fairness or level-order processing matters.
Next reads: Queue Types · Queue Applications · DSA Stacks
Subscribe to my newsletter
Stay up to date and get notified when I share new contents.
No spam ever, unsubscribe anytime