Peek Front Element of Queue in DSA Javascript - Practice Problems & Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of peeking the front element in this queue?

Consider the following JavaScript code that implements a queue using an array. What will be printed after peeking the front element?

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(element) {
    this.items.push(element);
  }
  dequeue() {
    if(this.isEmpty()) return null;
    return this.items.shift();
  }
  peek() {
    if(this.isEmpty()) return null;
    return this.items[0];
  }
  isEmpty() {
    return this.items.length === 0;
  }
}

const q = new Queue();
q.enqueue(10);
q.enqueue(20);
q.enqueue(30);
console.log(q.peek());

A 10

B 30

C 20

D null

💡 Hint

Peek returns the first element without removing it.

The peek method returns the first element in the queue without removing it. Since 10 was enqueued first, it is at the front.

❓ Predict Output

intermediate

What does this peek operation return after dequeue?

Given the queue implementation below, what will be the output of the peek method after one dequeue operation?

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(element) {
    this.items.push(element);
  }
  dequeue() {
    if(this.isEmpty()) return null;
    return this.items.shift();
  }
  peek() {
    if(this.isEmpty()) return null;
    return this.items[0];
  }
  isEmpty() {
    return this.items.length === 0;
  }
}

const q = new Queue();
q.enqueue(5);
q.enqueue(15);
q.enqueue(25);
q.dequeue();
console.log(q.peek());

A null

B 5

C 25

D 15

💡 Hint

Dequeue removes the first element, so peek shows the next.

After dequeue removes 5, the front element becomes 15, so peek returns 15.

🧠 Conceptual

advanced

What is the time complexity of the peek operation in a queue implemented with an array?

Assuming a queue is implemented using a JavaScript array with enqueue adding to the end and dequeue removing from the front, what is the time complexity of the peek operation?

A O(n) - linear time

B O(1) - constant time

C O(log n) - logarithmic time

D O(n^2) - quadratic time

💡 Hint

Peek just accesses the first element without removing it.

Peek accesses the first element directly by index, which is a constant time operation O(1).

❓ Predict Output

advanced

What error does this peek method cause?

What error will be thrown when calling peek on an empty queue in this code?

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(element) {
    this.items.push(element);
  }
  dequeue() {
    return this.items.shift();
  }
  peek() {
    return this.items[0].value;
  }
}

const q = new Queue();
console.log(q.peek());

A SyntaxError: Unexpected token

B ReferenceError: items is not defined

C TypeError: Cannot read property 'value' of undefined

D No error, outputs undefined

💡 Hint

Accessing property 'value' of undefined causes a TypeError.

Since the queue is empty, items[0] is undefined. Trying to access .value on undefined throws a TypeError.

🚀 Application

expert

After these operations, what is the front element of the queue?

Given the following sequence of operations on a queue, what will peek return?

DSA Javascript

class Queue {
  constructor() {
    this.items = [];
  }
  enqueue(element) {
    this.items.push(element);
  }
  dequeue() {
    if(this.isEmpty()) return null;
    return this.items.shift();
  }
  peek() {
    if(this.isEmpty()) return null;
    return this.items[0];
  }
  isEmpty() {
    return this.items.length === 0;
  }
}

const q = new Queue();
q.enqueue('a');
q.enqueue('b');
q.enqueue('c');
q.dequeue();
q.enqueue('d');
q.dequeue();
console.log(q.peek());

A 'c'

B 'a'

C 'b'

D 'd'

💡 Hint

Track the queue after each operation carefully.

Operations: - enqueue 'a', 'b', 'c' → queue: ['a', 'b', 'c'] - dequeue removes 'a' → queue: ['b', 'c'] - enqueue 'd' → queue: ['b', 'c', 'd'] - dequeue removes 'b' → queue: ['c', 'd'] Peek returns 'c', the front element.

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 a new 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 queue 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 changing queue [OK]

Common Mistakes:

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

2. Which of the following is the correct syntax to peek the front element of a queue named myQueue in JavaScript if it is implemented as an array?

easy

A. myQueue.peek()

B. myQueue[0]

C. myQueue.front()

D. myQueue.getFront()

Solution

1. Step 1: Understand array-based queue front access

   In JavaScript, arrays use index 0 for the first element, so myQueue[0] accesses the front.

2. Step 2: Check other options for validity

   Methods like peek(), front(), or getFront() are not standard array methods.

3. Final Answer:

   myQueue[0] -> Option B

4. Quick Check:

   Array front element = index 0 [OK]

Hint: Use index 0 to peek front in array queue [OK]

Common Mistakes:

• Using non-existent methods on arrays
• Using wrong index like myQueue[1]
• Confusing peek with dequeue method

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

const queue = [];
queue.push(10);
queue.push(20);
queue.push(30);
console.log(queue[0]);

medium

A. 10

B. 20

C. 30

D. undefined

Solution

1. Step 1: Understand queue insertion using push

   Elements 10, 20, 30 are added to the end of the array, so queue = [10, 20, 30].

2. Step 2: Access front element using index 0

   queue[0] returns the first element, which is 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Front element after pushes = 10 [OK]

Hint: Front element is first pushed value at index 0 [OK]

Common Mistakes:

• Thinking last pushed element is front
• Using queue.pop() instead of queue[0]
• Confusing index 0 with index 1

4. Identify the error in the following code that tries to peek the front element of a queue implemented as an array:

const queue = [5, 15, 25];
function peek() {
  return queue.pop();
}
console.log(peek());

medium

A. queue is not defined inside peek()

B. pop() returns undefined for non-empty arrays

C. peek() should use queue.push() instead

D. Using pop() removes the last element instead of peeking the front

Solution

1. Step 1: Understand pop() behavior on arrays

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

2. Step 2: Correct way to peek front element

   To peek front, access queue[0] without removing it.

3. Final Answer:

   Using pop() removes the last element instead of peeking the front -> Option D

4. Quick Check:

   pop() removes last, not front [OK]

Hint: pop() removes last; peek front uses index 0 [OK]

Common Mistakes:

• Using pop() to peek front
• Confusing pop() with shift()
• Trying to push in peek function

5. You have a queue implemented as an array: let q = [100, 200, 300]. You want to peek the front element safely, but the queue might be empty sometimes. Which code snippet correctly peeks the front element without causing an error?

hard

A. console.log(q.pop());

B. console.log(q[0]);

C. console.log(q.length > 0 ? q[0] : 'Queue is empty');

D. console.log(q.shift());

Solution

1. Step 1: Check for empty queue before peeking

   Accessing q[0] when empty returns undefined but may be unclear; better to check length.

2. Step 2: Use conditional to safely peek front

   Using q.length > 0 ? q[0] : 'Queue is empty' returns front if exists, else message.

3. Final Answer:

   console.log(q.length > 0 ? q[0] : 'Queue is empty'); -> Option C

4. Quick Check:

   Safe peek uses length check before access [OK]

Hint: Check length before peek to avoid errors [OK]

Common Mistakes:

• Peeking without checking empty queue
• Using pop() or shift() which remove elements
• Assuming q[0] always exists