DEV Community

miku86
miku86

Posted on

JavaScript Data Structures: Stack: Push / Add a new node

#beginners #tutorial #javascript #webdev

Intro

Last time, we learned what a Stack is and set it up.

Today, we learn how to push / add a new node on top of the Stack.

Starter Code

We start with the code from the last part.

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Stack {
  constructor() {
    this.length = 0;
    this.last = null;
  }
}
Enter fullscreen mode Exit fullscreen mode

Thoughts

First, we should think about the constraints and possibilities:

If the Stack is empty:

  • create a new node
  • set the new node as the last node
  • increase the stack's length by 1
  • return the new node

All remaining cases:

  • create a new node
  • set the current last node as the new node's next node
  • set the new node as the new last node
  • increase the stack's length by 1
  • return the new node

Example 

// current stack:
A <== B (last)

// desired stack:
A <== B        <== C (last)
Enter fullscreen mode Exit fullscreen mode

Steps:

// current stack:
A <== B (last)

// set the current last node as the new node's next node
A <== B (last) <== C

// set the new node as the new last node
A <== B        <== C (last)

// desired stack:
A <== B        <== C (last)
Enter fullscreen mode Exit fullscreen mode

=> stack after last step equals the desired stack

Implementation 

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

class Stack {
  constructor() {
    this.length = 0;
    this.last = null;
  }

  push(value) {
    // create a new node
    const newNode = new Node(value);

    if (!this.length) {
      // stack is empty, therefore set the new node as the last node
      this.last = newNode;
    } else {
      // set the current last node as the new node's next node
      newNode.next = this.last;
      // set the new node as the new last node
      this.last = newNode;
    }

    // increase the stack's length by 1
    this.length += 1;
    // return the new node
    return newNode;
  }
}
Enter fullscreen mode Exit fullscreen mode

Result

Let's have a look how to use the push method and its results.

const newStack = new Stack();

// should be empty
console.log(newStack);
// Stack { length: 0, last: null }

// one new node
console.log(newStack.push("A"));
// Node { value: 'A', next: null }

// should have one node
console.log(newStack);
// Stack { length: 1, last: Node { value: 'A', next: null } }

// one new node
console.log(newStack.push("B"));
// Node { value: 'B', next: Node { value: 'A', next: null } }

// should have two nodes
console.log(newStack);
// Stack {
//   length: 2,
//   last: Node { value: 'B', next: Node { value: 'A', next: null } }
// }
Enter fullscreen mode Exit fullscreen mode

Next Part

We will implement our next method to pop the last node.

If you want to get notified, subscribe!

Top comments (2)

Collapse
 
jannikwempe profile image
Jannik Wempe •

Hi, I love this series. I always try to implement it by myself first.

Came up with a slight improvement of the push function:

// ....
push(value) {
    const newNode = new Node(value);

    if (this.length) newNode.next = this.lastNode;
    this.lastNode = newNode;
    this.length++;
    return this;
  }
// ...
Enter fullscreen mode Exit fullscreen mode

I also like to return the whole object for the possibility of chaining the function:

const myStack = new Stack();
myStack
.push("a")
.push("b")
.push("c");
Enter fullscreen mode Exit fullscreen mode

Keep on doing this series. Love it! :-)

Collapse
 
miku86 profile image
miku86 •

Hey Jannik,

thanks for your feedback,
I appreciate it.

You are right, there is some duplication.
I wanted to stay consistent with the Thoughts section,
therefore I implemented it my way.

Greetings
Michael

Read next

mshsayket profile image

Laravel 11 Livewire Wizard Multi Step Form Tutorial

Saddam Hossain -

m_sea_bass profile image

Enabling Application Downloads in Local bolt.new

M Sea Bass -

gladiatorsbattle profile image

How to Kickstart Your Web Development Journey in 2024: A Comprehensive Guide

Gladiators Battle -

spicecoder profile image

Hierarchical Flattening: The Secret to Managing Complexity in Software Design

pronab pal -