Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Stack Data Structure in Javascript
In this article, we are going to discuss the stack data structure in JavaScript.
A stack is an Abstract Data Type (ADT), commonly used in most programming languages. It is named stack as it behaves like a real-world stack, for example - a deck of cards or a pile of plates, etc.
A stack allows operations at one end only. This feature makes it LIFO data structure. LIFO stands for Last-in-first-out. Here, the element which is placed (inserted or added) last, is accessed first. In stack terminology, insertion operation is called PUSH operation and removal operation is called POP operation.
Core Stack Operations
Every stack implementation supports these fundamental operations:
- Push: Add an element to the top of the stack
- Pop: Remove and return the top element
- Peek/Top: View the top element without removing it
- isEmpty: Check if the stack is empty
- Size: Get the number of elements in the stack
Basic Stack Implementation
Here's a simple stack implementation using JavaScript arrays:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Data Structure</title>
</head>
<body>
<script type="text/javascript">
class Stack {
constructor() {
this.stkArr = [];
}
// add element to the stack
push(element) {
return this.stkArr.push(element);
}
// remove element from the stack
pop() {
if (this.stkArr.length > 0) {
return this.stkArr.pop();
}
return "Stack is empty";
}
// view the last element
peek() {
if (this.stkArr.length > 0) {
return this.stkArr[this.stkArr.length - 1];
}
return "Stack is empty";
}
// check if the stack is empty
isEmpty() {
return this.stkArr.length === 0;
}
// the size of the stack
size() {
return this.stkArr.length;
}
display() {
if (this.stkArr.length !== 0) {
return this.stkArr.join(", ");
} else {
return "Stack is empty";
}
}
// empty the stack
clear() {
this.stkArr = [];
return "Stack cleared";
}
}
let stack = new Stack();
stack.push(10);
stack.push(20);
stack.push(30);
document.write("Stack elements: " + stack.display() + "<br>");
document.write("Top element: " + stack.peek() + "<br>");
document.write("Popped element: " + stack.pop() + "<br>");
document.write("Stack after pop: " + stack.display() + "<br>");
document.write("Stack size: " + stack.size() + "<br>");
</script>
</body>
</html>
Stack elements: 10, 20, 30 Top element: 30 Popped element: 30 Stack after pop: 10, 20 Stack size: 2
Advanced Stack with Size Limit
This implementation includes overflow and underflow protection with a maximum size limit:
class Stack {
constructor(maxSize = 10) {
this.maxSize = maxSize;
this.container = [];
}
display() {
console.log("Stack:", this.container);
}
isEmpty() {
return this.container.length === 0;
}
isFull() {
return this.container.length >= this.maxSize;
}
push(element) {
if (this.isFull()) {
console.log("Stack Overflow! Cannot push", element);
return false;
}
this.container.push(element);
console.log("Pushed:", element);
return true;
}
pop() {
if (this.isEmpty()) {
console.log("Stack Underflow! Cannot pop from empty stack");
return null;
}
const element = this.container.pop();
console.log("Popped:", element);
return element;
}
peek() {
if (this.isEmpty()) {
console.log("Stack is empty!");
return null;
}
return this.container[this.container.length - 1];
}
clear() {
this.container = [];
console.log("Stack cleared");
}
size() {
return this.container.length;
}
}
// Example usage
const stack = new Stack(5);
stack.push(10);
stack.push(44);
stack.push(55);
stack.display();
console.log("Top element:", stack.peek());
console.log("Stack size:", stack.size());
stack.pop();
stack.display();
Pushed: 10 Pushed: 44 Pushed: 55 Stack: [10, 44, 55] Top element: 55 Stack size: 3 Popped: 55 Stack: [10, 44]
Common Use Cases
Stacks are widely used in programming for:
- Function call management: Call stack in programming languages
- Expression evaluation: Converting infix to postfix notation
- Undo operations: Implementing undo functionality in applications
- Browser history: Back button functionality
- Balanced parentheses checking: Validating bracket sequences
Conclusion
The stack data structure follows the LIFO principle and is essential for many programming tasks. JavaScript arrays provide a natural implementation with built-in push() and pop() methods, making stack operations efficient and straightforward.
944 Views
