DEV Community

Cover image for Implementing Stacks in JavaScript
Collins Mbathi
Collins Mbathi

Posted on

Implementing Stacks in JavaScript

In today's article we are going to discuss about stack implementation in JavaScript. Stack is a linear data structure in which removing and adding of elements follows a unique order.
It follows first in Last out (FILO).As compared to queues, for queues it follows the order first in first out (FIFO);
In real life situation, we can say for example when you pile a lot of pancakes together as shown below:

As seen in photo the last pancake to be placed in the pile, will be the first pancake to be taken out.
Stack in applications its implemented in undo functionality and also in web browsing , when one goes to history the last site to browse is always the first in the browsing history.

Now we are going to implement how stack works in JavaScript
here is the example of stack using array in JavaScript :

// Stack class
class Stack {

    // Array is used to implement stack
        this.items = [];

    // Methods to be implemented
    // push(value)
    // pop()
    // peek()
    // isEmpty()
    // printStack()

Enter fullscreen mode Exit fullscreen mode

As you can see the above example we have created a body of a stack class which contains a constructor in which we declare an array to implement stack. Hence, with the creation of an object of a stack class this constructor would be called automatically, and also some methods of implementing adding and removing of values.

Now lets implement each method:

1.Push() - This method is used to add elements in the array.

This method adds a value into the items array.

2.Pop() - This method is used to remove top element in the arrays.


At first we check if the array has got elements, if its empty then its going to return underflow. The pop method is going to remove the element that was last to be added in the items array.

3.peek - This method when triggered it returns the top most element in the array. The last element to be added.


As you can see it only returns the latest value to be added in the stack, the top most value but it does not remove it.

  1. isEmpty - This method is used to check if the stack is empty in a scenario where we are removing a value from the stack, we confirm if its empty. So that we don't run the methods when the stack has no values.

As we can see above, it returns true when the stack is empty.

  1. print() - This is a helping method where it returns all the values that are in the stack.

// print function
    let string = "";
    for (let i = 0; i < this.items.length; i++)
        string += this.items[i] + " ";
    return string;

Enter fullscreen mode Exit fullscreen mode

Now we are done defining the stack class and its methods now lets test its few functions. We an example shown below:


Now that we are done with implementing and testing our functionality, you can try to create other application ways
and you will understand the stack concept better.

See you in my next article happy coding .

Discussion (1)

emma_donery profile image
Emma Donery

Happy Coding 🎉