Push Operation on Stack in DSA Typescript - Execution Trace

Concept Flow - Push Operation on Stack

Create new element

↓

Check if stack is empty?

No↓

Set new element's next to current top

↓

Update top pointer to new element

↓

Done

This flow shows how a new element is added on top of the stack by linking it to the previous top and updating the top pointer.

Execution Sample

DSA Typescript

class StackNode {
  constructor(public value: number, public next: StackNode | null = null) {}
}

class Stack {
  top: StackNode | null = null;
  push(value: number) {
    const newNode = new StackNode(value, this.top);
    this.top = newNode;
  }
}

This code defines a stack with a push method that adds a new value on top by creating a new node linked to the current top.

Execution Table

Step	Operation	Nodes in Stack	Pointer Changes	Visual State
1	Start with empty stack	None	top = null	top -> null
2	Push 10	10	newNode.next = null; top = newNode	top -> 10 -> null
3	Push 20	20 -> 10	newNode.next = 10; top = newNode	top -> 20 -> 10 -> null
4	Push 30	30 -> 20 -> 10	newNode.next = 20; top = newNode	top -> 30 -> 20 -> 10 -> null
5	End of push operations	30 -> 20 -> 10	top points to 30	top -> 30 -> 20 -> 10 -> null

💡 All push operations completed, stack top updated each time.

Variable Tracker

Variable	Start	After Push 10	After Push 20	After Push 30	Final
top	null	Node(10)	Node(20)	Node(30)	Node(30)
newNode.value	-	10	20	30	30
newNode.next	-	null	Node(10)	Node(20)	Node(20)

Key Moments - 3 Insights

Why does the new node's next point to the current top before updating top?

Because the new node must link to the previous top to keep the stack order. See execution_table step 3 where newNode.next points to 10 before top updates to newNode.

What happens if the stack is empty when pushing the first element?

The new node's next is set to null since there is no top. This is shown in execution_table step 2 where newNode.next = null.

Why do we update the top pointer after setting newNode.next?

Updating top last ensures the new node correctly points to the old top before top changes. This order is critical as shown in steps 2-4.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what does the pointer 'top' point to after pushing 20?

A Node with value 10

B Node with value 20

C Node with value 30

D null

💡 Hint

Check the 'Pointer Changes' and 'Visual State' columns at step 3.

At which step does the stack first contain more than one node?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Nodes in Stack' column to see when multiple nodes appear.

If we push a new value 40 after step 4, what will 'top.next.value' be?

A 40

B 20

C 30

D null

💡 Hint

After pushing 40, top points to 40, and top.next points to the previous top (30).

Concept Snapshot

Push Operation on Stack:
- Create a new node with the value
- Set new node's next to current top
- Update top pointer to new node
- Stack grows by adding on top
- Last-in, first-out order maintained

Full Transcript

This visual trace shows how the push operation adds elements to a stack. We start with an empty stack where top is null. When pushing a value, a new node is created. Its next pointer links to the current top node to keep the chain. Then the top pointer updates to this new node, making it the new top of the stack. This process repeats for each push, growing the stack upwards. The execution table tracks each step, showing nodes in the stack, pointer changes, and the visual linked list state. Variable tracking shows how top and newNode pointers change after each push. Key moments clarify why the new node links before top updates and what happens when the stack is empty. The quiz tests understanding of pointer updates and stack structure after pushes. This step-by-step visualization helps beginners see how the stack physically changes during push operations.

Practice

1. What does the push operation do in a stack data structure?

easy

A. Returns the bottom element of the stack

B. Removes the top element from the stack

C. Adds an element to the top of the stack

D. Checks if the stack is empty

Solution

1. Step 1: Understand stack behavior

   A stack follows Last In First Out (LIFO) principle, where elements are added or removed from the top.

2. Step 2: Define push operation

   The push operation adds a new element on top of the existing elements in the stack.

3. Final Answer:

   Adds an element to the top of the stack -> Option C

4. Quick Check:

   Push = Add top [OK]

Hint: Push always adds on top of stack [OK]

Common Mistakes:

• Confusing push with pop operation
• Thinking push removes elements
• Mixing stack with queue operations

2. Which of the following is the correct TypeScript syntax to push an element 5 into a stack array named stack?

easy

A. stack.push(5);

B. stack.add(5);

C. push(stack, 5);

D. stack.insert(5);

Solution

1. Step 1: Recall TypeScript array push method

   In TypeScript, arrays have a built-in method push() to add elements at the end (top for stack).

2. Step 2: Match syntax

   The correct syntax is calling push on the array with the element as argument: stack.push(5);

3. Final Answer:

   stack.push(5); -> Option A

4. Quick Check:

   Array push method = stack.push(value) [OK]

Hint: Use array.push(element) to push [OK]

Common Mistakes:

• Using non-existent methods like add or insert
• Calling push as a standalone function
• Forgetting parentheses after push

3. What will be the content of the stack after executing the following TypeScript code?

const stack: number[] = [];
stack.push(10);
stack.push(20);
stack.push(30);

medium

A. [30, 20, 10]

B. [10, 20, 30]

C. [10, 30, 20]

D. [20, 10, 30]

Solution

1. Step 1: Trace each push operation

   Initially, stack is empty []. After push(10), stack = [10]. After push(20), stack = [10, 20]. After push(30), stack = [10, 20, 30].

2. Step 2: Understand stack order

   The first pushed element is at index 0, last pushed at the end. So the array shows bottom to top as left to right.

3. Final Answer:

   [10, 20, 30] -> Option B

4. Quick Check:

   Push order = [10, 20, 30] [OK]

Hint: Stack array shows bottom to top left to right [OK]

Common Mistakes:

• Reversing the order of elements
• Confusing push with pop output
• Assuming push adds at start of array

4. Identify the error in the following TypeScript code that tries to push an element into a stack:

let stack: number[] = [1, 2, 3];
stack.push 4;

medium

A. Missing parentheses after push

B. Stack should be declared as const

C. push cannot be used on arrays

D. Missing semicolon after array declaration

Solution

1. Step 1: Check push method syntax

   The push method requires parentheses to pass the element: stack.push(4);. The code uses stack.push 4; which is invalid.

2. Step 2: Verify other parts

   Declaring stack with let is valid. push is valid on arrays. Semicolon is optional but not an error here.

3. Final Answer:

   Missing parentheses after push -> Option A

4. Quick Check:

   push() needs parentheses [OK]

Hint: Always use parentheses with push method [OK]

Common Mistakes:

• Omitting parentheses on method calls
• Thinking push is a property, not a method
• Confusing let and const errors

5. Given a stack implemented as an array, how can you push multiple elements [4, 5, 6] onto the stack in one operation while preserving their order (4 at bottom, 6 at top)?

hard

A. Use stack.unshift(...[4, 5, 6])

B. Use stack.push([4, 5, 6])

C. Use a loop to push each element from left to right

D. Use stack.push(...[4, 5, 6])

Solution

1. Step 1: Understand spread operator with push

   Using stack.push(...[4, 5, 6]) spreads the array elements as separate arguments, pushing 4, then 5, then 6 in order.

2. Step 2: Compare other options

   stack.push([4, 5, 6]) pushes the entire array as one element, not separate elements.
   Looping works but is multiple operations, not one.
   unshift adds elements at the start, not top of stack.

3. Final Answer:

   Use stack.push(...[4, 5, 6]) -> Option D

4. Quick Check:

   Spread operator with push adds multiple elements [OK]

Hint: Use spread operator ... with push for multiple elements [OK]

Common Mistakes:

• Pushing array as single element instead of separate
• Using unshift which adds at bottom
• Forgetting spread operator syntax