You may have seen different examples of stacks in your day-to-day life, such as a bunch of books, a collection of DVDs, or trays of dishes that are stacked on top of each other. For instance, you have placed all of your favorite books on a desk, and now you want to get the first book. To do so, you have to remove all of the books one by one until you get the first book.
Stacks in JavaScript work on the same principle known as “Last In First Out“, where the last element pushed to the stack will pop out first. It is based on two operations: “Push” and “Pop”, where “Push” refers to adding an element at the top of the stack, and the “Pop” method is utilized for its removal. JavaScript arrays offer built-in “push()” and “pop()” methods; therefore, you can use an array to implement Stacks efficiently.
This write-up will discuss the method to implement JavaScript Stack using an array. So, let’s start!
How to implement JavaScript Stack using an array
To implement Stack in JavaScript, we will create a “Stack” class and declare an array named “items” in the constructor. This “items” array will be utilized to store Stack elements and execute its related methods:
constructor() {
items = [];
}
}
After creating a Stack class, add the below-given methods to perform different operations on the stack elements.
How to Push an element to JavaScript Stack
“Push” refers to the operation of adding an element to the top of the stack. In our JavaScript Stack, the “push()” method will accept an “element” as an argument and push it in the “items” array:
this.items.push(element);
console.log(element + " is pushed to Stack.");
}
How to Pop an element from JavaScript Stack
The “pop()” method deletes or removes the top element of a JavaScript array. Adding the “pop()” method in the “Stack” class will assist in popping out the top element of the “items” array:
return this.items.pop();
}
How to Check Size of JavaScript Stack
The “length” property of the “items” array will return the size of our JavaScript stack:
return this.items.length;
}
How to Peek an element from JavaScript Stack
Want to know which element is at the top of your JavaScript stack? For this purpose, you have to define a “peek()” method that fetches the element that exists on the top of the JavaScript Stack without removing it.
Here, the given “peek()” method will get the top element of the “items” array by decrementing “1” from the “length”:
return this.items[this.items.length - 1];
}
How to Clear JavaScript Stack
To remove all Stack elements at once, you have to set the “length” property of the “items” array to “0”:
console.log( "Stack is cleared");
this.items.length = 0;
}
How to Check if JavaScript Stack is empty
After clearing the elements, you can reconfirm that the JavaScript Stack is empty or not. To do so, define an “isEmpty()” method and then use the strict equality operator “===” to compare the length of the “items” array to “0”:
return this.items.length === 0;
}
The given “isEmpty()” method will return a boolean value, where “true” means that the “items” array is empty and “false” indicates that it is not empty.
We will practically implement the Stack class and discuss the specified methods in the following example.
Example: Implement JavaScript Stack using an array
Here is the complete code which we have added in our program for implementing JavaScript stack:
constructor() {
this.items = [];
}
//Performing push operation
push(element) {
this.items.push(element);
console.log(element + " is pushed to Stack.");
}
//Pop out element from Stack
pop() {
return this.items.pop();
}
//Check Stack size
size() {
return this.items.length;
}
//check top most element of Stack
peek() {
return this.items[this.items.length - 1];
}
//Clear Stack
clear() {
console.log( "Stack is cleared");
this.items.length = 0;
}
//Check if Stack is empty
isEmpty() {
return this.items.length === 0;
}
}
Firstly, we will create an instance of the “Stack” class and “Push” the following three values to the “items” array (stack):
stack.push(10);
stack.push(20);
stack.push(30);
In the next step, we will check the size of the created stack by invoking the “size()” method:
The given output signifies that the size of JavaScript Stack is “3”:
Next, use the “peek()” method to print out the topmost element of the stack:
As you can see from the output that “30” is at the top of our created stack:
Then, pop out the topmost element from the stack:
After removing “30”, now re-check stack size and the fetch new element that is positioned at the top:
Now, we will clear the stack by utilizing the “stack.clear()” method:
Lastly, verify if the stack is empty or not:
In the following output, “true” indicates that the length of the Stack is equal to “0”:
That was all about the essential information related to implementing the JavaScript stack using an array. You can further explore it according to your requirements.
Conclusion
Arrays in JavaScript offer the “push()” and “pop()” methods that permit you to implement the JavaScript stack efficiently. After creating an array, you can perform further operations such as adding or removing an element to the stack, checking the topmost element, clearing the whole stack, and verifying the array size. This write-up discussed the procedure to implement JavaScript Stack using an array.
