JavaScript: Implement a Stack using Arrays and Objects

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A stack is a data structure that follows the LIFO (Last In, First Out) principle. This means the last element added to the stack is the first one to be removed. The two main operations in a stack are:

• Push: Adds an element to the top of the stack.
• Pop: Removes the top element from the stack.

This guide will walk you through writing a JavaScript program to implement a stack using both arrays and objects.

Problem Statement

Create a JavaScript program that:

• Implements a stack using both arrays and objects.
• Allows operations like push (add elements) and pop (remove elements).
• Displays the elements in the stack after each operation.

Solution Steps

1. Implement the Stack Using Arrays:
   • Use JavaScript's built-in array methods to add (push) and remove (pop) elements.
2. Implement the Stack Using Objects:
   • Use an object to store elements and track the top index of the stack.
3. Display the Stack: Output the stack elements after each operation.

JavaScript Program

Method 1: Implementing a Stack Using Arrays

// JavaScript Program to Implement a Stack using Arrays // Author: https://www.rameshfadatare.com/ class StackArray { constructor() { this.stack = []; } // Push: Add element to the top of the stack push(element) { this.stack.push(element); console.log(`${element} added to the stack`); } // Pop: Remove element from the top of the stack pop() { if (this.isEmpty()) { console.log("Stack is empty"); return null; } const removedElement = this.stack.pop(); console.log(`${removedElement} removed from the stack`); return removedElement; } // Check if the stack is empty isEmpty() { return this.stack.length === 0; } // Display the stack elements displayStack() { console.log("Stack:", this.stack); } } // Example usage const stackArray = new StackArray(); stackArray.push(1); stackArray.push(2); stackArray.push(3); stackArray.displayStack(); stackArray.pop(); stackArray.displayStack(); 

Output for Array Stack Example

1 added to the stack 2 added to the stack 3 added to the stack Stack: [ 1, 2, 3 ] 3 removed from the stack Stack: [ 1, 2 ] 

Method 2: Implementing a Stack Using Objects

// JavaScript Program to Implement a Stack using Objects // Author: https://www.rameshfadatare.com/ class StackObject { constructor() { this.stack = {}; this.top = 0; } // Push: Add element to the top of the stack push(element) { this.stack[this.top] = element; this.top++; console.log(`${element} added to the stack`); } // Pop: Remove element from the top of the stack pop() { if (this.isEmpty()) { console.log("Stack is empty"); return null; } this.top--; const removedElement = this.stack[this.top]; delete this.stack[this.top]; console.log(`${removedElement} removed from the stack`); return removedElement; } // Check if the stack is empty isEmpty() { return this.top === 0; } // Display the stack elements displayStack() { console.log("Stack:", this.stack); } } // Example usage const stackObject = new StackObject(); stackObject.push(10); stackObject.push(20); stackObject.push(30); stackObject.displayStack(); stackObject.pop(); stackObject.displayStack(); 

Output for Object Stack Example

10 added to the stack 20 added to the stack 30 added to the stack Stack: { '0': 10, '1': 20, '2': 30 } 30 removed from the stack Stack: { '0': 10, '1': 20 } 

Explanation

Method 1: Stack Implementation Using Arrays

• Push: Adds an element to the top of the stack using the push() method.
• Pop: Removes an element from the top of the stack using the pop() method.
• isEmpty: Checks whether the stack is empty by comparing the length of the array to 0.
• displayStack: Prints the current elements of the stack.

Method 2: Stack Implementation Using Objects

• Push: Adds an element at the top index of the stack and increments the top.
• Pop: Decrements the top index and removes the element from the object by deleting the property.
• isEmpty: Checks if the top index is 0, which indicates that the stack is empty.
• displayStack: Prints the current state of the stack using an object, where each index is a key.

Conclusion

This JavaScript program demonstrates how to implement a stack using both arrays and objects. Both methods support typical stack operations like pushing and popping elements, and either approach can be used depending on the requirements of the application. Arrays are simpler to implement, while objects offer more control over the internal structure and may be more memory-efficient in specific cases.