Implementing a Stack in JavaScript

They’re like arrays with more structure and rules

Stacks are data structures that follow the Last-In-First-Out (LIFO) principle, meaning the last item inserted into a stack is the first one to be deleted.

In other words, a stack is a list of elements that are accessible only from one end of the list, which is called the Top of Stack (ToS).

A real-world example is a stack of plates. In the above image, we can see that the plate that is inserted last is the first one to be taken off.

Operations that we are going to implement:

1. Push → Add an element to the stack.
2. Pop → Delete an element from the stack.
3. Peek → Get the top element of the stack.
4. Length → Return the length of the stack.
5. Search → Search for the element in the stack.
6. IsEmpty → Check if the stack is empty.
7. Print → Print the elements of the stack.

Before implementing the stack, let’s create a Stack class.

class Stack {

    constructor(){
this.data = [];
this.top = 0;
    }
}

The Stack class has two attributes:

• data → Is an array in which we store the value.
• top → Points to the top element index.

---

push: Insert an Element to the Top of Stack

When we push an element to the stack, we have to store it in the top position of data and need to increment the top variable so that the top will point to the next empty place.

push(element) {

   this.data[this.top] = element;
   this.top = this.top + 1;

}

---

length: Returns the Length of the Stack

To get the length of the stack, we can return the top value.

length() {

   return this.top;

}

---

peek: Get the Top Element of the Stack

To get the peek element of the stack, we can use the top-1 attribute of Stack class:

peek() {

   return this.data[this.top -1 ];

}

In above code we used top-1 because the top points to the position where the new element is to be inserted, therefore the top empty location.

---

isEmpty: Checks If the Stack Is Empty

If the value of the top is equal to 0 then there is no element in the Stack.

isEmpty() {

  return this.top === 0;

}

---

pop: Deletes an Element at the Top of the Stack

When we pop an element from the stack, we have to remove the element in the top position of data and need to decrement the top variable so that the top will point to the previous element’s position.

pop() {

     this.top = this.top -1;
     return this.data.pop(); // removes the last element

}

In addition to the above code, we need to ensure that the stack is not empty, otherwise the value of the top will be decremented below zero. So, the above code will be like this:

pop() {

    if( this.isEmpty() === false ) {

       this.top = this.top -1;
       return this.data.pop(); // removes the last element

     }

}

---

print: Print the Elements of the Stack

function print() {

  var top = this.top - 1; // because top points to index where new    element to be inserted

  while(top >= 0) { // print upto 0th index
    console.log(this.data[top]);
    top--;
  }

}

---

Reverse the Stack

To print the stack in reverse order, we can use recursion.

function reverse() {
   this._reverse(this.top - 1 );
}

function _reverse(index) {

   if(index != 0) {
      this._reverse(index-1);
   }
   console.log(this.data[index]);

}

Let’s combine all the code together.

https://gist.github.com/Jagathishrex/5f6b9c9b3e3aa04ddd1ba0e4e2996f0e#file-stack-js

Thanks for reading. I hope you like this.