Peek Top Element of Stack in DSA Typescript

Mental Model

A stack is like a pile of plates where you can only see and take the top plate. Peeking means looking at the top plate without removing it.

Analogy: Imagine a stack of books on a table. You can only see the top book and peek means just looking at the title of the top book without taking it off.

Stack (top on right): bottom -> 1 -> 2 -> 3 -> top ↑

Dry Run Walkthrough

Input: stack: push 1, push 2, push 3, peek top element

Goal: To see the top element of the stack without removing it

Step 1: push 1 onto stack

bottom -> 1 ↑top

Why: We add the first element; it becomes the top

Step 2: push 2 onto stack

bottom -> 1 -> 2 ↑top

Why: New element goes on top, previous top moves down

Step 3: push 3 onto stack

bottom -> 1 -> 2 -> 3 ↑top

Why: Add another element on top

Step 4: peek top element

bottom -> 1 -> 2 -> 3 ↑top (peeked value: 3)

Why: Look at top element without removing it

Result:

bottom -> 1 -> 2 -> 3 ↑top
peeked value: 3

Annotated Code

DSA Typescript

class Stack {
  private items: number[] = [];

  push(element: number): void {
    this.items.push(element); // add element on top
  }

  peek(): number | null {
    if (this.items.length === 0) {
      return null; // empty stack check
    }
    return this.items[this.items.length - 1]; // return top element
  }

  printStack(): void {
    console.log(this.items.join(' -> ') + ' ↑top');
  }
}

// Driver code
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.printStack();
const top = stack.peek();
console.log('peeked value:', top);

this.items.push(element); // add element on top

push element to top of stack

if (this.items.length === 0) { return null; }

check if stack is empty before peek

return this.items[this.items.length - 1]; // return top element

return top element without removing it

Output

1 -> 2 -> 3 ↑top

peeked value: 3

Complexity Analysis

Time: O(1) because peek just accesses the last element directly without looping

Space: O(n) because stack stores n elements in an array

vs Alternative: Compared to popping, peek does not remove elements so it is faster and safer when you only need to see the top

Edge Cases

empty stack

peek returns null indicating no elements

DSA Typescript

if (this.items.length === 0) { return null; }

When to Use This Pattern

When you need to check the last added item without removing it, use the peek operation on a stack.

Common Mistakes

Mistake: Trying to peek by popping which removes the element
Fix: Use direct access to the last element without removing it

Summary

Peek returns the top element of the stack without removing it.

Use peek when you want to see the current top without changing the stack.

Remember: peek looks at the last added item without taking it off.

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