Push Operation on Stack in DSA Typescript - Deep Dive

Overview - Push Operation on Stack

What is it?

A stack is a simple data structure that stores items in a last-in, first-out order. The push operation adds a new item to the top of the stack. Imagine stacking plates: you always put the new plate on top. Push is the action of placing that new plate on the stack.

Why it matters

Without the push operation, you cannot add new items to a stack, making it useless for tasks like undo actions, expression evaluation, or backtracking. Push allows the stack to grow dynamically and keeps track of the order in which items are added, which is essential for many algorithms and real-world applications.

Where it fits

Before learning push, you should understand what a stack is and how it works conceptually. After mastering push, you can learn about pop (removing items), peek (viewing the top item), and advanced stack applications like balancing symbols or depth-first search.

Mental Model

Core Idea

Push adds a new item on top of the stack, making it the first to come off next.

Think of it like...

Think of a stack of books on a table. When you push, you place a new book on top, so it's the first one you'll pick up next time.

Stack (top at the right):
[Bottom] ──> [Item1] ──> [Item2] ──> [Top]
Push adds new item here: [NewItem]
Result:
[Bottom] ──> [Item1] ──> [Item2] ──> [NewItem] (Top)

Build-Up - 7 Steps

1

Foundation

Understanding Stack Basics

Concept: Introduce the stack data structure and its last-in, first-out behavior.

A stack is like a pile where you can only add or remove items from the top. The last item you add is the first one you remove. This is called LIFO (Last In, First Out).

Result

You understand that stacks only allow access to the top item.

Knowing the LIFO principle is key to understanding why push always adds to the top and why stacks are useful for reversing order.

2

Foundation

What Push Operation Does

Concept: Explain the push operation as adding an item to the top of the stack.

Push means placing a new item on the top of the stack. If the stack was empty, the new item becomes the only item. If not, it sits above all others.

Result

You see how the stack grows by adding items on top.

Understanding push as the only way to add items helps you see how stacks maintain order and size.

3

Intermediate

Implementing Push in TypeScript

🤔Before reading on: do you think push should add the item at the start or end of an array to simulate a stack? Commit to your answer.

Concept: Show how to write push using an array to represent the stack in TypeScript.

class Stack { private items: T[] = []; push(item: T): void { this.items.push(item); // adds item at the end, top of stack } print(): void { console.log(this.items.join(' -> ') + ' -> null'); } } const stack = new Stack(); stack.push(1); stack.push(2); stack.push(3); stack.print();

Result

1 -> 2 -> 3 -> null

Knowing that push adds to the end of the array simulates the top of the stack and keeps the LIFO order intact.

4

Intermediate

Handling Stack Capacity Limits

🤔Before reading on: do you think push should allow adding items beyond a fixed stack size? Commit to your answer.

Concept: Introduce the idea of a maximum stack size and how push should handle overflow.

class Stack { private items: T[] = []; private maxSize: number; constructor(maxSize: number) { this.maxSize = maxSize; } push(item: T): void { if (this.items.length >= this.maxSize) { throw new Error('Stack overflow: cannot push, stack is full'); } this.items.push(item); } print(): void { console.log(this.items.join(' -> ') + ' -> null'); } } const stack = new Stack(3); stack.push(10); stack.push(20); stack.push(30); try { stack.push(40); } catch (e) { console.log(e.message); } stack.print();

Result

Stack overflow: cannot push, stack is full 10 -> 20 -> 30 -> null

Understanding stack overflow helps prevent errors and shows that push must sometimes reject new items to keep stack integrity.

5

Intermediate

Push Operation Time Complexity

🤔Before reading on: do you think push takes longer as the stack grows? Commit to your answer.

Concept: Explain that push is a very fast operation with constant time complexity.

In an array-based stack, push adds the item at the end of the array. This operation takes the same amount of time no matter how many items are in the stack, called O(1) time complexity.

Result

Push operation runs quickly and predictably regardless of stack size.

Knowing push is O(1) helps you trust stacks for performance-critical tasks.

6

Advanced

Push in Linked List Based Stack

🤔Before reading on: do you think push in a linked list stack adds at the head or tail? Commit to your answer.

Concept: Show how push works when the stack is built using a linked list instead of an array.

class Node { value: T; next: Node | null = null; constructor(value: T) { this.value = value; } } class Stack { private top: Node | null = null; push(item: T): void { const node = new Node(item); node.next = this.top; // new node points to current top this.top = node; // new node becomes top } print(): void { let current = this.top; let output = ''; while (current) { output += current.value + ' -> '; current = current.next; } output += 'null'; console.log(output); } } const stack = new Stack(); stack.push(5); stack.push(10); stack.push(15); stack.print();

Result

15 -> 10 -> 5 -> null

Understanding push adds at the head in linked list stacks shows how stacks can be implemented without arrays and still maintain LIFO order.

7

Expert

Push Operation and Memory Efficiency

🤔Before reading on: do you think array-based push always uses less memory than linked list push? Commit to your answer.

Concept: Explore how push affects memory usage differently in array and linked list stacks and the tradeoffs involved.

Array-based stacks allocate memory in blocks and may waste space if not full, but push is fast and cache-friendly. Linked list stacks allocate memory per item, which uses more memory per element but can grow without resizing. Push in linked lists involves creating a new node each time, which can be slower and more memory-heavy.

Result

Push operation memory use depends on stack implementation and affects performance and resource use.

Knowing the memory tradeoffs of push helps choose the right stack type for your application's needs.

Under the Hood

Push works by placing a new element at the top of the stack structure. In array-based stacks, this means adding the element at the next free index and updating the top pointer. In linked list stacks, push creates a new node that points to the current top node and then updates the top pointer to this new node. This ensures the last pushed item is always accessible first.

Why designed this way?

Stacks were designed to support LIFO operations efficiently. Push adds items quickly without disturbing existing order. Arrays provide fast access but require resizing; linked lists offer dynamic size but with extra memory overhead. The design balances speed, memory, and simplicity.

Array-based stack push:
┌─────────┐
│ Items[] │
├─────────┤
│ 1 │ 2 │ 3 │ _ │ _ │
└─────────┘
Top points here -> index 3
Push 4:
Add 4 at index 3
Update top to 4

Linked list stack push:
Top -> [Node4] -> [Node3] -> [Node2] -> null
Push 4:
Create Node4
Node4.next = Top
Top = Node4

Myth Busters - 4 Common Misconceptions

Quick: Does push remove the bottom item when the stack is full? Commit to yes or no.

Common Belief: When the stack is full, push removes the bottom item to make space.

Reality: Push does not remove any items; it either adds the new item if space allows or throws an error (stack overflow).

Why it matters: Believing push removes items can cause data loss or bugs when the stack is full, leading to unexpected behavior.

Quick: Is push slower when the stack has many items? Commit to yes or no.

Common Belief: Push takes longer as the stack grows because it has to move all items.

Reality: Push is a constant time operation (O(1)) and does not depend on stack size.

Why it matters: Thinking push is slow can lead to wrong performance assumptions and poor design choices.

Quick: Does push add items at the bottom of the stack? Commit to yes or no.

Common Belief: Push adds new items at the bottom of the stack.

Reality: Push always adds items at the top of the stack to maintain LIFO order.

Why it matters: Misunderstanding push position breaks the stack order and invalidates its purpose.

Quick: Can push be used to peek at the top item? Commit to yes or no.

Common Belief: Push can be used to look at the top item without removing it.

Reality: Push only adds items; peeking requires a separate operation.

Why it matters: Confusing push with peek can cause logic errors and misuse of the stack.

Expert Zone

1

Push operation in array stacks may trigger resizing, which is costly but amortized over many pushes.

2

In concurrent environments, push must be atomic to avoid race conditions and data corruption.

3

Push in linked list stacks involves dynamic memory allocation, which can fragment memory and affect performance.

When NOT to use

Push on stacks is not suitable when you need random access or to insert items in the middle; use arrays or linked lists directly instead. For very large data, consider queues or deques for more flexible insertion/removal.

Production Patterns

Stacks with push are used in undo systems, expression evaluation (parsing calculators), backtracking algorithms, and managing function calls in programming language runtimes.

Connections

Queue

Opposite data structure with FIFO order instead of LIFO.

Understanding push in stacks helps contrast with enqueue in queues, clarifying how order affects data processing.

Function Call Stack

Push models how function calls are added to the call stack during program execution.

Knowing push operation deepens understanding of how programs manage nested function calls and return control.

Undo Feature in Text Editors

Push stores user actions to allow reversing them in order.

Seeing push as storing actions explains how undo works by popping the last action.

Common Pitfalls

#1 Ignoring stack overflow and pushing beyond capacity.

Wrong approach:

class Stack {
items = [];
maxSize = 3;
push(item) {
this.items.push(item); // no check for overflow
}
}

const s = new Stack();
s.push(1);
s.push(2);
s.push(3);
s.push(4); // silently adds beyond maxSize

Correct approach:

class Stack {
items = [];
maxSize = 3;
push(item) {
if (this.items.length >= this.maxSize) {
throw new Error('Stack overflow');
}
this.items.push(item);
}
}

const s = new Stack();
s.push(1);
s.push(2);
s.push(3);
try {
s.push(4);
} catch(e) {
console.log(e.message); // Stack overflow
}

Root cause:

Not checking stack size before pushing leads to silent errors and corrupted stack state.

#2 Using push to add items at the bottom instead of the top.

Wrong approach:

class Stack {
items = [];
push(item) {
this.items.unshift(item); // adds at start, bottom of stack
}
}

const s = new Stack();
s.push(1);
s.push(2);
s.push(3);
s.items; // [3, 2, 1] which reverses expected order

Correct approach:

class Stack {
items = [];
push(item) {
this.items.push(item); // adds at end, top of stack
}
}

const s = new Stack();
s.push(1);
s.push(2);
s.push(3);
s.items; // [1, 2, 3]

Root cause:

Confusing array methods causes the stack order to invert, breaking LIFO behavior.

#3 Assuming push removes items when full.

Wrong approach:

class Stack {
items = [];
maxSize = 2;
push(item) {
if (this.items.length >= this.maxSize) {
this.items.shift(); // removes bottom item
}
this.items.push(item);
}
}

const s = new Stack();
s.push(1);
s.push(2);
s.push(3);
s.items; // [2, 3] but bottom item lost silently

Correct approach:

class Stack {
items = [];
maxSize = 2;
push(item) {
if (this.items.length >= this.maxSize) {
throw new Error('Stack overflow');
}
this.items.push(item);
}
}

const s = new Stack();
s.push(1);
s.push(2);
try {
s.push(3);
} catch(e) {
console.log(e.message); // Stack overflow
}
s.items; // [1, 2]

Root cause:

Misunderstanding stack overflow leads to data loss and unexpected behavior.

Key Takeaways

Push operation adds a new item to the top of the stack, maintaining last-in, first-out order.

Push is a constant time operation that can be implemented using arrays or linked lists with different tradeoffs.

Handling stack overflow during push is essential to prevent errors and data corruption.

Understanding push clarifies how stacks support many algorithms and system functions like undo and function calls.

Misusing push or misunderstanding its behavior breaks the fundamental LIFO principle and causes bugs.

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