How to create a Stack using JavaScript

JavaScript comes with some out of the box data structures. This includes Arrays and objects. Linked List, graphs, trees, queues, and stacks are not included with JavaScript. these data structures need to be constructed using a class. The data structures mention are important to know since different data structures excel at storing and retrieving data more efficiently than others depending on the scenario. Today we will be covering how to make a Stack.

What is a Stack?

A stack is a data structure that follows a simple rule. Last-in, first-out, or LIFO. You can think of the stack as a pile of dishes. If you add a dish you must put it on top of the pile and if you want to remove the dish you need to remove it from the top of the pile.

A common use for this data structure is the call stack. Functions are stack on top of each other until the function returns and functions will start popping off the stack.

What does a Stack Contain and how to build it?

class Stack{
    constructor(){
        this.data = [];
    }
}

To get started building a stack we need to create a stack class and inside the constructor, the object will be initialized with an empty array( this.data );

push()

    push(value){
        this.data.push(value);
        return this;
    }

The first instance method that will be covered push. push takes in a value as a parameter. Push adds nodes to the end of the array. Finally, return the instance of the class.

pop()

    pop(){
        return this.data.pop();
    }

The instance method pop() removes values from the end of the array. We will be using array building methods to remove a value from the end of the array. The pop() method will be used. Calling pop on the array will return the

peek()

    peek(){
        return this.data[this.data.length - 1]
    }

The instance method peeks () returns the last value of an array.

empty()

    empty(){
        if(this.data.length === 0){
            return true;
        } else {
            return false; 
        }
    }

Finally, the empty() instance method just returns true if there are any values in the stack or false if the stack is empty.

function sumArray(arr, sum = 0){
    if(arr.length === 0) return sum;
    sum = arr.pop() + sum;
    return sumArray(arr, sum)
}

sumArray([1,2,3,4])

Stacks are very simple to build using array methods and are frequently used in recursion. Recursion is when a function calls itself. You will have to get familiar with the call stack and recursion to be able to traverse trees and graph data structures. I hope this gave you a bit of insight into what stacks are and what they are used for.

Comments

[Shane Barry]

You can turn your empty() method into a one liner

empty() {
     return this.data.length === 0;
}

[Juan Restrepo]

Will be using this from now on. Thanks, Shane.

[pavloskl]

In your Stack Definition you say this:
"Last-in, first-out, or FIFO". A typo in your abbreviation(FIFO instead of LIFO) transformed it to a Queue 😀😀.
Nice article though. 👍👍👍

[Dipayan Sanyal]

This is very well articulated. Liked reading through it :)