Queue Implementation Using Array in DSA Typescript - Execution Trace

Concept Flow - Queue Implementation Using Array

Initialize empty array

↓

Enqueue: Add element at end

↓

Check if dequeue possible?

Yes↓

Dequeue: Remove element from front

↓

Repeat operations as needed

↓

Queue empty? Stop

Shows how elements are added at the end and removed from the front in an array-based queue.

Execution Sample

DSA Typescript

class Queue {
  private items: number[] = [];
  private head: number | null = null;
  private tail: number | null = null;

  enqueue(element: number): void {
    this.items.push(element);
    this.tail = this.items.length - 1;
    if (this.head === null) {
      this.head = 0;
    }
  }

  dequeue(): number | null {
    if (this.head === null || this.head > this.tail!) {
      return null;
    }
    const val = this.items[this.head];
    this.head++;
    if (this.head > this.tail!) {
      this.head = null;
      this.tail = null;
      this.items.length = 0;
    }
    return val;
  }
}

This code adds elements to the end of the array and removes from the front, simulating a queue.

Execution Table

Step	Operation	Nodes in List	Pointer Changes	Visual State
1	Initialize empty queue	[]	head=null, tail=null	null
2	Enqueue 10	[10]	head=0, tail=0	10 -> null
3	Enqueue 20	[10, 20]	head=0, tail=1	10 -> 20 -> null
4	Enqueue 30	[10, 20, 30]	head=0, tail=2	10 -> 20 -> 30 -> null
5	Dequeue	[20, 30]	head=1, tail=2	20 -> 30 -> null
6	Enqueue 40	[20, 30, 40]	head=1, tail=3	20 -> 30 -> 40 -> null
7	Dequeue	[30, 40]	head=2, tail=3	30 -> 40 -> null
8	Dequeue	[40]	head=3, tail=3	40 -> null
9	Dequeue	[]	head=null, tail=null	null
10	Dequeue on empty queue	[]	head=null, tail=null	null

💡 Queue is empty after step 9; step 10 shows dequeue on empty queue returns null.

Variable Tracker

Variable	Start	After 2	After 3	After 4	After 5	After 6	After 7	After 8	After 9	After 10
items	[]	[10]	[10,20]	[10,20,30]	[20,30]	[20,30,40]	[30,40]	[40]	[]	[]
head	null	0	0	0	1	1	2	3	null	null
tail	null	0	1	2	2	3	3	3	null	null

Key Moments - 3 Insights

Why does dequeue remove the first element and not the last?

Because a queue follows FIFO (First In First Out). The execution_table rows 5, 7, 8 show dequeue removing from the front (head) of the array.

What happens when we dequeue from an empty queue?

As shown in step 10 of execution_table, dequeue returns null and the queue remains empty with head and tail as null.

Why do head and tail pointers change after enqueue and dequeue?

Head points to the front element for dequeue, tail points to the last element for enqueue. The variable_tracker shows how these update after each operation.

Visual Quiz - 3 Questions

Look at the execution_table, what is the visual state after step 4?

A 20 -> 30 -> null

B 30 -> 40 -> null

C 10 -> 20 -> 30 -> null

D null

💡 Hint

Check the Visual State column at step 4 in execution_table.

At which step does the queue become empty?

A Step 9

B Step 7

C Step 5

D Step 10

💡 Hint

Look at the Nodes in List column in execution_table to find when it becomes [].

If we enqueue 50 after step 9, what will be the new tail index?

A null

B 0

C 1

D 3

💡 Hint

Refer to variable_tracker for tail values after enqueue operations.

Concept Snapshot

Queue using array:
- Enqueue adds element at array end (push).
- Dequeue removes element from front (advancing head pointer).
- Head points to front, tail to last element.
- FIFO order: first added, first removed.
- Empty queue has head and tail as null.

Full Transcript

This visual trace shows how a queue works using an array. We start with an empty array. Enqueue adds elements at the end, increasing tail index. Dequeue removes elements from the front, moving head index forward. When the queue is empty, both head and tail are null. The execution table tracks each step, showing the array contents and pointer changes. Key moments clarify why dequeue removes from front and what happens when queue is empty. The quiz tests understanding of queue state at different steps.

Practice

1. What is the main characteristic of a queue data structure implemented using an array?

easy

A. It stores elements in sorted order automatically

B. It follows Last-In-First-Out (LIFO) order

C. It allows random access to elements

D. It follows First-In-First-Out (FIFO) order

Solution

1. Step 1: Understand queue behavior

   A queue adds elements at the rear and removes from the front, so the first element added is the first removed.

2. Step 2: Compare with options

   FIFO means First-In-First-Out, which matches queue behavior. LIFO is for stacks, random access is for arrays, and sorting is unrelated.

3. Final Answer:

   It follows First-In-First-Out (FIFO) order -> Option D

4. Quick Check:

   Queue = FIFO [OK]

Hint: Queue always removes the oldest element first [OK]

Common Mistakes:

• Confusing queue with stack (LIFO)
• Thinking queue allows random access
• Assuming queue sorts elements automatically

2. Which of the following is the correct way to add an element `x` to the rear of a queue implemented as an array named `queue` in TypeScript?

easy

A. queue.unshift(x);

B. queue.push(x);

C. queue.shift(x);

D. queue.pop(x);

Solution

1. Step 1: Identify array methods for queue operations

   To add at the rear of the queue, we use the array method that appends elements at the end, which is push().

2. Step 2: Check each option

   push(x) adds x at the end; pop() removes from end; shift() removes from front; unshift() adds at front.

3. Final Answer:

   queue.push(x); -> Option B

4. Quick Check:

   Enqueue = push() [OK]

Hint: Use push() to add at the end of array [OK]

Common Mistakes:

• Using pop() which removes instead of adds
• Using shift() or unshift() incorrectly for enqueue
• Confusing push() with unshift()

3. What will be the output of the following TypeScript code implementing a queue using an array?

const queue: number[] = [];
queue.push(10);
queue.push(20);
const removed = queue.shift();
queue.push(30);
console.log(queue);

medium

A. [20, 30]

B. [10, 20, 30]

C. [30, 20]

D. [10, 30]

Solution

1. Step 1: Trace queue operations step-by-step

   Initially queue = []. After push(10), queue = [10]. After push(20), queue = [10, 20]. shift() removes first element 10, queue = [20]. Then push(30), queue = [20, 30].

2. Step 2: Determine final queue state

   After all operations, queue contains [20, 30].

3. Final Answer:

   [20, 30] -> Option A

4. Quick Check:

   After shift(), first element removed, queue = [20, 30] [OK]

Hint: shift() removes front, push() adds rear [OK]

Common Mistakes:

• Forgetting shift() removes first element
• Assuming push() adds at front
• Confusing order of elements after operations

4. Identify the error in the following TypeScript code for queue implementation using an array:

const queue: number[] = [];
queue.push(1);
queue.push(2);
const removed = queue.pop();
console.log(queue);

medium

A. push() should be replaced with unshift()

B. queue should be declared as a linked list

C. Using pop() removes from rear, not front

D. No error, code works correctly

Solution

1. Step 1: Understand queue removal operation

   Queue removes elements from the front (FIFO). Using pop() removes from the rear (last element), which breaks FIFO.

2. Step 2: Check code behavior

   pop() removes last element (2), but queue should remove first element (1) using shift().

3. Final Answer:

   Using pop() removes from rear, not front -> Option C

4. Quick Check:

   Dequeue = shift(), not pop() [OK]

Hint: Use shift() to remove front element, not pop() [OK]

Common Mistakes:

• Using pop() instead of shift() for dequeue
• Thinking push() adds at front
• Confusing array methods for queue operations

5. You want to implement a queue using a fixed-size array of length 3 in TypeScript. After enqueueing 3 elements, you dequeue one element and then enqueue another. What problem will you face if you do not use a circular queue approach?

hard

A. You cannot enqueue the new element because the rear index reached the array end

B. The queue will automatically resize to fit new elements

C. Dequeue operation will remove the wrong element

D. The queue will lose all previous elements

Solution

1. Step 1: Understand fixed-size array queue behavior

   With a fixed-size array, rear index moves forward on enqueue. After 3 enqueues, rear is at end.

2. Step 2: Analyze enqueue after dequeue without circular logic

   Dequeue moves front forward but rear stays at end. Without circular wrap, rear cannot move back to start, so enqueue fails.

3. Final Answer:

   You cannot enqueue the new element because the rear index reached the array end -> Option A

4. Quick Check:

   Fixed array + no circular = enqueue blocked at end [OK]

Hint: Fixed array needs circular logic to reuse space [OK]

Common Mistakes:

• Assuming array resizes automatically
• Thinking dequeue affects rear index
• Ignoring circular queue necessity