Jquery function - When called second time, not receiving fresh data, uses old?

Question

I'm having trouble with a function that I'm calling multiple times. Every time I call it, it should receive fresh data (even if its the same as earlier) but somehow, next call to the function will result in what was expected output from the first call to the function.

The code:

$.calc=function(arrayName){
    console.log(arrayName);
    for(i=0;i<arrayName.length;i++){
        if(i==2){
            arrayName[i]="";
        }
    }
}

var arr=new Array();
arr[0]="saab";
arr[1]="saab";
arr[2]="saab";
arr[3]="saab";
arr[4]="volvo";
arr[5]="volvo";

//First run
$.calc(arr);

//Second run
$.calc(arr);

If you run the code (http://jsfiddle.net/76bme/) and open console logger/devtools you can see that I'm printing out the contents of the array that I passed along with the function, BEFORE doing anything with the array. Next time I call the function, I pass the same array (arr) to the function as in the first call to the function, so I expect that console.log in the beginning to print out the same contents from the array. But now the array holds everything as earlier except at index 2 where I modified it to "" AFTER I printed it out with console.log. If it was the other way around I would get it (having console.log after the for-loop) but now I'm just confused!?

So what am I doing wrong?

I get `["saab", "saab", "saab", "saab", "volvo", "volvo"] ["saab", "saab", "", "saab", "volvo", "volvo"] ` — j08691, Mar 31 '14 at 14:47
possible duplicate of [Is Chrome's JavaScript console lazy about evaluating arrays?](http://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) — epascarello, Mar 31 '14 at 14:49
@Seiyria: I'm expecting the same output from the both calls, like: ["saab", "saab", "saab", "saab", "volvo", "volvo"] ["saab", "saab", "saab", "saab", "volvo", "volvo"] For my head, I'm calling the function with same parameters, if not, I need to understand how I'm not doing it :/ — Niclas, Mar 31 '14 at 14:56

score 0 · Answer 1 · answered Mar 31 '14 at 14:47

Change

console.log(arrayName);

to

console.log(arrayName.join(";"));

And you will see what you expect. The console [depending on state] does not show a snapshot of the object/array at the current time it was logged, sometimes it stores a reference to it so it will have the current values.

score 0 · Accepted Answer · answered Mar 31 '14 at 14:57

0

That is because arrayName is a reference to your array object. So when you change something in that object, your arr is affected aswell. If you don't want this behaviour, you need to "create a copy" of your array :

$.calc=function(arrayName){
    console.log(arrayName)
    var myArr = Array.prototype.slice.call(arrayName); //Just here!
    for(i=0;i<myArr.length;i++){
        if(i==2){
            myArr[i]="";
        }
    }
}

Fiddle : http://jsfiddle.net/76bme/5/

answered Mar 31 '14 at 14:57

Karl-André Gagnon

33,662
5
50
75

Thanks! I didn't know that much of JS actually, so I never thought that I was changing a reference to the original array. :) – Niclas Mar 31 '14 at 15:14

Jquery function - When called second time, not receiving fresh data, uses old?

2 Answers2