Filling a Single or Double Javascript Array in a Single Function

There is something about JavaScript arrays I appear not to know as I am getting results I do not understand. I come from a C++ background.

Why is the Double-Array result [Empty String] when I believe it should be displaying the contents of a double-array. The Single array result is how I expect it should be.

I thought the results should be

1,2,3

1,2,3,4,1,2,3,4,1,2,3,4

But they are

1,2,3

[Empty String]

Why?

MyClass = function() {
  this._arr = [1];
};

// Either 1 or 2 integer arguments are sent and are accessed through 'arguments'
MyClass.prototype.ZeroArray = function() {
  var isDoubleArray = arguments.length > 1;
  var i, j, iter1, iter2;
  var arrUse;

  // If it is just a single array iter1 will be 1
  // The 'i' iteration is used to set arrUse
  iter1 = isDoubleArray ? arguments[0] : 1;
  iter2 = isDoubleArray ? arguments[1] : arguments[0];

  // Clear any existing array
  this._arr.length = 0;

  // The i loop either works on arr[i][]
  // or sets arrUse to arr in the case of a single array
  for (i = 0; i < iter1; i++) {
    arrUse = isDoubleArray ? this._arr[i] : this._arr;

    if (isDoubleArray) arrUse = [];

    // The j loop fills the values of the array either arr[i][*] or arr[*]
    for (j = 0; j < iter2; j++) {
      arrUse[j] = j;
    }
  }
};

var str;
var g_GlobalSingle = new MyClass();
g_GlobalSingle.ZeroArray(3);
str = g_GlobalSingle._arr.toString();
document.getElementById("Single").innerHTML = str.length > 0 ? str : "[Empty String]";

var g_GlobalDouble = new MyClass();
g_GlobalDouble.ZeroArray(3, 4);
str = g_GlobalDouble._arr.toString();
document.getElementById("Double").innerHTML = str.length > 0 ? str : "[Empty String]";

<p id="Single">The single array contents will be shown here.</p>

<p id="Double">The double array contents will be shown here.</p>

Answer

I can explain the “Why”, it is quite simple. Look at just these few lines

for (i = 0; i < iter1; i++) {
  arrUse = isDoubleArray ? this._arr[i] : this._arr;

  if (isDoubleArray) arrUse = [];

When isDoubleArray is false (ie, when only passing 1 argument), you’re setting arrUse to a reference to this._arr. Subsequent calls to arrUse[x] will update that referenced array.

However, when isDoubleArray is true, you are recreating the array. Subsequent calls to arrUse[x] no longer update the reference but the newly created array

I think what you’re trying to achieve is this:

MyClass = function() {
  this._arr = [];
};

// Either 1 or 2 integer arguments are sent and are accessed through 'arguments'
MyClass.prototype.ZeroArray = function() {
  var isDoubleArray = arguments.length > 1;
  var i, j, iter1, iter2;
  var arrUse;

  // If it is just a single array iter1 will be 1
  // The 'i' iteration is used to set arrUse
  iter1 = isDoubleArray ? arguments[0] : 1;
  iter2 = isDoubleArray ? arguments[1] : arguments[0];

  // Clear any existing array
  this._arr.length = 0;

  // The i loop either works on arr[i][]
  // or sets arrUse to arr in the case of a single array
  for (i = 0; i < iter1; i++) {
    if(isDoubleArray){
      arrUse = [];
      this._arr.push(arrUse)
    }
    else{
      arrUse = this._arr;
    }    

    //if (isDoubleArray) arrUse = [];

    // The j loop fills the values of the array either arr[i][*] or arr[*]
    for (j = 0; j < iter2; j++) {
      arrUse[j] = j;
    }
  }
};

var str;
var g_GlobalSingle = new MyClass();
g_GlobalSingle.ZeroArray(3);
str = g_GlobalSingle._arr.toString();
document.getElementById("Single").innerHTML = str.length > 0 ? str : "[Empty String]";

var g_GlobalDouble = new MyClass();
g_GlobalDouble.ZeroArray(3, 4);
str = g_GlobalDouble._arr.toString();
document.getElementById("Double").innerHTML = str.length > 0 ? str : "[Empty String]";

<p id="Single">The single array contents will be shown here.</p>

<p id="Double">The double array contents will be shown here.</p>