How to Implement Stack in JavaScript: Simple Guide

To implement a stack in JavaScript, use an array and its push() method to add items and pop() method to remove items. This follows the Last In First Out (LIFO) principle, where the last added item is the first to be removed.

Syntax

A stack can be implemented using a JavaScript array with these main methods:

• push(item): Adds item to the top of the stack.
• pop(): Removes and returns the top item from the stack.
• peek() (custom): Returns the top item without removing it.
• isEmpty() (custom): Checks if the stack is empty.

javascript

class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element);
  }

  pop() {
    if (this.isEmpty()) {
      return 'Stack is empty';
    }
    return this.items.pop();
  }

  peek() {
    if (this.isEmpty()) {
      return 'Stack is empty';
    }
    return this.items[this.items.length - 1];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

Example

This example shows how to create a stack, add items, check the top item, remove items, and check if the stack is empty.

javascript

class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element);
  }

  pop() {
    if (this.isEmpty()) {
      return 'Stack is empty';
    }
    return this.items.pop();
  }

  peek() {
    if (this.isEmpty()) {
      return 'Stack is empty';
    }
    return this.items[this.items.length - 1];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

const stack = new Stack();
stack.push(10);
stack.push(20);
stack.push(30);
console.log(stack.peek()); // 30
console.log(stack.pop());  // 30
console.log(stack.pop());  // 20
console.log(stack.isEmpty()); // false
console.log(stack.pop());  // 10
console.log(stack.isEmpty()); // true

Output

30
30
20
false
10
true

Common Pitfalls

Common mistakes when implementing a stack include:

• Using shift() or unshift() instead of push() and pop(), which changes the order and breaks LIFO.
• Not checking if the stack is empty before popping, which can cause errors.
• Confusing stack with queue behavior (FIFO vs LIFO).

javascript

class WrongStack {
  constructor() {
    this.items = [];
  }

  // Wrong: using shift removes from front, not top
  pop() {
    return this.items.shift();
  }
}

// Correct way uses pop()
class CorrectStack {
  constructor() {
    this.items = [];
  }

  pop() {
    if (this.items.length === 0) {
      return 'Stack is empty';
    }
    return this.items.pop();
  }
}

Quick Reference

Remember these key methods for stack in JavaScript:

Method	Description
push(item)	Add item to the top of the stack
pop()	Remove and return the top item
peek()	Return the top item without removing it
isEmpty()	Check if the stack has no items

Key Takeaways

Use JavaScript arrays with push() and pop() to implement stack behavior.

Always check if the stack is empty before popping to avoid errors.

Stack follows Last In First Out (LIFO) principle.

Custom methods like peek() and isEmpty() improve stack usability.

Avoid using shift() or unshift() as they break stack order.