Peek Top Element of Stack in DSA Javascript - Execution Trace

Concept Flow - Peek Top Element of Stack

Start

↓

Check if stack is empty?

Yes→Return 'Stack is empty'

No↓

Access top element

↓

Return top element

↓

End

The flow checks if the stack is empty first. If not, it accesses and returns the top element without removing it.

Execution Sample

DSA Javascript

const stack = [10, 20, 30];
if (stack.length === 0) {
  console.log('Stack is empty');
} else {
  const top = stack[stack.length - 1];
  console.log(top);
}

This code checks if the stack is empty before getting the top element of the stack array and printing it.

Execution Table

Step	Operation	Stack State	Pointer Changes	Visual State
1	Start with stack	[10, 20, 30]	top pointer not set	Bottom -> 10 -> 20 -> 30 (top)
2	Check if stack is empty	[10, 20, 30]	No change	Stack not empty
3	Access top element	[10, 20, 30]	top = index 2	Top element is 30
4	Return top element	[10, 20, 30]	top pointer unchanged	Output: 30
5	End	[10, 20, 30]	No change	Stack unchanged

💡 Stack is not empty, so top element 30 is returned without modifying the stack

Variable Tracker

Variable	Start	After Step 3	Final
stack	[10, 20, 30]	[10, 20, 30]	[10, 20, 30]
top	undefined	30	30

Key Moments - 3 Insights

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

Because if the stack is empty, there is no top element to return. The execution_table row 2 shows this check to avoid errors.

Does peeking remove the top element from the stack?

No, peeking only reads the top element without removing it. The stack state stays the same as shown in rows 3 and 5.

How do we find the top element in an array-based stack?

We use the last index, which is stack.length - 1, as shown in step 3 where top = index 2 for stack of length 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'top' after step 3?

A 20

B 30

C 10

D undefined

💡 Hint

Check the 'top' variable value in variable_tracker after step 3.

At which step does the code confirm the stack is not empty?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Operation' column in execution_table for the empty check.

If the stack was empty, what would happen in the flow?

A Return 'Stack is empty' message

B Return the last element anyway

C Remove an element

D Add a new element

💡 Hint

Refer to the concept_flow where empty stack leads to a return message.

Concept Snapshot

Peek Top Element of Stack:
- Check if stack is empty first
- If empty, return message or error
- Else, access element at stack.length - 1
- Return this element without removing it
- Stack remains unchanged after peek

Full Transcript

To peek the top element of a stack, first check if the stack is empty. If it is, return a message indicating the stack is empty. If not, access the element at the last index of the stack array, which is stack.length - 1. This element is the top of the stack. Return this element without removing it, so the stack stays the same. This process is shown step-by-step in the execution table and variable tracker.

Practice

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

easy

A. Returns the top element without removing it

B. Removes the top element and returns it

C. Adds a new element to the top

D. Checks if the stack is empty

Solution

1. Step 1: Understand stack operations

   A stack stores elements with last-in, first-out order. Peek shows the top element without removing it.

2. Step 2: Differentiate peek from pop

   Pop removes and returns the top element, peek only returns it without removal.

3. Final Answer:

   Returns the top element without removing it -> Option A

4. Quick Check:

   Peek = top element without removal [OK]

Hint: Peek shows top without removing it [OK]

Common Mistakes:

• Confusing peek with pop operation
• Thinking peek adds elements
• Assuming peek checks emptiness

2. Which of the following is the correct syntax to peek the top element of a stack implemented as an array named stack in JavaScript?

easy

A. stack.peek()

B. stack.pop()

C. stack[stack.length - 1]

D. stack.top()

Solution

1. Step 1: Understand JavaScript array indexing

   JavaScript arrays use zero-based indexing. The last element is at index length - 1.

2. Step 2: Identify correct peek syntax

   To peek, access the last element without removing it: stack[stack.length - 1]. stack.pop() removes the element, stack.peek() and stack.top() are not default methods.

3. Final Answer:

   stack[stack.length - 1] -> Option C

4. Quick Check:

   Peek = stack[stack.length - 1] [OK]

Hint: Use stack[stack.length - 1] to peek top [OK]

Common Mistakes:

• Using stack.pop() which removes element
• Using non-existent methods like peek() or top()
• Accessing stack[stack.length] which is undefined

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

const stack = [10, 20, 30];
const top = stack[stack.length - 1];
console.log(top);

medium

A. 10

B. 30

C. 20

D. undefined

Solution

1. Step 1: Identify the stack elements and length

   The stack array is [10, 20, 30]. Its length is 3.

2. Step 2: Calculate the top element index and value

   stack.length - 1 = 3 - 1 = 2. stack[2] is 30.

3. Final Answer:

   30 -> Option B

4. Quick Check:

   Top element = 30 [OK]

Hint: Top element is last array item: stack[length-1] [OK]

Common Mistakes:

• Using stack[stack.length] which is undefined
• Confusing first element with top element
• Printing stack.pop() instead of peek

4. Find the error in this code snippet that tries to peek the top element of a stack:

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

medium

A. stack.length should be stack.length - 1

B. stack is not defined

C. peek function should remove the element

D. console.log is missing parentheses

Solution

1. Step 1: Analyze the peek function index

   stack.length returns the number of elements, but array indices go from 0 to length - 1.

2. Step 2: Correct the index to access top element

   Use stack.length - 1 to get the last element. Using stack.length returns undefined.

3. Final Answer:

   stack.length should be stack.length - 1 -> Option A

4. Quick Check:

   Index = length - 1 for top element [OK]

Hint: Use length - 1 to access last element [OK]

Common Mistakes:

• Using stack.length as index causing undefined
• Thinking peek removes element
• Missing parentheses in console.log (not in this code)

5. Given a stack implemented as an array, how can you safely peek the top element without causing an error if the stack is empty?

function safePeek(stack) {
  // Your code here
}

hard

A. return stack[stack.length];

B. return stack[0];

C. return stack.pop();

D. return stack.length > 0 ? stack[stack.length - 1] : null;

Solution

1. Step 1: Check if stack is empty

   Before accessing the top element, verify stack length is greater than zero to avoid undefined access.

2. Step 2: Return top element or null safely

   If stack is not empty, return stack[stack.length - 1], else return null to indicate empty stack.

3. Final Answer:

   return stack.length > 0 ? stack[stack.length - 1] : null; -> Option D

4. Quick Check:

   Safe peek uses length check and conditional [OK]

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

Common Mistakes:

• Accessing stack[stack.length] causing undefined
• Using pop which removes element
• Returning stack[0] which is bottom, not top