Why Peek Top Element of Stack in DSA Typescript?

The Big Idea

What if you could see the top of your stack without touching it at all?

The Scenario

Imagine you have a stack of books on your desk. You want to see the title of the book on the very top without removing it. You try to pick up each book one by one to check, but that takes time and might mess up the order.

The Problem

Manually checking the top book means moving books around, which is slow and can cause mistakes like dropping or mixing the order. It's hard to quickly see the top without disturbing the stack.

The Solution

The peek operation lets you look at the top item of the stack instantly without removing it. It's like having a magic window to see the top book's title without touching the stack.

Before vs After

✗ Before

if (stack.length > 0) {
  const topBook = stack[stack.length - 1];
  console.log(topBook);
}

✓ After

function peek(stack: string[]): string | undefined {
  return stack[stack.length - 1];
}
console.log(peek(stack));

What It Enables

Peek makes it easy and safe to check the top item anytime without changing the stack's order.

Real Life Example

When undoing actions in a text editor, peek helps to see the last action without removing it, so you can decide if you want to undo it or not.

Key Takeaways

Manual checking of the top is slow and risky.

Peek lets you see the top item instantly without removal.

This keeps the stack safe and easy to use.

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