Back ./es6/stacks

Understanding Stacks In Javascript

A Stack is a type of a data structure. A data structure is a data organization, management and storage format that enables efficient access and modification.

Other examples of Data Structures are linked lists, arrays, objects, graphs, trees etc..

What's a stack?

Think of a stack as a collection of books piled up together on top of each other. So this would be a stack of books.

While interacting with this stack of books, there are some actions you'd do to it. Either adding a book to it; at the top. Or removing a book from this stack by picking the one at the top idealy.

The book at the top of the stack of books is basically the peek of this book stack. Makes sense? Haha, hope so. If not, let's start again.

You will notice that we are basically applying the LIFO principle. Last In, First Out. You can remove only the top book, also you can add a new book at the top.

Examples?

The simplest application of a stack is to reverse a word. You push a given word to stack - letter by letter - and then pop letters from the stack. Another application is an "undo" mechanism in text editors; this operation is accomplished by keeping all text changes in a stack.

More examples available here

Implementation with classes

Learn more about Classes In Javascript in this doc if you are not familiar with classes in es6 yet.

Declare the Stack class and define an empty array to store our items.

  // Define Stack class...
  class Stack {
    constructor() {
      // Empty stack array...
      this.stack = [];
    }
  }

We add item at the top of the stack using push array method.

 // Add item at the top...
  push(item) {
    return this.stack.push(item);
  }

We remove the item at the top of the stack using pop array method.

 // Remove item at the top...
  pop(item) {
    return this.stack.pop(item);
  }

Method to get the item at the top of the stack.

 // Get item at the top...
  peek() {
    return this.stack[this.length - 1];
  }

Define a length getter method.

 // Get stack length...
  get length() {
    return this.stack.length;
  }

Check if the stack is empty.

 // Check if stack is empty...
  isEmpty() {
    return this.length === 0;
  }

Print the stack, basically returns an array.

 // Print updated stack...
  print() {
    return this.stack;
  }

Our whole Stack class code snippet.

 // Stack using classes es6...
class Stack {
  constructor() {
    this.stack = [];
  }

  // Add item at the top...
  push(item) {
    return this.stack.push(item);
  }

  // Remove item at the top...
  pop(item) {
    return this.stack.pop(item);
  }

  // Get item at the top...
  peek() {
    return this.stack[this.length - 1];
  }

  // Get stack length...
  get length() {
    return this.stack.length;
  }

  // Check if stack is empty...
  isEmpty() {
    return this.length === 0;
  }

  // Print updated stack...
  print() {
    return this.stack;
  }
}

Create an instance of the Stack class (outside the class).

 // Create an instance of the Stack class...
  let stack = new Stack();

Adding data to the stack => let's say you have an array of books, then;

 // Create an instance of the Stack class...
  books.forEach(book => {
    // Push each book to our stack...
    stack.push(book);
  });
    // Print the updated stack...
    let output = stack.print();
    console.log(output);

Learn more about Classes In Javascript in this previous tech doc.

Got any question? You wanna have a chat? Hit my inbox on twitter asap!