Peek Front Element of Queue in DSA Typescript - Execution Trace

Concept Flow - Peek Front Element of Queue

Start with Queue

↓

Check if Queue is empty?

Yes→Return null

No↓

Access front element

↓

Return front element

↓

End

This flow shows checking if the queue has elements, then accessing and returning the front element without removing it.

Execution Sample

DSA Typescript

class Queue {
  items: number[] = [];
  peek(): number | null {
    if (this.items.length === 0) return null;
    return this.items[0];
  }
}

const q = new Queue();
q.items.push(10, 20, 30);
console.log(q.peek());

This code defines a queue and peeks at the front element, printing it without removing.

Execution Table

Step	Operation	Queue State	Pointer Changes	Visual State
1	Initialize empty queue	[]	front=null, rear=null	null <- [] -> null
2	Enqueue 10	[10]	front=0, rear=0	front -> 10 -> rear
3	Enqueue 20	[10, 20]	front=0, rear=1	front -> 10 -> 20 -> rear
4	Enqueue 30	[10, 20, 30]	front=0, rear=2	front -> 10 -> 20 -> 30 -> rear
5	Peek front element	[10, 20, 30]	front=0, rear=2	front -> 10 -> 20 -> 30 -> rear
6	Return front element	[10, 20, 30]	front=0, rear=2	front -> 10 -> 20 -> 30 -> rear
7	End	[10, 20, 30]	front=0, rear=2	front -> 10 -> 20 -> 30 -> rear

💡 Peek returns the element at front index 0 without removing it.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
items	[]	[10]	[10, 20]	[10, 20, 30]	[10, 20, 30]	[10, 20, 30]
front	null	0	0	0	0	0
rear	null	0	1	2	2	2
peekedElement	undefined	undefined	undefined	undefined	10	10

Key Moments - 3 Insights

Why do we check if the queue is empty before peeking?

Because if the queue is empty (see Step 1), there is no front element to return. The execution_table row 1 shows front and rear as null, so peeking returns null to avoid errors.

Does peeking remove the front element from the queue?

No, peeking only reads the front element without removing it. The queue state stays the same after peeking (see Steps 5 and 6 in execution_table).

What does the 'front' pointer represent during peek?

The 'front' pointer indicates the index of the first element in the queue. During peek (Step 5), it remains at 0, showing the element at index 0 is returned.

Visual Quiz - 3 Questions

Look at the execution_table at Step 5, what is the queue state?

A [10, 20, 30]

B [20, 30]

C []

D [30]

💡 Hint

Check the 'Queue State' column at Step 5 in execution_table.

At which step does the queue first contain three elements?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Queue State' column and find when it shows three elements.

If the queue was empty, what would peek() return according to the execution?

A The first element

B null

C undefined

D An error

💡 Hint

See Step 1 and the check for empty queue in the concept_flow.

Concept Snapshot

Peek Front Element of Queue:
- Check if queue is empty first.
- If empty, return null (no element).
- Otherwise, return element at front index.
- Does NOT remove element from queue.
- Front pointer stays same after peek.

Full Transcript

This visualization shows how to peek the front element of a queue. First, the queue is checked if empty. If empty, peek returns null. Otherwise, it returns the element at the front pointer without removing it. The queue state remains unchanged after peeking. The front pointer points to the first element index. This operation is useful to see the next element to process without modifying the queue.

Practice

1. What does the peek operation do in a queue?

easy

A. Returns the front element without removing it

B. Removes the front element from the queue

C. Adds an element to the back of the queue

D. Checks if the queue is empty

Solution

1. Step 1: Understand the peek operation

   The peek operation looks at the front element of the queue but does not remove it.

2. Step 2: Compare with other operations

   Removing is done by dequeue, adding by enqueue, and checking empty is a separate check.

3. Final Answer:

   Returns the front element without removing it -> Option A

4. Quick Check:

   Peek = front element without removal [OK]

Hint: Peek shows front without removal [OK]

Common Mistakes:

• Confusing peek with dequeue
• Thinking peek adds elements
• Assuming peek checks emptiness

2. Which of the following is the correct TypeScript syntax to peek the front element of a queue implemented as an array named queue?

easy

A. const front = queue.pop();

B. const front = queue.shift();

C. const front = queue.push();

D. const front = queue[0];

Solution

1. Step 1: Understand array methods for queue

   In a queue using an array, the front element is at index 0.

2. Step 2: Identify correct syntax for peek

   Accessing queue[0] returns the front without removing it. pop() removes from end, shift() removes from front, push() adds to end.

3. Final Answer:

   const front = queue[0]; -> Option D

4. Quick Check:

   Peek = queue[0] [OK]

Hint: Peek front is queue[0], not pop or shift [OK]

Common Mistakes:

• Using pop() which removes last element
• Using shift() which removes front element
• Using push() which adds element

3. What will be the output of the following TypeScript code?

const queue: number[] = [10, 20, 30];
const front = queue[0];
console.log(front);
console.log(queue);

medium

A. undefined
[10, 20, 30]

B. 10
[20, 30]

C. 10
[10, 20, 30]

D. 30
[10, 20, 30]

Solution

1. Step 1: Peek front element from queue array

   Accessing queue[0] returns 10, the first element.

2. Step 2: Check if queue is modified

   Since we only accessed queue[0], the array remains unchanged as [10, 20, 30].

3. Final Answer:

   10 [10, 20, 30] -> Option C

4. Quick Check:

   Peek returns 10, queue unchanged [OK]

Hint: Peek does not remove, queue stays same [OK]

Common Mistakes:

• Assuming peek removes element
• Confusing front with last element
• Expecting undefined for valid index

4. Identify the error in this TypeScript code that tries to peek the front element of a queue:

class Queue {
  items: number[] = [];
  peek() {
    return this.items.pop();
  }
}

medium

A. pop() removes last element, should use items[0]

B. pop() is correct for peek operation

C. items array should be private

D. peek method should return void

Solution

1. Step 1: Understand pop() behavior

   pop() removes and returns the last element, not the front.

2. Step 2: Correct way to peek front

   To peek front, return this.items[0] without removing it.

3. Final Answer:

   pop() removes last element, should use items[0] -> Option A

4. Quick Check:

   pop() ≠ peek front [OK]

Hint: pop() removes last, peek front is items[0] [OK]

Common Mistakes:

• Using pop() for peek
• Not returning front element correctly
• Ignoring array indexing

5. You have a queue implemented as a linked list with nodes having value and next. How do you peek the front element safely when the queue might be empty?

hard

A. Return head.value directly without checks

B. Check if head is null; if not, return head.value, else return null

C. Traverse to the last node and return its value

D. Remove the head node and return its value

Solution

1. Step 1: Understand linked list queue front

   The front element is at the head node of the linked list.

2. Step 2: Handle empty queue case

   If head is null, queue is empty, so return null or undefined safely.

3. Step 3: Return front value safely

   If head exists, return head.value without removing the node.

4. Final Answer:

   Check if head is null; if not, return head.value, else return null -> Option B

5. Quick Check:

   Peek front safely = check head then return value [OK]

Hint: Check head null before peek to avoid errors [OK]

Common Mistakes:

• Not checking for empty queue
• Returning value without null check
• Removing node instead of peeking