- 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 = []
}
}
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);
}
}
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();
}
}
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];
}
}
We've taken some steps in the example above, I'll describe them in some topics below:
- The steps we are taking to get the last index from the
items
is withthis.items.length - 1
because the array starts fromzero
- After that, we return the
items
element from the last position withreturn 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;
}
}
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 = [];
}
}
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;
}
}
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();
}
}
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
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! ⚡️