In JavaScript, how does an object assigned to a variable keeps track of future mutations?

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?

"head since it's just holding a reference from point should look like that as well" - no, head does not reference point. After head = point, both variables do hold a reference to the object in memory. Not to each other. — Bergi
– Bergi, Commented Sep 25, 2020 at 23:24

Ousen · Accepted Answer · 2020-09-25 23:14:05Z

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.

answered Sep 25, 2020 at 23:14

Ousen

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2020-09-25 23:06:06Z

2

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.

answered Sep 25, 2020 at 23:06

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

In JavaScript, how does an object assigned to a variable keeps track of future mutations?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related