js global and local scope

Question

I'm experimenting a little with scopes and I stumbled upon this thing I don't understand.

 var GV = 'global_var' function changeVar(lv) { console.log('inside function lv is '+lv); lv='local_var' console.log('after changing value lv is '+lv); console.log('inside function GV is '+GV); } console.log('before function GV is '+GV); changeVar(GV); console.log('after function GV is '+GV);

If I run the code above the scope of lv is local, and any modification doesn't change GV in the global scope, but if I change GV to be an array and modify one of its elements in the same function, then the global GV changes too. Why is that? I have a feeling that it might be something related to instances but I don't get it.

 var GV = [1,5,8] function changeVar(lv) { console.log('inside function lv is '+lv); lv[1]=[0] console.log('after changing value lv is '+lv); console.log('inside function GV is '+GV); } console.log('before function GV '+GV); changeVar(GV); console.log('after function GV is '+GV);

I thought about hoisting (so if ls is declared inside the function as a new variable) but if it was because of that shouldn't the first console.log inside the function show undefined?

Answer 1

It is because when var GV = 'global_var' , the GV variable contains the actual string 'global_var'. When you pass GV to changeVar , it is passed by value, ie inside the scope of the changeVar function, a new variable lv is created and the value 'global_var' is copied to the new new variable. Immediately after the function is called, this is the state:

GV still contains 'global_var', and lv contains a copy of 'global_var', the exact same value.

Now inside the local scope, lv='local_var' and lv is updated, but GV stays the same. Hence, after you exit the function, GV remains unaltered, as it is residing in an altogether different memory location.

Now let's look at the second case, where GV = [1,5,8] . In this case, GV is assigned a JavaScript array, and remember, arrays are objects. Objects have references, so the GV variable contains the reference to the [1, 5, 8] array. Now once you call the function changeVar , passing in GV as an argument, the reference of the array is passed and stored in lv . Now immediately after the function call, this is the state:

GV contains a reference to [1, 5, 8], and lv also contains the same reference to [1, 5, 8]. So it is a pass by value reference, ie the reference is passed, and the entire array is not passed as a copy to the function. Inside the function, when you execute lv[1]=[0] , it updates the original array in the memory to [1, 0, 8].

When you exit the function, GV is still pointing to the original array, and when you print GV it shows the updated array [1, 0, 8].