Question

why is it that when I do this:

x = 5
(function bla(varX){
    varX = 7; console.log(x); //7
})(x);
console.log(x); //5

the x doesn’t change, since it’s in a closure if I understand correctly,
but here:

x = {a:5}

(function bla(varX){
    varX.a = 7; console.log(varX.a);
})(x)
console.log(x.a); //7

Why does x.a gets overwritten and x doesn’t?

Answer 1

In both functions you have a global x (on line one) and a local x (function bla(x){).

In the first example, you are just changing the values of a series of variables. Changing the value of the local x doesn’t touch the global x.

In your second example, you are passing a reference to the object you create to the function, not a copy of it. In the function you modify that object by assigning a new value to one of it’s properties. The value of both the global and local x remains the same (a reference to the object).