How to Implement the Stack Data Structure in Javascript
Tags: javascript, webdev, computerscience, codenewbie
Published: 2020-07-28 14:06:23

In Data Structures, a **Stack** is an abstract data type that serves as a collection of items. A stack has two core operational principles: pop and push. The data type got its name from its behavior where similar to a real-world stack, a stack ADT only allow operations from one end.


### The LIFO Principle
Due to its behavior, the stack is called a LIFO data structure. LIFO stands for Last In First Out, where the last element put in the storage is the first one to be popped out.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q5a0ym6de9ckp9buhkob.jpg)


### Implementation
Enough with the texts, let us see the code in action.
We will cover the following JavaScript topics in this challenge:
1. Classes
2. Functions
3. Array's pop and push functions
4. The "**new**" keyword
5. Constructor

#### Class Definition
First, we define our class using the "class" keyword and declare a constructor function to create an empty array when the class is first initialized. 
```javascript
class Stack { 
    constructor() { 
        this.items = []; 
    } 
}
```
Typically, the class name begins with a capital letter. However, this is just a widely adopted naming convention and not a syntax requirement. Note, the constructor function does not require the "function" keyword. This is true for all functions declared inside the class. Another point worth noting is that functions declared inside a class are referred to as **methods** and are accessible from outside of the class by default.

### Methods inside the class
Next, we add methods to perform the different operations on the stack. 
```javascript
class Stack { 
    constructor() { 
        this.items = []; 
    }  
    // Push
    push(element){ 
        this.items.push(element); 
    } 
    // pop() 
    pop(){ 
      if (this.items.length == 0) 
          return -1; 
      return this.items.pop(); 
    } 
    // peek() 
    peek(){ 
      return this.items[this.items.length - 1]; 
    } 
    // isEmpty() 
    isEmpty(){ 
      return this.items.length == 0; 
    } 
} 
```
The **push** method is used to add an element on top of the stack and does not return anything.
The **pop** method, on the other hand, removes the topmost element from the stack and returns it. Inside this method, we first confirm that the stack is not empty and only proceed to "pop" the element on top of the stack if it is not empty.
The **peek** method, just like the method name suggests, returns the element on top of the stack without affecting the stack.
The **isEmpty** method is used to check whether the stack is empty and return true or false.


### Working with the Stack
First, we initialize a new instance of the stack by using the "**new**" keyword and assign that to a variable. This creates an empty stack as the constructor inside the class is called immediately.
```javascript
var stack = new Stack(); 
```

After that, we can use the various methods in our class instance to perform the various operations.
```javascript
stack.isEmpty()   //returns true
stack.push(1)     //does not return anything
stack.peek()      // returns 1
stack.push("Hello")
stack.peek()      // returns the string "Hello"
stack.pop()       // returns "Hello"
stack.peek()      // returns 1
stack.pop()       //returns 1
stack.peek()      //returns -1(indicates the stack is empty)
```
Note, you can work with more than one stack by creating new instances of the "**__Stack__**" class using the "**__new__**" keyword and assigning that to different variables.


That is all we need to create a functional Stack in Javascript!