Question: Linked list implementation

[magicspon]

In the linked list, or queue implementation you have two lines like this.

this.tail.next = node
this.tail = node

I can't get my head around this.

surely this.tail.next gets blown away by the next line where we're setting this.tail

[ObscureBrandon]

To append newly created nodes in linked lists, we have to point our current tail to the newly created node and then set the tail to our new node. The order is important as setting the tail prematurely will mean that we no longer have a way to connect the last node of our list to our new tail.

[magicspon]

but doesn't setting the tail to our new node overwrite this.tail including this.tail.next we set on the previous line.
I understand the why, but not the how. in my mind, line 1 is overwritten by line 2...

i.e

this.tail.next = node // --> this.tail.next === node
this.tail = node // --> now this.tail === node so -> this.tail.next === waa?

[ObscureBrandon]

It doesn't overwrite it as this.tail just points to a Node object and changing what it points to doesn't tamper with the referenced node.
Let's call our old and new tails A and B respectively.

this.tail.next = node; // sets referenced node's (node A) `next` property to our new node (node B)
this.tail = node; // instead of having `tail` point to node A we just change it to node B. This does not affect Node A

let A = [1, 2, 3];
let pointer = A;
pointer.push(4);

console.log(A); // [1, 2, 3, 4]
pointer = undefined;
console.log(A); // [1, 2, 3, 4]

[magicspon]

if this.tail points to Node B... how does this.tail.next still point to Node A when on line two we are setting this.tail.
If, for example i set this.tail to 25, this.tail.next is no longer going to be a thing. what am i missing here?!!

sorry if i'm going round in circles.

[caportil]

I think the confusion here has to do with the concept of Javascript references, which can be easier to understand by visualizing what's happening step by step.

Let's say you have a simple linked list below with nodes A/B/C and want to append node D. The steps you listed will execute as follows:

In step 1, its important to note that this.tail is just a reference to node (C), rather than being a node itself. As with the earlier example, if you create a Javascript object (i.e. let A = [1, 2, 3]) and then assign it to another variable (i.e. let B = A), the latter doesn't create a brand new copy- it just references the existing one. Similarly here, this.tail is not its its own copy of whatever node (C) was added to this linked list at some point, its just a reference to it.

In step 2, this.tail = node doesn't mutate or overwrite any data to node (C) the way step 1 does. Instead, it simply reassigns the this.tail reference from node (C) to the new node (D). This means that node (C) is untouched, which means it keeps the modifications from step 1 (its next property still points to D). But now, this.tail points to (D), as desired.

JS references (similar but not identical to the concept of "pointers") can be tricky to understand at first, but there are some great online resources that explain things pretty effectively. Personally I'd recommend the following post on Codeburst which I think does a good job of summarizing: https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

[magicspon]

@ObscureBrandon @caportil thank you both for helping me understand this.

[ThePrimeagen]

i must of made myself a good ol fashion mistake while doing this live :)

I am very sorry, but hey! this is a really nice explanation of what is going on. I am unsure what to do with this other than leave it open as people need to see it if they run into this ^^