The Stack Data Structure and Its Implementation Using JavaScript
By: Senada Kadric
Tags: Data Structures, Web Development, JavaScript, Software Engineering, Software Development

As already mentioned, stacks can be implemented in more than one way. To start off let’s implement a stack in JavaScript by using an array. You can follow along and do it yourself by opening up your Chrome DevTools console (Command + Option + J for Mac or Control+Shift+J for Windows, Linux, and Chrome OS) or in your favorite text editor.

To add new items to the end of this stack, we can use the built-in array method .push(). Let’s add a couple of elements to the stack.

By using the .push() method, we know that the last element that was added is the last element in the array. What method can we use to *pop* off that last element and have a data structure that abides by the Last In First Out principle? .pop()!

Above we have popped off the last two elements and the first element that we added remains. The great thing about using .push() and .pop() in tandem on an array to implement a stack is that they are done in constant time O(1), which is excellent. You could also use .shift() and .unshift() in tandem instead. However, these operations are done in linear time O(n) because removing or adding to the beginning of an array requires re-indexing each element afterward, which is very poor and would not make for a good stack.

Alternatively, you can use a linked list and write your own stack from scratch. To do this we will start by creating a node class and a stack class.

The node has a pointer to its value as well as to the next node. The stack has first, last and length properties. We will be creating .push() and .pop() methods on our stack class. If you are using a singly linked list like I am here, you won’t want to pop off the last value of the list since that will be constant time O(n), requiring you to iterate through the entire list and find the value just before the last to be able to replace it. To “hack” this problem, we can “push” the new values to the beginning of the list and “pop” off values from the beginning as well.

Our push function accepts a new value and creates a node with that value. If the stack is empty, we assign the first and last properties to be that new node. Otherwise if the stack has one or more nodes in it, we create a variable that stores the first property of the stack as it is currently. We then assign the first property to be the newly created node and set its next property to be the variable which stores the previous first. The stacks length is incremented by 1 and we return the length.

Our pop function first checks to see if there are any nodes in our stack and if there are none we return null. Otherwise we create a variable to store the first property of the stack (so that we can return it at the end). We check if there is only one node and if so we set the last property be null. We then set the first property to be the current firsts next. The length is decremented by 1 and we return the value of the node that was removed.

And that’s it. We now have a stack class that was implemented from scratch in JavaScript. It obeys the LIFO principle and inserts and removes elements in constant time. We previously saw that a stack could also be implemented by using an array with .push() and .pop() in tandem, which is also abiding LIFO and is in constant time.

Stacks are used for many things such as the operations undo and redo, handling function invocations (think of the call stack), and for routing (being able to go back and forward between pages). They are a great data structure to know if you need fast insertion and removal and are used in many algorithms.

I hope you learned something new!