在 JavaScript 中，分配给变量的对象如何跟踪未来的变化？

Question

I have been practicing data structures with JavaScript recently and I found a snippet of code that I can't wrap my head around. I understand that when you assign an object to a variable, and then mutate the object, the original variable can "see" those mutations because when you assign the object to the variable you are not cloning the object, you are just passing a reference to it. However, the following code baffles my mind:

function ListNode(val, next) {
  this.val = (val === undefined ? 0 : val)
  this.next = (next === undefined ? null : next)
}

let tempList = [1, 1, 2, 4, 4, 100];

let point = new ListNode(tempList[0]);
let head = point;

for (let i = 1; i < tempList.length; i++) {
  point.next = new ListNode(tempList[i])
  point = point.next;
}

console.log(head); // Outputs the Linked List 1 -> 1 -> 2 -> 4 -> 4 -> 100

So when I try to follow the logic in my head, I picture it as follows:

In the first iteration, head and point hold the following information:

{
  val: 1,
  next: null
}

In the second iteration, point first holds this information:

{
  val: 1,
  next: {
    val: 1,
    next: null
  }
}

and so does head , but then the next step is what is confusing me. In my head, I'm overriding the current value of point with the newly created Node in the step before, so the variable should look like this:

{
  val: 1,
  next: null
}

and head since it's just holding a reference from point should look like that as well. HOWEVER, head looks as follows:

{
  val: 1,
  next: {
    val: 1,
    next: null
  }
}

and as the iterations keep going, obviously, head keeps track of all the linked nodes. That's the desired behavior, but I do not fully comprehend HOW that happens. Can somebody explain me why this is the case?

Answer 1

When you reassign point it doesn't affect the reference in head . It still refers to the first ListNode that was created.

It's no different from doing something like this:

let point = 1;
let head = point;
point = point + 1;

Reassigning point doesn't change the value of head , even though they were equivalent at first.

If you're familiar with languages like C or C++, you can think of the reference as being like a pointer. You start with two pointers to the same address, then reassign one of them; that won't change the other pointer.

Answer 2

In JavaScript variables don't bind to other variables. They bind to the value of the variable at the time, which in your case is the initial point object.

It sounds like your mental model is telling you head -> point -> {} when in reality both point to the same object , therefore binding point to a new object does not affect head .

head is not in the loop, therefore you're never actually updating the value of head once you've bound it to the first object point is bound to.