Peek Top Element of Stack in DSA Typescript - 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 has elements. If empty, it returns a message. Otherwise, it accesses and returns the top element without removing it.

Execution Sample

DSA Typescript

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

This code gets the top element of a stack represented by an array and prints it.

Execution Table

Step	Operation	Stack State	Pointer Changes	Visual State
1	Start peek operation	[10, 20, 30]	top pointer undefined	Stack: 10 -> 20 -> 30 -> null
2	Check if stack is empty	[10, 20, 30]	top pointer undefined	Stack: 10 -> 20 -> 30 -> null
3	Stack not empty, access top element	[10, 20, 30]	top pointer at index 2	Stack: 10 -> 20 -> 30 (top) -> null
4	Return top element (30)	[10, 20, 30]	top pointer at index 2	Stack: 10 -> 20 -> 30 (top) -> null
5	End peek operation	[10, 20, 30]	top pointer at index 2	Stack unchanged

💡 Peek ends after returning the top element without modifying the stack.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
stack	[10, 20, 30]	[10, 20, 30]	[10, 20, 30]	[10, 20, 30]
top pointer	undefined	undefined	2 (points to 30)	2 (points to 30)
top element	undefined	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 the 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 remains 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 (stack.length - 1) as the top pointer, as shown in variable_tracker after step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the top pointer value at step 3?

A 0

B 2

C undefined

D length of stack

💡 Hint

Check the 'Pointer Changes' column at step 3 in the execution_table.

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

A Step 2

B Step 4

C Step 1

D Step 5

💡 Hint

Look at the 'Operation' column in execution_table where the empty check happens.

If the stack was empty, what would the visual state show at step 2?

A Stack: 10 -> 20 -> 30 -> null

B Stack: 30 (top) -> null

C Stack: empty -> null

D Stack unchanged

💡 Hint

Infer from the concept_flow ascii diagram for the empty stack scenario.

Concept Snapshot

Peek Top Element of Stack:
- Check if stack is empty first.
- If not empty, access element at stack.length - 1.
- Return this element without removing it.
- Stack remains unchanged after peek.
- Useful to see top without modifying stack.

Full Transcript

To peek the top element of a stack, first check if the stack is empty to avoid errors. If it is not empty, access the last element using the index stack.length - 1. This element is the top of the stack. Return it without removing it, so the stack stays the same. This operation helps to see the top value without changing the stack contents.

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 supports push (add), pop (remove), and peek (view) operations.

2. Step 2: Define peek operation

   Peek returns the top element without removing it, unlike pop which removes it.

3. Final Answer:

   Returns the top element without removing it -> Option A

4. Quick Check:

   Peek = view top element only [OK]

Hint: Peek shows top without removing it [OK]

Common Mistakes:

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

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

easy

A. stack[stack.length - 1]

B. stack.peek()

C. stack.pop()

D. stack.top()

Solution

1. Step 1: Recall array indexing for top element

   The top element of a stack implemented as an array is at index length - 1.

2. Step 2: Identify correct syntax

   Accessing stack[stack.length - 1] returns the top element without removing it.

3. Final Answer:

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

4. Quick Check:

   Array top = stack[length - 1] [OK]

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

Common Mistakes:

• Using pop() which removes element
• Using non-existent peek() method on array
• Using top() which is not a standard method

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

const stack: number[] = [];
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack[stack.length - 1]);

medium

A. 10

B. 20

C. 30

D. undefined

Solution

1. Step 1: Trace stack push operations

   Elements pushed in order: 10, then 20, then 30. Stack is [10, 20, 30].

2. Step 2: Access top element using stack[stack.length - 1]

   stack.length is 3, so index 2 is top element which is 30.

3. Final Answer:

   30 -> Option C

4. Quick Check:

   Top element after pushes = 30 [OK]

Hint: Last pushed element is top [OK]

Common Mistakes:

• Confusing first pushed element as top
• Using pop() instead of peek
• Off-by-one error in index

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

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

medium

A. Missing return type in peek function

B. stack array is not initialized properly

C. peek function should return stack[0]

D. Using pop() removes the top element instead of just peeking

Solution

1. Step 1: Understand pop() behavior

   pop() removes and returns the top element, modifying the stack.

2. Step 2: Identify peek operation requirement

   Peek should return the top element without removing it, so pop() is incorrect here.

3. Final Answer:

   Using pop() removes the top element instead of just peeking -> Option D

4. Quick Check:

   pop() removes element, peek should not [OK]

Hint: Peek must not remove element; pop() does [OK]

Common Mistakes:

• Using pop() instead of accessing last element
• Returning stack[0] which is bottom element
• Ignoring side effects of pop()

5. You have a stack implemented as an array stack. You want to safely peek the top element but return null if the stack is empty to avoid errors. Which TypeScript code snippet correctly does this?

hard

A. return stack.pop() || null;

B. return stack.length ? stack[stack.length - 1] : null;

C. return stack[0] || null;

D. return stack[stack.length];

Solution

1. Step 1: Check if stack is empty

   Use stack.length to verify if stack has elements.

2. Step 2: Return top element or null

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

3. Final Answer:

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

4. Quick Check:

   Safe peek with empty check = return stack.length ? stack[stack.length - 1] : null; [OK]

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

Common Mistakes:

• Using pop() which removes element
• Accessing stack[0] which is bottom element
• Accessing stack[stack.length] which is undefined