Stack Data Structure in JavaScript

Data structures are essential for computer science and how we solve problems in programming. In JavaScript, we have arrays that are used as one-size fits all for some data structures. However, it gives you methods that are not part of one data structure, which can lead to unnecessary and unwanted confusion and results. For example, you don’t want to have methods related to queues when you are trying to implement a stack. Thus, in this short article, we will create a stack class that uses a JavaScript array internally so only the necessary methods are visible to the user.

Characteristics of a Stack

In a stack, we should only have access to the top element, which is the last one added with a push method. In addition, new items should be added at the top of the stack and there is no way to add items at the middle or bottom. Additionally, the stack must have the following methods:

• Push: add items to the stack.
• Pop: remove and return the top item of the stap (Last In, First Out).
• Peek: Gives you the content of the top element of the stack.
• Length: to know how many items are in the stack.

Other methods that are very useful for iterating with the stack are:

• hastItems: return true or false, depending if the stack has items or not.
• isEmpty: return true or false if depending if the stack is empty or not.

Stack Class in JavaScript

The code used to implement the Stack data structure in JavaScript is as follows:

class Stack {
 //Constructor
 constructor(){
   //Private array for the stack
   this.stack = [];
 }
 //The size or length of the stack
 length(){
   return this.stack.length;
 }
 //Same as length()
 size(){
   return this.length();
 }
 //At new item at the top of the stack
 push(item){
   this.stack.push(item);
 }
 //Removes and return the item at the top of the stack
 pop(){
   return this.stack.pop();
 }
 //Returns the content of the top item of the stack without removing it
 peek(){
   return this.stack[this.length() - 1];
 }
 //Returns if the stack has items or not
 hasItems(){
   return !!this.length();
 }
 //Returns if the stack is empty or not
 isEmpty(){
   return !this.hasItems();
 }
}

Using the Stack Class

Now, we can use the Stack class to hide methods from the Array object that are not relevant for a stack. Also, it only allows access to the top item of the stack, leaving the rest of the items obscured and impossible to access without removing items from the top.

Creating an instance from the Stack Class

let myStack = new Stack();

Adding items to the stack

myStack.push("new item");

Iterating over the stack

let myStack = new Stack();
 
myStack.push("one");
myStack.push("two");
myStack.push("three");
 
while(myStack.hasItems()) {
  console.log(myStack.pop());
}

Another way to go over the elements of the stack is by using isEmpty() method:

let myStack = new Stack();
 
myStack.push("one");
myStack.push("two");
myStack.push("three");
 
while(!myStack.isEmpty()) {
  console.log(myStack.pop());
}

Conclusion

As we can see, it is not difficult to simulate or implement the functionality of a stack by using arrays in JavaScript. By going with this approach we can only use the methods required by the stack while hiding the methods that are not necessary.