Push Operation on Stack in DSA Javascript - 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

The push operation adds a new element on top of the stack by linking it to the previous top and updating the top pointer.

Execution Sample

DSA Javascript

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

let top = null;

const push = (value) => {
  const newNode = new Node(value);
  newNode.next = top;
  top = newNode;
};

push(10);
push(20);
push(30);

This code adds three elements (10, 20, 30) to the stack one by one using push.

Execution Table

Step	Operation	Nodes in Stack	Pointer Changes	Visual State
1	Push 10	10	top -> 10	10 -> null
2	Push 20	20 -> 10	top -> 20	20 -> 10 -> null
3	Push 30	30 -> 20 -> 10	top -> 30	30 -> 20 -> 10 -> null
4	End	30 -> 20 -> 10	top -> 30	30 -> 20 -> 10 -> null

💡 All elements pushed; top points to last pushed element 30

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
top	null	Node(10)	Node(20)	Node(30)	Node(30)
stack size	0	1	2	3	3

Key Moments - 3 Insights

Why does the new element point to the previous top?

Because the new element must link to the current top to keep the stack order. See execution_table step 2 and 3 where the new top points to the previous nodes.

What happens if the stack is empty before push?

The new element becomes the top with next as null. See execution_table step 1 where top was null and after push points to Node(10).

Why do we update the top pointer after linking?

We update top last to keep the stack consistent. If we updated top first, we would lose the link to the previous stack. See pointer changes column in execution_table steps.

Visual Quiz - 3 Questions

Look at the execution_table, what is the top pointer after step 2?

A Node(20)

B Node(10)

C Node(30)

D null

💡 Hint

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

At which step does the stack size become 3 according to variable_tracker?

A After 1

B After 2

C After 3

D Final

💡 Hint

Look at the 'stack size' row in variable_tracker and find when it reaches 3.

If we push a new element 40 after step 3, what will be the new visual state?

A 10 -> 20 -> 30 -> 40 -> null

B 40 -> 30 -> 20 -> 10 -> null

C 30 -> 20 -> 10 -> 40 -> null

D 40 -> null

💡 Hint

New element becomes top and points to previous top; check pattern in execution_table visual states.

Concept Snapshot

Push Operation on Stack:
- Create new node with value
- Link new node's next to current top
- Update top pointer to new node
- Stack grows by adding on top
- Visual: new -> old -> ... -> null

Full Transcript

The push operation adds a new element on top of the stack. First, a new node is created with the value to push. If the stack is empty, this new node becomes the top with next as null. Otherwise, the new node's next points to the current top node. Then, the top pointer is updated to this new node. This keeps the stack order intact, with the newest element always on top. The execution table shows each push step updating the top and linking nodes. The variable tracker shows how the top pointer and stack size change after each push. Key moments clarify why linking happens before updating top and what happens when the stack is empty. The visual quiz tests understanding of pointer updates and stack state after pushes.

Practice

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

easy

A. Checks if the stack is empty

B. Removes the top element from the stack

C. Returns the bottom element of the stack

D. Adds an element to the top of the stack

Solution

1. Step 1: Understand stack operations

   A stack follows Last In First Out (LIFO). The push operation adds an element on top.

2. Step 2: Identify the role of push

   It inserts a new element at the top, increasing stack size by one.

3. Final Answer:

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

4. Quick Check:

   Push = Add top element [OK]

Hint: Push means add 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 syntax to push an element 5 into a stack array named stack in JavaScript?

easy

A. stack.add(5);

B. stack.push(5);

C. push.stack(5);

D. stack.insert(5);

Solution

1. Step 1: Recall JavaScript array push syntax

   JavaScript arrays use push() method to add elements at the end.

2. Step 2: Match correct method call

   stack.push(5); correctly calls push on the array named stack.

3. Final Answer:

   stack.push(5); -> Option B

4. Quick Check:

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

Hint: Use arrayName.push(value) to add element [OK]

Common Mistakes:

• Using non-existent methods like add or insert
• Reversing method and object like push.stack()
• Forgetting parentheses after push

3. What will be the output after executing the following code?

const stack = [];
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack);

medium

A. [10, 20]

B. [30, 20, 10]

C. [10, 20, 30]

D. Error: push is not a function

Solution

1. Step 1: Trace push operations on empty stack

   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 console.log output

   Logging stack prints the array as is: [10, 20, 30].

3. Final Answer:

   [10, 20, 30] -> Option C

4. Quick Check:

   Push adds at end, so stack = [10,20,30] [OK]

Hint: Push adds at end, array grows left to right [OK]

Common Mistakes:

• Assuming push adds at start (top as front)
• Confusing stack order with queue
• Expecting reversed array output

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

let stack = 5;
stack.push(10);

medium

A. stack is not an array, so push method is undefined

B. push method requires two arguments

C. stack.push should be stack.add

D. No error, code runs fine

Solution

1. Step 1: Check variable type of stack

   stack is assigned number 5, not an array. Numbers do not have push method.

2. Step 2: Understand push method applicability

   push is an array method. Calling push on a number causes error: push is not a function.

3. Final Answer:

   stack is not an array, so push method is undefined -> Option A

4. Quick Check:

   push only works on arrays [OK]

Hint: Only arrays have push method [OK]

Common Mistakes:

• Assuming push works on numbers
• Thinking push needs multiple arguments
• Confusing push with add method

5. Given a stack implemented as an array, how would you push multiple elements [1, 2, 3] onto it so that 3 is on top after all pushes?
Choose the correct code snippet.

hard

A. stack.push(1); stack.push(2); stack.push(3);

B. stack.push(3); stack.push(2); stack.push(1);

C. stack.push([1, 2, 3]);

D. stack = [1, 2, 3];

Solution

1. Step 1: Understand push order for stack

   Push adds elements on top. To have 3 on top, push 1 first, then 2, then 3.

2. Step 2: Analyze options

   Sequential pushes of 1 then 2 then 3 add elements individually with 3 on top. Pushing [1,2,3] adds a single array element with [1,2,3] on top. Reverse pushes put 1 on top. Assignment replaces the stack entirely.

3. Final Answer:

   stack.push(1); stack.push(2); stack.push(3); -> Option A

4. Quick Check:

   Push in order to have last element on top [OK]

Hint: Push elements in order, last pushed is top [OK]

Common Mistakes:

• Pushing array [1,2,3] as single element
• Pushing in reverse order
• Replacing stack instead of pushing