JavaScript

How to Implement JavaScript Stack Using an Array

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:

class Stack {

  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:

push(element) {   
  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:

pop() { 
  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:

size() { 
  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”:

peek() { 
   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”:

clear() {

  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”:

isEmpty() { 
  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:

class 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):

var stack = new 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:

console.log(stack.size());

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:

console.log(stack.peek()+ " is at the top of 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:

console.log(stack.pop() + " is popped out from the stack");

After removing “30”, now re-check stack size and the fetch new element that is positioned at the top:

console.log(stack.size());console.log(stack.peek()+ " is at the top of stack");

Now, we will clear the stack by utilizing the “stack.clear()” method:

stack.clear();


Lastly, verify if the stack is empty or not:

stack.isEmpty();

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.