JavaScript Notes

Queue Data Structure in JavaScript — FIFO, Enqueue & Dequeue Explained

Master the Queue data structure in JavaScript. Learn FIFO principle, enqueue/dequeue operations, circular queue, priority queue, real-world examples like task scheduling, and interview Q&A.

A Queue is a linear data structure that follows the FIFO principle — First In, First Out. The first element you add is the first one you remove. Think of a line at a coffee shop: the first person who joined the line gets served first.

💡 Key insight: A queue has two ends — the rear (where you add) and the front (where you remove). Unlike a stack, processing order matches arrival order.

Queue Visualization

Example

ENQUEUE (add to rear) DEQUEUE (remove from front) │ │ ▼ ▼ ┌─────────────────────────┐ ┌──────────────────────┐ │ front → [A] [B] [C] ← rear │ │ [B] [C] ← rear │ └─────────────────────────┘ └──────────────────────┘ After enqueue("D"): After dequeue() returns "A": [A] [B] [C] [D] [B] [C]

Array-Based Queue (Simple)

Example

const queue = []; // Enqueue — add to the back (O(1)) queue.push("Alice"); queue.push("Bob"); queue.push("Charlie"); console.log("Queue:", queue); // Peek — see the front without removing console.log("Front:", queue[0]); // Dequeue — remove from the front (O(n) with shift!) const first = queue.shift(); console.log("Served:", first); console.log("Queue after dequeue:", queue);

Output

"Queue: ['Alice', 'Bob', 'Charlie']"
"Front: Alice"
"Served: Alice"
"Queue after dequeue: ['Bob', 'Charlie']"

⚠️ Performance note: Array.shift() is O(n) — it removes the first element and shifts all remaining elements left. For large queues, use a proper Queue class with head/tail pointers.

Efficient Queue Class (O(1) Enqueue & Dequeue)

Example

class Queue { #items = {}; #head = 0; #tail = 0; enqueue(element) { this.#items[this.#tail] = element; this.#tail++; } dequeue() { if (this.isEmpty()) { throw new Error("Queue underflow — cannot dequeue from empty queue"); } const item = this.#items[this.#head]; delete this.#items[this.#head]; this.#head++; return item; } peek() { if (this.isEmpty()) return null; return this.#items[this.#head]; } isEmpty() { return this.size() === 0; } size() { return this.#tail - this.#head; } clear() { this.#items = {}; this.#head = 0; this.#tail = 0; } toArray() { return Object.values(this.#items); } toString() { return this.toArray().join(" → "); } } const q = new Queue(); q.enqueue("Alice"); q.enqueue("Bob"); q.enqueue("Charlie"); console.log("Size:", q.size()); console.log("Front:", q.peek()); console.log("Dequeue:", q.dequeue()); console.log("Dequeue:", q.dequeue()); console.log("Queue:", q.toString()); console.log("Size:", q.size());

Output

"Size: 3"
"Front: Alice"
"Dequeue: Alice"
"Dequeue: Bob"
"Queue: Charlie"
"Size: 1"

Time & Space Complexity

Operation	Time (Object-based)	Time (Array with shift)
`enqueue`	O(1)	O(1)
`dequeue`	O(1)	O(n)
`peek`	O(1)	O(1)
`isEmpty` / `size`	O(1)	O(1)
Space	O(n)	O(n)

Real-World Application 1: Task Scheduler

Example

class TaskScheduler { #taskQueue = new Queue(); addTask(task) { this.#taskQueue.enqueue(task); console.log(`Task added: "${task.name}"`); } runNext() { if (this.#taskQueue.isEmpty()) { console.log("No tasks in queue"); return; } const task = this.#taskQueue.dequeue(); console.log(`Running: "${task.name}"`); task.execute(); } runAll() { while (!this.#taskQueue.isEmpty()) { this.runNext(); } console.log("All tasks complete"); } } const scheduler = new TaskScheduler(); scheduler.addTask({ name: "Send email", execute: () => console.log("📧 Email sent") }); scheduler.addTask({ name: "Resize image", execute: () => console.log("🖼 Image resized") }); scheduler.addTask({ name: "Generate PDF", execute: () => console.log("📄 PDF generated") }); scheduler.runAll();

Output

'Task added: "Send email"'
'Task added: "Resize image"'
'Task added: "Generate PDF"'
'Running: "Send email"'
"📧 Email sent"
'Running: "Resize image"'
"🖼 Image resized"
'Running: "Generate PDF"'
"📄 PDF generated"
"All tasks complete"

Real-World Application 2: BFS (Breadth-First Search)

Example

Output

"BFS from A: ['A', 'B', 'C', 'D', 'E', 'F']"

JavaScript's Event Loop Queue

JavaScript's event loop uses queues internally:

Example

JavaScript Runtime ├── Call Stack ← synchronous code runs here ├── Microtask Queue ← Promises, queueMicrotask() — processed before next macro └── Macrotask Queue ← setTimeout, setInterval, I/O events Order: Call Stack → All Microtasks → Next Macrotask → ...

Example

console.log("1 - sync"); setTimeout(() => console.log("4 - macrotask"), 0); Promise.resolve().then(() => console.log("2 - microtask")); queueMicrotask(() => console.log("3 - microtask 2")); console.log("5 - sync end");

Output

"1 - sync"
"5 - sync end"
"2 - microtask"
"3 - microtask 2"
"4 - macrotask"

Queue vs Stack

	Queue	Stack
Principle	FIFO (First In, First Out)	LIFO (Last In, First Out)
Add	Rear (enqueue / push)	Top (push)
Remove	Front (dequeue / shift)	Top (pop)
Real-world	Ticket line, printer, BFS	Plates, undo/redo, DFS
JavaScript event loop	✅ Yes	✅ Call stack

When to Use a Queue

✅ Use a queue when:

Processing items in arrival order (fair scheduling)
Breadth-First Search graph traversal
Message queues / event buses
Print spoolers — jobs print in the order they were submitted
Rate limiting — process N requests per second in order
Streaming data — buffer data chunks for ordered processing

❌ Don't use a queue when:

You need LIFO order → use a Stack
You need to access by priority → use a Priority Queue
You need random index access → use an Array

Common Mistakes

Using Array.shift() for high-frequency queues — it's O(n). For performance-critical code, use an object-based queue or linked list.
Confusing queue with stack — queue is FIFO; stack is LIFO.
Not checking isEmpty() before dequeue() — dequeuing from an empty queue returns undefined with arrays, which can cause silent bugs.
Using unshift() to enqueue — it's O(n). Always push to the *end* (rear) and remove from the *front*.

Interview Questions

Q1. What is a queue and what principle does it follow?

A queue is a linear data structure following FIFO — First In, First Out. Elements are added at the rear (enqueue) and removed from the front (dequeue). The first element added is the first one processed.

Q2. Why is Array.shift() inefficient for a queue?

shift() removes the first element and shifts all remaining elements one position left — O(n). For a queue with frequent dequeue operations, use an object with head/tail pointers to achieve O(1) dequeue.

Q3. How does the JavaScript event loop use a queue?

The event loop has a macrotask queue (setTimeout, setInterval, I/O) and a microtask queue (Promises, queueMicrotask). After the call stack is empty, all microtasks drain first (FIFO), then one macrotask is picked from the macrotask queue.

Q4. What is the difference between a queue and a priority queue?

A standard queue processes elements in arrival order (FIFO). A priority queue processes elements by priority — the highest-priority element is dequeued first, regardless of when it was added.

Q5. How do you implement a queue using two stacks?

Use one stack for enqueue (push). For dequeue, if the second stack is empty, pop all elements from the first stack into the second (reversing their order), then pop from the second. Amortised O(1) per operation.

Q6. Where are queues used in real JavaScript applications?

Task schedulers, request throttlers, print spoolers, message queues (RabbitMQ, Kafka), BFS algorithms, JavaScript's own event loop (macrotask/microtask queues), animation frame queues.

Q7. What is a circular queue and why is it used?

A circular queue (ring buffer) reuses freed array slots by wrapping the head/tail pointers modulo the capacity. It fixes the memory waste of a naive fixed-size array queue where head keeps advancing and old positions are never reused.

Key Takeaways

A queue is FIFO — the first element in is the first one out.
Core operations: enqueue (add rear), dequeue (remove front), peek (read front) — all O(1) with an efficient implementation.
Array.shift() is O(n) — use an object-based queue for performance-sensitive code.
Queues power BFS, task schedulers, message brokers, and JavaScript's event loop.
Always check isEmpty() before dequeuing to avoid undefined values or exceptions.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Queue Data Structure in JavaScript — FIFO, Enqueue & Dequeue Explained.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, data, structures, queue

Continue learning this concept

Data StructuresPriority Queue in JavaScript — Min Heap Implementation GuideMaster the Priority Queue data structure in JavaScript using a min-heap. Learn enqueue, dequeue by priority, heap operations, Dijkstra Data StructuresDeque (Double-Ended Queue) in JavaScript — Complete GuideLearn the Deque (Double-Ended Queue) data structure in JavaScript. Add and remove from both ends, implement with arrays and classes, explore sliding window use cases, and answer interview questions.Data StructuresLinked List in JavaScript — Nodes, Pointers & Operations GuideMaster the Linked List data structure in JavaScript. Learn singly and doubly linked lists, node creation, insertions, deletions, traversal, and linked list interview questions with code examples.Data StructuresJavaScript Map — Key-Value Data Structure Complete GuideMaster the JavaScript Map data structure. Learn Map vs Object, set/get/has/delete/iteration, any-type keys, insertion order, WeakMap, and Map interview questions with real code examples.Data StructuresJavaScript Numbers — IEEE 754, Precision, and Number Methods GuideMaster JavaScript Numbers: IEEE 754 floating point, precision issues, NaN, Infinity, BigInt, Number methods like toFixed, parseInt, parseFloat, and numeric interview questions with examples.Data StructuresJavaScript Set — Unique Values Data Structure GuideMaster the JavaScript Set data structure for storing unique values. Learn add, has, delete, iteration, Set operations (union, intersection, difference), WeakSet, and Set interview questions.

PreviousPriority Queue in JavaScript — Min Heap Implementation Guide NextJavaScript Set — Unique Values Data Structure Guide