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
Top comments (0)