Peek Front Element of Queue in DSA Javascript - Build from Scratch

Peek Front Element of Queue

📖 Scenario: You are managing a line of customers waiting to buy tickets at a movie theater. You want to check who is at the front of the line without removing them.

🎯 Goal: Build a simple queue using an array and write code to peek at the front element (the first customer in line) without removing them.

📋 What You'll Learn

Create a queue array with exact customers in order

Create a variable to hold the front element

Write code to peek at the front element without removing it

Print the front element

💡 Why This Matters

🌍 Real World

Queues are used in real life to manage lines, like customers waiting for service or tasks waiting to be processed.

💼 Career

Understanding queues is important for software developers to manage data flow, scheduling, and resource management efficiently.

1

Create the queue array

Create an array called queue with these exact customers in order: 'Alice', 'Bob', 'Charlie', 'Diana'.

DSA Javascript

// Create the queue array with the customers
// Your code here

Hint

Use square brackets [] to create an array and separate names with commas.

2

Create a variable for the front element

Create a variable called front and set it to null for now.

DSA Javascript

const queue = ['Alice', 'Bob', 'Charlie', 'Diana'];
// Create a variable called front and set it to null
// Your code here

Hint

Use let to create a variable that can change later.

3

Peek the front element of the queue

Set the variable front to the first element of the queue array without removing it.

DSA Javascript

const queue = ['Alice', 'Bob', 'Charlie', 'Diana'];
let front = null;
// Set front to the first element of queue without removing it
// Your code here

Hint

Use queue[0] to access the first element of the array.

4

Print the front element

Print the value of the variable front using console.log.

DSA Javascript

const queue = ['Alice', 'Bob', 'Charlie', 'Diana'];
let front = null;
front = queue[0];
// Print the front element
// Your code here

Hint

Use console.log(front); to print 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