STACK IMPLEMENTATION AND OPERATIONS IN JAVASCRIPT

INTRODUCTION

A stack is a linear data structure that operates on the Last-In-First-Out(LIFO) principle. Being a linear data structure, it simply has one pointer, top, which points to the stack's topmost member. When a new element is added to the stack, it is placed at the top, and the element can only be removed from the stack.
Some of the things to keep in mind when working with stacks include:
It is named a stack because it behaves like a real-life stack, such as a stack of books.
A stack is an abstract data type having a predefined capacity, meaning i can only store components of a certain size.
It’s a data structure that inserts and deletes elements in a specific order, which can be Last-In-First-Out(LIFO) or First-In-Last-Out(FIFO).

WORKING OF STACK

The LIFO pattern is used by Stack. There are five memory blocks in the stack, as shown in the diagram below; thus, the stack's size is 5.

Assume we want to store the elements in a stack, which is currently empty. As demonstrated below, we have taken a size 5 stack and are pushing the components one by one till the stack is filled.

Because our stack is full, the stack's size is 5. When we entered the new element in the stack in the situations above, we can see that it went from top to bottom. From the bottom to the top, the stack is filled.

IMPLEMENTATION OF THE STACK

Stacks can be implemented in any programming language, but the focus of this article is on implementing the stack and stack operations using JavaScript. A stack can be implemented using an array or a linked list. In this article, we’ll be implementing a stack using an array. The following are basic operations that can be performed on a stack:

Push - Adds an element to the stack
Pop - Removes an element from the stack
Peek - Gets the top data element of the stack, without removing it.

INSTANTIATING A STACK WITH THE ABOVE-NAMED OPERATIONS

To initialize the stack with an array, we’ll be making use of JavaScript classes.

class Stack {
  constructor() {
    this.storage = [];
    this.top = -1;
  }
}

The code block above handles the creation of the stack. The constructor() method is a class method that creates an object instance of that class.

Next, we need to add an element to the stack by using the push method. This is done using the code block below

PUSH

push(data) {
  this.top++;
  this.storage[this.top] = data;
}

The push method above accepts an argument represented as data and adds the data element to the stack.

POP

pop() {
  if(this.top === -1) {
    return null;
  } else {
      let data = this.storage[this.top];
      this.top--;
      return data;
    }   
}

The pop method accepts no arguments. When this method gets called, it removes the element at the top of the stack. If the stack is empty, it returns null.

PEEK

peek() {
  return this.storage[this.top] = data || null;
}

The peek method like the pop method does not accept any arguments. It simply returns any element at the top of the stack. If the stack is empty, it returns null.

class Stack {
  constructor() {
    this.storage = []
    this.top = -1
  }
  push(data) {
    this.top++;
    this.storage[this.top] = data;
  }
  pop() {
    if(this.top === -1) {
      return null;
    } else {
        let data = this.storage[this.top];
        this.top--;
        return data;
      }
  }

  peek() {
    return this.storage[this.top] = data || null;
  }
}

The code snippet above shows the full Stack class with the operations as methods of the class.
USAGE OF THE STACK CLASS

// initialize the class
const stack = new Stack()

// add elements to the stack
stack.push(3) 
stack.push(4) 
stack.push(5) 
stack.push(6) 

console.log(stack) // returns [3, 4, 5, 6];

//remove an element from the stack
stack.pop() 
console.log(stack) // returns [3,4,5];

// get the element at the top of the stack
console.log(stack.peek()) // returns 5;

CONCLUSION

We have successfully implemented a stack and some of its operations using JavaScript classes and array. The stack operations we covered are the push operation, the pop operation and the peek operations. That’s it, guys. Please share your thoughts and comments on the article. See you in the next article.