How to Implement the Stack Data Structure in Javascript

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.

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.

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.

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.

var stack = new Stack(); 

After that, we can use the various methods in our class instance to perform the various operations.

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!