Check if Stack is Empty or Full in DSA Javascript

Mental Model

A stack is like a pile where you add or remove items only from the top. Checking if it is empty means seeing if there is nothing to remove, and checking if it is full means seeing if you cannot add more.

Analogy: Imagine a stack of plates. If there are no plates, the stack is empty. If the stack reaches the top of the shelf, it is full and you cannot add more plates.

Top -> [ 3 ] -> [ 2 ] -> [ 1 ] -> null
Index:    ↑top

Dry Run Walkthrough

Input: stack with max size 3, current elements: 1, 2, 3

Goal: Check if the stack is empty or full

Step 1: Check if stack is empty by seeing if top index is -1

Stack: [ 1 ] -> [ 2 ] -> [ 3 ] -> null, top = 2

Why: If top is -1, stack is empty; here top is 2, so not empty

Step 2: Check if stack is full by seeing if top index equals max size - 1

Stack: [ 1 ] -> [ 2 ] -> [ 3 ] -> null, top = 2, max size = 3

Why: If top is max size - 1 (2), stack is full; here it is full

Step 3: Pop one element to remove top

Stack: [ 1 ] -> [ 2 ] -> null, top = 1

Why: Removing top element decreases top index

Step 4: Check if stack is empty again

Stack: [ 1 ] -> [ 2 ] -> null, top = 1

Why: Top is 1, so stack is not empty

Step 5: Check if stack is full again

Stack: [ 1 ] -> [ 2 ] -> null, top = 1, max size = 3

Why: Top is 1, less than max size - 1, so not full

Result:

Stack: [ 1 ] -> [ 2 ] -> null
Empty? false
Full? false

Annotated Code

DSA Javascript

class Stack {
  constructor(maxSize) {
    this.maxSize = maxSize;
    this.stack = new Array(maxSize);
    this.top = -1;
  }

  push(value) {
    if (this.isFull()) {
      console.log('Stack is full, cannot push', value);
      return;
    }
    this.top++;
    this.stack[this.top] = value;
  }

  pop() {
    if (this.isEmpty()) {
      console.log('Stack is empty, cannot pop');
      return null;
    }
    const poppedValue = this.stack[this.top];
    this.top--;
    return poppedValue;
  }

  isEmpty() {
    return this.top === -1;
  }

  isFull() {
    return this.top === this.maxSize - 1;
  }

  printStack() {
    let result = '';
    for (let i = 0; i <= this.top; i++) {
      result += this.stack[i] + (i === this.top ? '' : ' -> ');
    }
    result += ' -> null';
    console.log(result);
  }
}

// Driver code
const stack = new Stack(3);
stack.push(1);
stack.push(2);
stack.push(3);
stack.printStack();
console.log('Empty?', stack.isEmpty());
console.log('Full?', stack.isFull());
stack.pop();
stack.printStack();
console.log('Empty?', stack.isEmpty());
console.log('Full?', stack.isFull());

return this.top === -1;

Check if stack is empty by verifying top index

return this.top === this.maxSize - 1;

Check if stack is full by comparing top index to max size minus one

if (this.isFull()) { ... return; }

Prevent push if stack is full

this.top++; this.stack[this.top] = value;

Add element on top and increase top index

if (this.isEmpty()) { ... return null; }

Prevent pop if stack is empty

const poppedValue = this.stack[this.top]; this.top--;

Remove top element and decrease top index

Output

1 -> 2 -> 3 -> null

Empty? false

Full? true

1 -> 2 -> null

Empty? false

Full? false

Complexity Analysis

Time: O(1) because checking top index or updating it takes constant time

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

vs Alternative: Compared to a linked list stack, array stack uses fixed space but faster index checks for empty/full

Edge Cases

Empty stack

isEmpty returns true, pop returns null, push allowed

DSA Javascript

return this.top === -1;

Full stack

isFull returns true, push prevented

DSA Javascript

if (this.isFull()) { ... return; }

Single element stack

isEmpty false, isFull false if maxSize > 1

DSA Javascript

return this.top === -1;

When to Use This Pattern

When you see a problem asking if a stack can accept more items or if it has any items, reach for checking top index against boundaries because it quickly tells empty or full state.

Common Mistakes

Mistake: Checking if stack is empty by comparing top to 0 instead of -1
Fix: Use top === -1 to indicate empty stack because top starts at -1 before any push

Mistake: Checking if stack is full by comparing top to maxSize instead of maxSize - 1
Fix: Use top === maxSize - 1 because array indices start at 0

Summary

It checks if a stack has no elements (empty) or cannot add more (full) by looking at the top position.

Use it when you need to know if you can push or pop from a stack safely.

Remember top index -1 means empty, and top index maxSize-1 means full.

Practice

1. What does it mean when a stack is empty?

easy

A. The stack has one element.

B. The stack has reached its maximum size.

C. There are no elements in the stack.

D. The stack is full and cannot add more elements.

Solution

1. Step 1: Understand the stack empty condition

   A stack is empty when it contains no elements inside it.

2. Step 2: Compare with other options

   Options about full stack or having elements do not describe empty stack.

3. Final Answer:

   There are no elements in the stack. -> Option C

4. Quick Check:

   Empty stack means no elements [OK]

Hint: Empty stack means zero elements inside [OK]

Common Mistakes:

• Confusing empty with full
• Thinking empty means one element
• Mixing empty with partially filled

2. Which of the following JavaScript code snippets correctly checks if a stack array stack is empty?

easy

A. if (stack.length === 0) { /* empty */ }

B. if (stack === null) { /* empty */ }

C. if (stack.length > 0) { /* empty */ }

D. if (stack.size === 0) { /* empty */ }

Solution

1. Step 1: Check correct property for array length

   JavaScript arrays use length property to get number of elements.

2. Step 2: Verify condition for empty stack

   Empty means length is zero, so stack.length === 0 is correct.

3. Final Answer:

   if (stack.length === 0) { /* empty */ } -> Option A

4. Quick Check:

   Use length property to check empty [OK]

Hint: Use stack.length === 0 to check empty [OK]

Common Mistakes:

• Using null instead of length
• Using size property (not for arrays)
• Checking length > 0 for empty

3. Consider this JavaScript stack implementation with max size 3:

const stack = [];
const maxSize = 3;
stack.push(10);
stack.push(20);
stack.push(30);
const isFull = stack.length === maxSize;
const isEmpty = stack.length === 0;
console.log(isFull, isEmpty);

What will be printed?

medium

A. false false

B. false true

C. true true

D. true false

Solution

1. Step 1: Trace stack push operations

   Three elements (10, 20, 30) are pushed, so stack length is 3.

2. Step 2: Evaluate isFull and isEmpty

   isFull = stack.length === maxSize -> 3 === 3 -> true; isEmpty = stack.length === 0 -> 3 === 0 -> false.

3. Final Answer:

   true false -> Option D

4. Quick Check:

   Stack full = true, empty = false [OK]

Hint: Stack full if length equals max size [OK]

Common Mistakes:

• Confusing isFull and isEmpty
• Forgetting to update length after push
• Assuming stack is empty after pushes

4. Find the error in this code that checks if a stack is full:

const stack = [1, 2, 3];
const maxSize = 3;
function isStackFull() {
  if (stack.length = maxSize) {
    return true;
  } else {
    return false;
  }
}

medium

A. Using assignment (=) instead of comparison (===) in if condition.

B. maxSize should be stack.length, not a constant.

C. Function should return stack.length instead of boolean.

D. Stack array should be empty to check if full.

Solution

1. Step 1: Identify the if condition mistake

   The condition uses single equals = which assigns value instead of comparing.

2. Step 2: Correct comparison operator

   It should use === to compare stack length with maxSize.

3. Final Answer:

   Using assignment (=) instead of comparison (===) in if condition. -> Option A

4. Quick Check:

   Use === for comparison, not = [OK]

Hint: Use === for comparison, not = [OK]

Common Mistakes:

• Using = instead of ===
• Confusing maxSize with stack length
• Returning wrong type from function

5. You have a stack with max size 5. After pushing 3 elements, you want to check if the stack is full or empty and print the status as a string: "Full", "Empty", or "Partial". Which code correctly implements this?

hard

A. if (stack.length > 5) { console.log('Full'); } else if (stack.length < 0) { console.log('Empty'); } else { console.log('Partial'); }

B. if (stack.length === 5) { console.log('Full'); } else if (stack.length === 0) { console.log('Empty'); } else { console.log('Partial'); }

C. if (stack.length === 0) { console.log('Full'); } else if (stack.length === 5) { console.log('Empty'); } else { console.log('Partial'); }

D. if (stack.length >= 5) { console.log('Empty'); } else if (stack.length <= 0) { console.log('Full'); } else { console.log('Partial'); }

Solution

1. Step 1: Check conditions for full and empty stack

   Full means length equals max size (5), empty means length zero.

2. Step 2: Use else for partial stack

   If neither full nor empty, stack is partially filled.

3. Final Answer:

   if (stack.length === 5) { console.log('Full'); } else if (stack.length === 0) { console.log('Empty'); } else { console.log('Partial'); } -> Option B

4. Quick Check:

   Check length === maxSize for full, === 0 for empty [OK]

Hint: Check length === maxSize for full, === 0 for empty [OK]

Common Mistakes:

• Using wrong comparison operators
• Swapping full and empty conditions
• Checking length > maxSize or < 0