JavaScript Data Structure Pt 2: Stack

What is a Stack?

The Stack Data Structure is a way that allows us to store a collection of data in a Last In First Out fashion. This means the last element added to the stack, is the first one to be removed.

Basic example

In Code

We will use an Array to create our stack

let stack = []

We can use the following built-in methods to create a Stack using push() and pop()

stack.push() // add an element to the end of the Stack

stack.pop() // remove the last element of the Stack

basic syntax

let stack = [1,4,2,6,8]

stack.push(5)

console.log(stack) // output [1,4,2,6,8,5]

stack.pop()

console.log(stack) // output [1,4,2,6,8]

Following up from Array

This is the following up article after Arrays Data Structure. We are building on our previous knowledge to help leverage our previous demonstrations. The more practice, the more we can get comfortable with these structures.

---

Using arrays to implement a Stack

We will create a Stack class to allow us to make our data structure anywhere by using our stack class. We will have two main methods from the pop and push , then we will implement a few of our own like peek , isEmpty, size , and clear .

Stack Class

class Stack { } 

Anytime we want to use our Stack Data Structure we want to initiate an empty Array

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

let stack = new Stack();

console.log(stack.items) // output [ ] <--- empty Array

---

Adding pop & push

pop() removes the top element of the stack

pop() { 
  return this.items.pop()
}

push() adds an element to the top of the stack

push(element) {
    this.items.push(element);
}

Stack Class

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

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

    push(element) {
        return this.items.push(element);
    }

}

---

Checking our top element

We want to be able to check the top element of our stack. We can do so by retrieving the last item of our Array .

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

Stack Class

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

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

    push(element) {
        return this.items.push(element);
    }

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

---

Checking if Stack is empty

We need to be able to check if our stack is either empty or not.

isEmpty() { 
    return this.items.length === 0; // this will return true or false 
}

Stack Class

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

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

    push(element) {
        return this.items.push(element);
    }

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

    isEmpty() { 
        return this.items.length === 0;
    }
}

---

Checking Stack Size

We need to be able to see the amount of elements our stack is storing. We can do so by returning the length of our stack

size() {
    return this.items.length;
}

Stack Class

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

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

    push(element) {
        return this.items.push(element);
    }

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

    isEmpty() { 
        return this.items.length === 0;
    }

    size() {
        return this.items.length;
    }
}

---

Clearing up Stack

We need to be able to clear up our stack. Removing elements from the stack one by one can be time-consuming, which is why it’s easier to clear our stack*.*

clear() {
    return this.items = [];
}

Stack Class

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

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

    push(element) {
        return this.items.push(element);
    }

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

    isEmpty() { 
        return this.items.length === 0;
    }

    size() {
        return this.items.length;
    }

    clear(){ 
        return this.items = [];
    }
}

---

Using our Stack Data Structure

With our Stack class, we can now create stacks anywhere.

var stack = new Stack();

stack.push(2)
stack.push(3)
stack.push(7)

console.log(stack.items) // [2,3,7]

stack.pop()

console.log(stack.items) // [2,3]

When working with the Stack Data Structure, it can be handy when retrieving the most recently added element. This article aims to help us understand how the Stack Data Structure works behind the hood. We do not need to reinvent the wheel regarding these Data Structures, but it is handy in rare cases. We can always use the built-in methods to create a stack.

---

Conclusion

By the end of this article, I hope you can see the power Stack data structures have when it comes to data collection. This is one of many key concepts in the JavaScript programming language. If you manage to stick around this far I appreciate your time and eagerness in learning with me!

💡 If we want to learn more about the other methods, check out the MDN Docs