loading...
Cover image for How to create a Stack using JavaScript

How to create a Stack using JavaScript

jrestrepo922 profile image Juan Restrepo Updated on ・2 min read

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?

Alt Text

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.

Alt Text

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 = [];
    }
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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();
    }
Enter fullscreen mode Exit fullscreen mode

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]
    }

Enter fullscreen mode Exit fullscreen mode

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

empty()


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

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])
Enter fullscreen mode Exit fullscreen mode

Alt Text

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.

Discussion

pic
Editor guide
Collapse
shane325 profile image
Shane Barry

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

empty() {
     return this.data.length === 0;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
jrestrepo922 profile image
Juan Restrepo Author

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

Collapse
pavloskl profile image
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. 👍👍👍

Collapse
sanyaldips93 profile image
Dipayan Sanyal

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