Implementing Stack data structure in JavaScript

Lets start from the most obvious question in this context;

What are data structures in programming?

In computer science, a data structure is a format to organize, manage and store data in a way that allows efficient access and modification.

Data structures are the most basic concept of any programming language that help us play with data. We store data in different data types based on the data and what we want to do with it.

For instance, if you want to store user form input, you would like to store it as an object as key value pairs, with keys being input name and value being the user input. If you want to store list of choices by user, i don't know about you, but I would store it as an array.

Different datastructures store data in a different way, work on that data in its own way, and expose data in a unique manner too. Lets have a look at Stack data structure.

Stack Data Structure:

Stack data structure works similar as stack of concrete blocks. Everytime we add new block it goes on top of the stack. And If we want to remove one, we have to remove it from the top for other blocks to be available for removing. This specific pattern in programming terms is refered as LIFO (Last in, first out) pattern. So long story short, if you have a data, that needs to follow this pattern, I beg you to implement stack. Don't apply any of your top-level theories to it.

Implementation:

Lets start by creating a JavaScript ES6 Class. We will define a constructor function to initialize and array that will mimic stack.

1class Stack {
2  constructor() {
3    this.array = [] // intiate stack as empty array
4  }
5}

Stack methods:

We are gonna need to add some methods to our class, to add data to the stack, remove it.

Utility Methods (size, isEmpty):

1class Queue {
2  constructor() {
3    this.array = [] // intiate queue as empty array
4  }
5  
6  size() {
7    return this.array.length
8  }
9  
10  isEmpty(){
11    return this.array.length === 0
12  }
13}

size: returns the length property of the array, which is length of the queue.

isEmpty: This method simply checks the length of the array.

Add Data (push):

Lets start by method to add data at the top of stack;

1class Stack {
2  constructor() {
3    this.array = [] // intiate stacks as empty array
4  }
5  
6  size() {
7    return this.array.length
8  }
9  
10  isEmpty(){
11    return this.array.length === 0
12  }
13  
14  push(item) {
15    // add item to the stack
16    this.array.push(item);
17  }
18}

Remove Data (pop):

1class Stack {
2  constructor() {
3    this.array = [] // intiate stacks as empty array
4  }
5  
6  isEmpty() {
7    // check if stack is empty
8    return this.array.length === 0;
9  }
10
11  push(item) {
12    // add item to the stack
13    this.array.push(item);
14  }
15
16  pop() {
17    if (this.isEmpty()) return "No Item To Remove.";
18    // remove last item in the stack
19    return this.array.pop();
20  }
21}

Pop: pop method returns the last item of the stack, and remove it.

Viewing Data (peek, print):

Lets create peek method to get the last item of the stack and the print method to print out all of the entries.

1class Stack {
2  constructor() {
3    this.array = []; // intiate stacks as empty array
4  }
5
6  isEmpty() {
7    // check if stack is empty
8    return this.array.length === 0;
9  }
10
11  push(item) {
12    // add item to the stack
13    this.array.push(item);
14  }
15
16  pop() {
17    if (this.isEmpty()) return "No Item To Remove.";
18    // remove last item in the stack
19    return this.array.pop();
20  }
21
22  peek() {
23    // returns last item in the stack
24    return this.array.at(-1);
25  }
26
27  print() {
28    // iterate over stack items and return as collective string
29    let str = "";
30    for (let i = 0; i < this.array.length; i++) {
31      str += this.array[i] + " ";
32    }
33    return str;
34  }
35}

Peek: peek method uses array at method to target a negative index of the array, that gives us last item.

Print: print method iterates over all of the items while keep concatenating them to a result string.

Stack Use:

Lets create instance of Stack class, and try using different methods.

1// renaming console.log
2const l = console.log;
3
4// create Stack instance
5let stack = new Stack();
6
7l(stack.print()); // ''
8l(stack.isEmpty()); // true
9l(stack.push("Item 1"));
10l(stack.push("Item 2"));
11l(stack.print()); // 'Item 1 Item 2'
12l(stack.pop()); // Item 2
13l(stack.print()); // 'Item 1'
14l(stack.push("Item 3"));
15l(stack.peek()); // Item 3
16l(stack.isEmpty()); // false

Have a good day. See you in next one.