Javascript global variable updates when it shouldn't

Question

In that code:

window.g_b_editEnable = false;
window.g_a_PreEditData = 'hello';

 function EditRow(EditButton){
       if(!window.g_b_editEnable){
                 window.g_b_editEnable = true;
                 var a_i_Pos = a_o_table.fnGetPosition( EditButton.parentNode );                        
                 aData = a_o_table.fnGetData( a_i_Pos[0] );
                 console.log(window.g_a_PreEditData);
                 window.g_a_PreEditData = aData;
                 console.log(window.g_a_PreEditData);
                 aData[0] = '<button type=submit name=save>Save</button><button onclick=ResetTableFields(this) name=reset>Reset</button>';
                 for(count = 1; count < aData.length; count++){
                   aData[count] = '<input type=text value='+aData[count]+'></input>';
                 }
                 a_o_table.fnUpdate( aData, a_i_Pos[0], undefined, false, false);
                 console.log(window.g_a_PreEditData);
          }else{
                 return 1;
          }
  }

I try to use a global variable (window.g_a_PreEditData) to store a value so it can then be passed to another function.

But it happens that in the function you see I save the value of a local variable inside the global one, then I update the local variable, but I don't know why the global variable gets updated at the same time the local variable gets updated.

The console logs are the following one: Hello (value given at initialization) Value1 (value of the local variable) Value2 (value of the local variable after it has been updated)

When what I would like is: Hello Value1 Value1

Of course, if I declare a new variable and store the modifications on there (for example an array called 'aNewData') and it's in that variable that I store the updated values then since aData is not being modified it works fine and the global variable window.g_a_PreEditData isn't updated either, but... why does this happen? I thought that javascript worked passing the variables by value and not by reference, so once the global variable has been loaded with the values of the local one, no matter how many changes I make to the local variable, the global one shouldn't be affected unless I assign the value of the local variable to it again... or at least that's what I thought!

Can anyone explain me why this is happening? Thanks!

Answer 1

The issue here is that javascript passes objects around by reference.

This line of code

window.g_a_PreEditData = aData;

does not create a copy of the object and assign it. It instead assigns a reference.

In other words, after this call, window.g_a_PreEditData and aData are pointing to the same one object.

If this isn't what you want, you will have to clone aData. Since aData is an array, you can do this via the slice method.

window.g_a_PreEditData = aData.slice();

---

If aData was an object you would have to clone it some other way. See this question on the topic of cloning objects in javascript.