Helder B. Berto
Published on

How to Implement Stack Data Structure in JavaScript

On this article, I'll show how to implement Stack data structure in JavaScript focusing on how simple it is and how it works.

What is Stack?

It's a data structure based on the principle LIFO (Last In First Out), which means the last item in will be the first item out of Stack.

The items recently added to Stack are located near the top and the oldest near the bottom of Stack.

Creating our Stack Base

First, we need to create our Stack as empty, such as:

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

Read-only

Note: The items will be used to manipulate data from every instance of Stack's.

Considering we've already created the Stack, let's create some methods to manipulate the data of Stack.

Manipulation Methods

.push()

This is used to add new elements to the top of Stack. It can add one or more elements as I mentioned previously.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

Note: It uses the base array method push to add to the items.

.pop()

This is used to remove elements from the top of Stack.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

Note: It uses the base array pop.

.peek()

This is used to return the element from the top of Stack.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

We've taken some steps in the example above, I'll describe them in some topics below:

  1. The steps we are taking to get the last index from the items is with this.items.length - 1 because the array starts from zero
  2. After that, we return the items element from the last position with return this.items[this.items.length - 1]

.isEmpty()

This is used to check if Stack is empty. If so, the items will return as true or false.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

In the example above we check the length of items if it's equal to zero, they will return true of false.

.clear()

This is used to clear Stack setting items to an empty array.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

No surprises in the example above, we just set the items to an empty array.

.size()

This is used to check the size of Stack.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

Like in the other examples above, it uses array length to check the size of Stack.

.toString()

This is used in cases we want to parse our items to a string.

Let's implement it with the following code:

class Stack {
  ...

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

Read-only

Note: It uses the base method toString.

Now that we've implemented all the data manipulation methods, let's see our Stack implementation in action:

const stack = new Stack();
stack.push(['item1', 'item2']);
console.log(stack.size()); // Output => 2
stack.pop();
console.log(stack.size()); // Output => 1

Read-only

Wrapping Up

In this post, I showed a simplified way to implement a Stack class and use it, which reinforces that there are other ways to implement it.

If this post has helped you in any way or you have tips for improvement, feel free to comment and share, I'll be happy to chat about it.

Enjoy Programming! ⚡️

References