Learning Stacks In JavaScript

Stacks are data structures used to store a collection of elements, that follows the First In Last Out (FILO) or Last In First Out (LIFO) principle. There are three main operations:

When an element is added to a stack, it is placed on the top of all previously entered items. When removing an element from the stack it removes the most recently added element, this is considered a “FILO” stack. When peeking into the stack, this gives access to the top element without modifying the stack.

For me, the concept of stacks stuck when a good friend by the name of Roxkstar74 described a stack to be similar to a Pringles tube. A tube full with crisps that has been placed inside and stacked one by one from bottom to top.

With a Pringle tube (stack) you must take the first crisp from the top of the tube before you can take out the next. Unlike a bag of crisps where you are able to reach in, root around and grab any delicious crisp you wish to eat.

When taking a crisp out of the Pringles tube, you are only able to take one crisp out at a time.

You are not able to take out a crisp that has been placed below the top crisp in the tube. You must take out all crisps that are above the desired crisp you would like. In the below examples I want to eat crisp 3 that is in the middle of the tube. Before I can do so, I must take out and eat crisp 5 and then 4 after before being able to take crisps 3

Although Arrays in JavaScript provide all the functionality required for a Stack. There are times you are required to create these tiny portions of array methods, restricting access to other methods of an array.

Our JavaScript class will contain an empty array with the following functions

We can start by creating a simple class with a constructor that initializes an empty array

Using the built in array methods push and pop we will create the push and pop functionality

The last functionality we want to add is the peek method. To view the element at the top of the stack without removing it. To do this we will get the arrays length - 1 as arrays have an 0 based index.

Full example of the JavaScript code

Example use of the Stack

This may not be best practice, however, I wanted to try and create the Stack in a functional manner. Let me know in the comments if I should be taking this approach differently

Example usage

This post does not go over setting up Jest, however, please see code examples of tests ran for both JavaScript Stack code examples.

Class testing examples

Stack functional programming tests

If you got this far, I appreciate the time you have taken to read my post and for joining me on my learning journey. Stay tuned for more posts as I progress my learning Journey.