How To Do Stacks In JavaScript

Introduction

This is a series where you will learn about singly linked lists in JavaScript, doubly linked lists, stacks, and queues.

The other links Are Here:

What is a Stack?

A stack is a abstract data structure that holds a list of components (such as a linked list of nodes). Think of it like a stack of dishes. You stack the dishes, so the last one is the first out to be cleaned. You cannot pull from the bottom, because it is a stack.

A good example of practical use cases of a stack could be an “undo” feature. If you put in the last change to an image, for example, you want the last one to be the first to be undone (last in, first out). Stacks are used in a variety of programs that you don’t even think about that you might even use on the daily.

How to create a stack

This post assumes you’ve already understood and read the last post. if not, then please read about singly linked lists here. If you are familiar with a linked list and nodes, then you should be good to roll to read this.

Here’s an example of a stack class in JavaScript.

class Node {
  constructor(value, next = null) {
    this.value = value;
    this.next = next;
  }
}

class stack {
  constructor(head = null) {
    this.head = head;
  }
  push(value) {
    this.head = new Node(value, this.head);
  }
  pop() {
    this.head = this.head.next;
  }
  peek() {
      return this.head.value;
  }
}

This is just a normal JavaScript class called “stack”. We simply just interact with our new nodes. The “head” in this stack represents the uppermost Node class instance.

The constructor simply makes the head node equal to null, since there is absence of a node initially when a new instance is constructed.

The push function

For the push functionality, it re-assigns the head value to a new Node, in which that new Node’s value is the input of “value” (user input) and the next node is the “head”. You set it to the head, because now this new node is on top of the list. So therefore, to replace it, if you recall from the previous blog post, we kept stacking them by nesting a new next object within the node. Therefore, all head is — is just an object with a value and next property. In theory, head looks something like this:

{
  value: originalXValueHere,
  next: null
}

So by pushing a value, we get something like this now:

{
  value: newNotRelatedValue,
  next: {
    value: originalXValueHere,
    next: null
  }
}

So, by continuing to add to this, we then add to the stack.

The pop function

The pop functionality simply removes the top level. So by setting the new head value [typeof object] to the new value: next [typeof object], we entirely skip an entire object that held that object. So now the data would look something like this if you removed the “newNotRelatedValue” node…

{
  value: originalXValueHere,
  next: null
}

You might be saying at this point: Hey, that’s the same as it was before, you just removed the top level! And yes my friend, you are indeed correct.

The peek function

Finally, I have implemented just a peek function just to show you WITHOUT removing what the top level is. Try copying the code and playing with it on your own machine to understand more.

Conclusion

In the next post, I will show you a doubly linked list, and we will investigate what is different between a singly linked list and a doubly linked list.