Assigning window variable to local variable

Question

I've been working on a web project, and I'm having an issue with assigning a window variable to another variable in Javascript.

For example, I have a function that generates a random code:

window.onload=function(){
    ...
    window.c=genCode(); //Gets an array with 4 strings like ['g', 'r', 'p', 'b'] (first letter of colors of the rainbow)
    ...
}

Then later on in the program, I have a test that will use the data in a variable, and minipulate the new variable

var guess=function(){
    ...
    let tempC=window.c;
    ...
    for(let i=0;i<4;i++){
        ...
        tempC[i]='n';
        ...
    }
}

The local variable tempC gets changed, but so does window.c.

My workaround is to just have a function that returns the variable.

var retCode=function(){
    return window.c;
}

This works, but why does this happen? When you assign data to a variable, I thought it should only modify the specified variable and not the one it gets the data from. Is this just a JavaScript quirk? Does it have to do something with how window works?

It's because you are passing a reference of the array. If you don't want the array to be altered, you must copy it: `let tempC = JSON.parse(JSON.stringify(window.c));`.. Or really, just look at this: https://stackoverflow.com/questions/9885821/copying-of-an-array-of-objects-to-another-array-without-object-reference-in-java — briosheje, Oct 15 '18 at 14:57
an array is copied by reference not by value. So when you change tempC you are changing the array referenced by window.c — Fabrizio Calderan, Oct 15 '18 at 14:57
Basically, JS arrays are copied "by reference", not by value, so both `window.c` and `tempC` point to the same array in memory — Ayush Gupta, Oct 15 '18 at 14:57
@RandyCasburn I am a high school programmer. I'm still new and learning how to do a lot of stuff. Just chill. — scoutchorton, Oct 15 '18 at 15:01
Start here: https://developer.mozilla.org/en-US/docs/Web/JavaScript — Randy Casburn, Oct 15 '18 at 15:02
To the other comments, thank you. It makes sense why it does that now. — scoutchorton, Oct 15 '18 at 15:03

score 0 · Answer 1 · answered Oct 15 '18 at 15:00

Array's and Objects are passed by reference in JavaScript. That means that the variable contains a reference to a specific array, not the array itself. So when you make modifications to that array, they persist everywhere else.

var arr = [1,2,3,4,5];

function changesArr(t){
  t.push(6);
  t.push(7);
}

changesArr(arr);
console.log('1 to 7');
console.log(arr);

var newArr = arr;
newArr.push(8);
console.log('1 to 8');
console.log(arr);

If you want to get a copy of the array that won't muck with the original value, you need to use an operation that returns a new array. Like slice()

var arr = [1,2,3,4,5];

function changesArr(t){
  t.push(6);
  t.push(7);
}

var diffArr = arr.slice();
changesArr(diffArr);
console.log('1 to 5');
console.log(arr);

console.log('1 to 7');
console.log(diffArr);

score 0 · Accepted Answer · answered Oct 15 '18 at 15:03

Arrays, in javascript, are passed by reference, you can read more about that here: Is JavaScript a pass-by-reference or pass-by-value language?

That said, to solve your specific case, just make a copy of the array. Because it's a small array, you don't even need to worry about performances, just do:

let tempC = JSON.parse(JSON.stringify(window.c));

This will convert the original array to a JSON-compliant string and parse it again, losing any reference to the original array.

If you don't like that approach, you can still find more here: Copying of an array of objects to another Array without object reference in javascript(Deep copy)

Assigning window variable to local variable

2 Answers2