how is this function mutating non-returned array

Question

I'd ask a better question, but I don't don't know how. Thanks for your help.

***ISSUE: I'm sending array vari to a function and it's coming back changed even though I didn't return it or even use same variable name. Desired function: variable vari does not change

I've logged the function and isolated the change to the [].forEach() statement below, noted with ***. I send vari but return varis and assign to new variable sum. How does this change the vari variable?

//this is what calls the sub function using vari, an array, 411.0, 13.0
  var sum = doSum1(vari);

    function doSum1(vari0) {
  // called from doSum1

  // grab Variance data // ALL COLUMNS FOR NOW // fix loc/stat columns below
  var vstat = vari0[0].indexOf('Status');
  vari1 = vari0.filter(r=>r[vstat]); // to ensure indexOf works, and speed processing
  var vhdr = ['Campaign ID','Campaign','Site ID','Site','Placement','Placement ID','Date','DCM Imp','Upw Imp','Tag Location','Status','Site Count','Site Imp'];
  // move loc and status over in place of variance and percent (loc/stat will be site ct/imp)
  varis=[];

  // *** THIS FOREACH CHANGES varis AND vari. Not sure how... see more specifically below
  ['Not Tracking','Undertracking','Overtracking','Absent in DCM'].forEach(rf=>{
    varis.push(vhdr.map(r=>''));
    varis[varis.length-1][0]=rf;
    varis.push(vhdr);
    if(vari1.filter(r=>r[vstat].indexOf(rf)>=0).length==0) {
      varis.push(vhdr.map(r=>''));
      varis[varis.length-1][0]='none found';    
    } else {
      varis.push(vari1.filter(r=>r[vstat].toString().indexOf(rf)>=0)[0]); // break out of outer []
      //fix loc/stat location
      //*** MORE SPECIFICALLY, this line in particular changes in vari, not just varis as intended.
      varis[varis.length-1].splice(9,4,varis[varis.length-1][11],varis[varis.length-1][12],'','')
    }
    varis.push(vhdr.map(r=>'')); // trailing blank line
  });
return varis;

I tried this in place of the splice as well, but same result... just not sure how varis is changing vari...

  varis[varis.length-1][9] = varis[varis.length-1][11];
  varis[varis.length-1][10] = varis[varis.length-1][12];
  varis[varis.length-1][11] = '';
  varis[varis.length-1][12] = '';

Answer 1

vari is a 2D array. That means that every element in vari is an array as well, and as such passed by reference and subject to mutation.

The Array.splice() method mutates its argument array. In the code, each varis[varis.length-1].splice() call modifies an array object that is copied from vari1 by reference, and therefore also vari0 whose elements are array objects that are copied to vari1 by reference. This is what causes vari to mutate.

To avoid the issue, use one these patterns:

var vari1 = vari0.map(row => row.slice()).filter(r => r[vstat]);

or

var vari1 = vari0.map(row => row.map(value => value)).filter(r => r[vstat]);

The patterns use Array.map() and Array.slice()to get a shallow copy of the 2D array referenced by vari0 (i.e., vari).

The first map() creates a new array of that contains the rows of vari0. The rows are arrays and therefore mutable, so a slice() or another map() is required to copy the rows into new arrays as well.

Note that the copy is shallow, which means that only primitive values such as text strings and numbers are copied by value. Your comments indicate that the rows of vari only contain primitives, so the pattern will make a copy that is safe to modify and will not mutate vari. Were the rows of the vari 2D array contain yet more arrays or other objects, the would be copied by reference and therefore still be subject to mutation.

Note that Array.splice() and Array.slice() are very different from each other. The Array.splice() method mutates its argument array. The Array.slice() method creates a shallow copy of the array, and is in fact often used to safely copy 1D arrays that contain primitives. In your use case, the vari array does not contain primitives but arrays, so we need to call slice() within map() to copy the primitive values in the second level of the 2D array.

In the general case, deep cloning an array or another object is surprisingly complex. The patterns above are probably the simplest way to do it in your use case. See What is the most efficient way to deep clone an object in JavaScript?