Why this code references different result

Question

I am new to JS and was learning value and reference types in JS but I faced some confusion on the below code:

const obj = {
  arr: [{
    x: 17
  }]
};

let z = obj.arr;

z = [{
  x: 25
}];

console.log(obj.arr[0].x);

The above code outputs 17 but why? Well, arr is a reference type, that is, it is mutable then we equalize obj.arr to variable z so z holds reference to arr array in obj object. Finally, z holding 17 then we change it to 25 but it output 17.

Answer 1

First time, you have something like this:

obj ---> {
           arr ---+
         }        |
                  |
                  v
                  [
                     [0] ---+
                  ]         |
                  ^         |
                  |         v
                  |         { x: 17 }
                  |
                  |
z ----------------+

Note that z now points to the same object as obj.arr but not to obj.arr.

Reassigning z changes only what z points to, but it doesn't affect obj.arr; it refers to the same object as before:

obj ---> {
           arr ---+
         }        |
                  |
                  v
                  [
                     [0] ---+
                  ]         |
                            |
                            v
                            { x: 17 }
                  
                  
z ----> [
          [0] ----> { x: 25 }
        ]

That's why obj.arr didn't change.

But how to change it via z, you might ask?

You can't change obj.arr itself, but you can still mutate it.

Instead of your code, you can use this:

z[0] = { x:25 }

Now you have:

obj ---> {
           arr ---+
         }        |
                  |
                  v
                  [
                     [0] ---> { x: 25 }
                  ]         
                  ^         
                  |        
                  |         { x: 17 } -----> Garbage collection
                  |
                  |
z ----------------+

const obj = {
    arr: [{ x: 17 }]
};

let z = obj.arr;

z[0] = { x: 25 };

console.log(obj.arr[0].x);

Answer 2

const obj = {
 arr: [{ x: 17 }]
};

/**
 * z -> it is only reference to original object (const obj in our case). 
 * It is like another door to the same room
 */
let z = obj.arr;

/*
 * now z -> points to other value (array), but previous still exist
 */
z = [{ x: 25 }]; 

console.log(obj.arr[0].x);

Answer 3

You've just created z, which is a copy of obj.arr . If you change the value of z, the copy, the original (obj.arr) do not change.

I'm French that's why my english isn't perfect

Answer 4

The reference to obj.arr is replaced. z = [{ x: 25 }]; simply creates a new array with a new object, { x: 25 }, inside it. Then, it places a reference to this new array into z.