Javascript: How You Can Implement a Stack in 3 Mins
Tags: javascript, react, angular, vue
Published: 2020-12-27 23:49:02

---
canonical_url: https://www.ddevguys.com/javascript-how-you-can-implement-a-stack-in-3-mins
---
<noscript><img alt="Rocks stacked on each other" class="t u v hc aj" src="https://miro.medium.com/max/10944/1*eQURSxQ8LwEugssoZd21Ew.jpeg" width="5472" height="3648" srcSet="https://miro.medium.com/max/552/1*eQURSxQ8LwEugssoZd21Ew.jpeg 276w, https://miro.medium.com/max/1104/1*eQURSxQ8LwEugssoZd21Ew.jpeg 552w, https://miro.medium.com/max/1280/1*eQURSxQ8LwEugssoZd21Ew.jpeg 640w, https://miro.medium.com/max/1400/1*eQURSxQ8LwEugssoZd21Ew.jpeg 700w" sizes="700px"/></noscript>

Rocks stacked on each other<span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv"></span>

Introduction

So, a few days ago, I ran a survey on my stories on [Instagram](https://www.instagram.com/d_dev_guys/) and the result of this survey is the reason I decided to write a blog post about the topic **STACKS** in using JavaScript.

![Instagram survey, where 76% voted yes to an article about stacks with javascript](https://miro.medium.com/max/54/1*K8g4CAlbJbXzOhQU3wLtpg.png?q=20)

<noscript><img alt="Instagram survey, where 76% voted yes to an article about stacks with javascript" class="t u v hc aj" src="https://miro.medium.com/max/1072/1*K8g4CAlbJbXzOhQU3wLtpg.png" width="536" height="604" srcSet="https://miro.medium.com/max/552/1*K8g4CAlbJbXzOhQU3wLtpg.png 276w, https://miro.medium.com/max/1072/1*K8g4CAlbJbXzOhQU3wLtpg.png 536w" sizes="536px"/></noscript>

Instagram poll<span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv"></span>

**What's the stack data structure?**

A stack is a data structure that follows the **LAST IN FIRST OUT (LIFO)** principle. There are several real-world examples, e.g. plates, books stacked on each other, etc.

![Books stacked on each other](https://miro.medium.com/max/40/1*_dIyKnW-30D4x81zPfX7sQ.jpeg?q=20)

<noscript><img alt="Books stacked on each other" class="t u v hc aj" src="https://miro.medium.com/max/5938/1*_dIyKnW-30D4x81zPfX7sQ.jpeg" width="2969" height="4454" srcSet="https://miro.medium.com/max/552/1*_dIyKnW-30D4x81zPfX7sQ.jpeg 276w, https://miro.medium.com/max/1104/1*_dIyKnW-30D4x81zPfX7sQ.jpeg 552w, https://miro.medium.com/max/1280/1*_dIyKnW-30D4x81zPfX7sQ.jpeg 640w, https://miro.medium.com/max/1400/1*_dIyKnW-30D4x81zPfX7sQ.jpeg 700w" sizes="700px"/></noscript>

Books stacked on each other

The removal and addition of new items in a stack take place at the same end. This is because stacks follow the **LIFO** principle this means that the newly added items are the first to be removed.

<span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv"></span>

**Let’s create a stack**

Enough of the explanations, let's write some codes🤓🤓🤓! We start with the basics and declare a class using an array in the constructor property of our class.


```
class Stack {
      constructor() {
         this.items = [];
      }
      //methods to be implemented go here
      Push(item)
      Pop()
      Peek()
      isEmpty()
      Clear()
      Size() 
      Print()
}
```


Let’s implement each method for our stack Class.

**Push**: This adds items or an item to the top of the stack.


```
Push(item) {
     //pushing an item into the stack
     this.items.push(item)
}
```


**Pop**: This removes the top item from the stack and returns the removed item.


```
Pop() {
    //removes an item from the stack
    return this.items.pop()
}
```


**Peek**: This returns the top element from the stack but doesn’t modify it (it doesn’t remove it).


```
Peek() {
     //returning the top item without modifying it
     return this.items[this.items.length - 1]
}
```


**isEmpty**: This returns false if the stack contains items but returns true if it does not contain an item.


```
isEmpty() {
        //return true if the stack is empty
        return this.items.length == 0;
}
```


**Clear**: This would remove all the items from the stack.


```
Clear() {
      //output all the content of the stacks
      return this.items = [];
}
```


**Size**: This returns all the number of items contained in the stack. (this is similar to the length property of the array data-structure)


```
Size() {
     //returns the number of items in the stack
     return this.items.length;
}
```


**Print:** This would output the content of the stack.


```
Print() {
      //output all the content of the stacks
      console.log(this.items.toString())
}
```


<span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv"></span>![Image for post](https://miro.medium.com/freeze/max/60/1*D2eQjN5bAS7f_rX_Xpa81A.gif?q=20)

<noscript><img alt="Image for post" class="t u v hc aj" src="https://miro.medium.com/max/996/1*D2eQjN5bAS7f_rX_Xpa81A.gif" width="498" height="245" srcSet="https://miro.medium.com/max/552/1*D2eQjN5bAS7f_rX_Xpa81A.gif 276w, https://miro.medium.com/max/996/1*D2eQjN5bAS7f_rX_Xpa81A.gif 498w" sizes="498px"/></noscript>

**YOOHOO**…Champ! You made it this far! You are absolutely amazing

**Let’s use the stack class**

The first thing we have to do is to instantiate the stack class we created.


```
//instantiating the stack
let stack = new Stack()
```


Next, we can add some items (we push 1 and 2, we can push any item to the stack)


```
//pushing a new item to stack
stack.Push(1)
stack.Push(2)
```


Next, we can go ahead to test if the items were added to the stack. This should return `false`.


```
//returns false
console.log(stack.isEmpty());
```


Let’s go ahead and call the peek method, we would get `2` this is because it’s the last element added to the stack.


```
//returns 2
Console.log(stack.Peek());
```


Let’s go ahead and add one item to the stack.


```
//adds 3 to the stack
stack.Push(3);
```


Let’s check the size to confirm how many items are in our stack.


```
//out puts 3
console.log(stack.Size());
```


Let’s print all the items in our stack


```
//returns [1,2,3]
Stack.Print()
```


Let’s go ahead and remove the item from the stack


```
//removes each item from the stack
Stack.Pop()
Stack.Pop()
Stack.Pop()
```


Let’s check once again if it’s empty


```
//returns true
Stack.isEmpty();
```


<span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv hw"></span><span class="ht es fx hu hv"></span>

There you have it!!!

In just a few simple steps we have implemented stacks using JavaScript.

As with everything it really goes into practicing these steps so you get to understand it deeply. In a later article, I would be writing about the application of stacks as well as solving some common computer science problems with it.

If you enjoyed this article why not follow me on [Twitter](https://twitter.com/chineduvictor7), also take a screenshot and send a DM on [Instagram](https://www.instagram.com/d_dev_guys/), I will give you a shoutout alongside other of our 36k community members.😉😉😉

Cheers! Happy Hacking.