1

I checked the "Similar questions" but I either didn't understand the answers or they didn't seem relevant to this question.

In certain cases I can't seem to overwrite array values when I try (Loop3), and in others, the array values get overwritten when I think they shouldn't be (Loop4). I just edited the code to show more values at various points.

<script>
function manual() {
    myArray = [];
    td=[1,2,3];
    myArray.push(td);
    td=[4,5,6];
    myArray.push(td);
    alert(myArray[0]); // Properly reports [1,2,3]
}

function loop() {
    myArray = [];
    td = [];
    for (i=0; i<=1; i++) {
        if (i==0) td=[1,2,3];
        else if (i==1) td=[4,5,6];
        myArray.push(td);
    }
    alert(myArray[0]); // Properly reports [1,2,3]
}

function loop2() {
    myArray = [];
    td = [];
    for (i=0; i<=1; i++) {
        td[i] = 9;
    }
    td = [1,2,3]; // Attempt to overwrite existing values
    myArray.push(td);
    alert(myArray[0]); // Properly returns 1,2,3
}

function loop3() {
    myArray = [];
    td = [];
    for (i=0; i<=1; i++) {
        for (j=0; j<=2; j++) {
            td[j] = 9;
        }
        if (i==0) td=[1,2,3];
        else if (i==1) td=[4,5,6];
        myArray.push(td);
    }
    alert(myArray[0]); // Returns 9,9,9 when I expect 1,2,3
}

function loop4() {
    myArray = [];
    td = [];
    tb = document.getElementById('myTable');
    for (i=0; row = tb.rows[i]; i++) {
        for (j = 0; col = row.cells[j]; j++) {
            td[j] = col.innerHTML;
        }
        alert("td="+td); // Properly get 1,2,3 the 1st time, 4,5,6 the 2nd time
        myArray.push(td);
        alert(myArray); // Expect 1,2,3 the 1st run, and that's what I get
                   // Expect 1,2,3 | 4,5,6 the 2nd run, but get 4,5,6 | 4,5,6
    }
}

</script>

<table id=myTable>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>

<button onclick=manual()>Manual</button>
<button onclick=loop()>Loop</button>
<button onclick=loop2()>Loop2</button>
<button onclick=loop3()>Loop3</button>
<button onclick=loop4()>Loop4</button>
Improve this question

4 Answers 4

Reset to default
1

In function 4 you override your array element. Because in second for u enter two times. First one your array fill with 1,2,3 then second one fill 4,5,6 and final result is 4,5,6

you can check if empty or not to your array if you want 1,2,3

function loop4() {
    myArray = [];
    td = [];
    tb = document.getElementById('myTable');
    for (i=0; row = tb.rows[i]; i++) {
        for (j = 0; col = row.cells[j]; j++) {
            td[j] = td[j] ? td[j] : col.innerHTML;
        }
        myArray.push(td);
    }
    console.log(myArray[0]); // Expect 1,2,3, actually get 4,5,6
}
<table id="myTable">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>

<button onclick="manual()">Manual</button>
<button onclick="loop()">Loop</button>
<button onclick="loop2()">Loop2</button>
<button onclick="loop3()">Loop3</button>
<button onclick="loop4()">Loop4</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, but this makes no sense to me. I'm PUSHing an array which should create a new row, why does the first row get overwritten? I also don't understand the purpose of your code, and why it's necessary. Finally, I still have the problem I identified with loop3.
1

I figured it out. Here's the answer.

// When you push an array or array element to another array,
//  you don't copy the *data* to the new array;
//  you copy a *reference* to the original array or array element.
// If you change the elements of the original array,
//  the elements you pushed also change.

main = [];
sub = [1,2,3];
main.push(sub); // main now contains 1,2,3 as a *reference* to the sub
sub[0]=9;
alert(main); // Contains 9,2,3

//------------------------------------------------------------------------------------
// Redefining the original array destroys the link/reference.
//------------------------------------------------------------------------------------
main = [];
sub = [1,2,3];
main.push(sub); // main now contains 1,2,3 as a *reference* to sub
sub = []; // sub has been redefined, destroying the link.  
sub[0]=9;
alert(main); // Contains 1,2,3

//------------------------------------------------------------------------------------
// Setting the values for a whole array redefines it, destroying the links.
//------------------------------------------------------------------------------------
main = []; // Redefines the array, destroying links
main = [4,5,6]; // Providing initial values redefines the array, too
                //  (destroying links).

//------------------------------------------------------------------------------------
// Changing the value of an element is *not* a redefinition of the array,
//  so links persist.
//------------------------------------------------------------------------------------
main = [];
sub = [1,2,3];
main.push(sub); // main now contains 1,2,3 as a *reference* to sub
sub[0]=9; // Does not redefine main, only changes one of its element.  Refs remain intact.
alert(main); // Contains 9,2,3

Improve this answer

Comments

0

You should initialize your loop indexes, like so: for (var i=0; i<=1; i++)

Improve this answer

Comments

0

It is not the problem with the Array's build-in method push(), the problem is that you are mutating the td array. Let's take loop3 for example:

  • at the end of i=0 iteration, td is then [1,2,3], and myArray is [[1,2,3]] - which stores the array reference binded to td
  • in the start of i=1 iteration, after the j loop (in which you mutated the previous array reference, which is bind by td), the td is then [9,9,9] and the myArray (which hold that array reference) would also be affected, resulted in [[9,9,9]]

function mutatedLoop3() {
  myArray = []
  td = []
  for (i = 0; i <= 1; i++) {
    console.log('previous td', JSON.stringify(td))
    for (j = 0; j <= 2; j++) {
      td[j] = 9
    }
    console.log('mutated td', JSON.stringify(td))
    if (i == 0) td = [1, 2, 3] // you reassign to a new array, means new reference
    else if (i == 1) td = [4, 5, 6]
    myArray.push(td)
    console.log(JSON.stringify(td), JSON.stringify(myArray))
    console.log('---')
  }
  console.log(myArray[0]) // Returns 9,9,9 when I expect 1,2,3
}

function fixedLoop3() {
  myArray = []
  for (i = 0; i <= 1; i++) {
    td = [] // now it is reset every iteration
    for (j = 0; j <= 2; j++) {
      td[j] = 9
    }
    if (i == 0) td = [1, 2, 3]
    else if (i == 1) td = [4, 5, 6]
    myArray.push(td)
    console.log(JSON.stringify(td), JSON.stringify(myArray))
    console.log('---')
  }
  console.log(myArray[0]) // Returns 9,9,9 when I expect 1,2,3
}

mutatedLoop3()
fixedLoop3()

Improve this answer

2 Comments

Thank you, but I don't understand any part of your explanation. I see that moving the td = [] is a fix, but I don't understand why.
when you assign an array to a variable, you are actually assigning its reference, which is [1,2,3], and when you push that to myArray you also put that reference to it, say myArray[0]. Let's say myArray[0] and td at the beginning of the i=1 iteration hold the reference of array [1,2,3]. So when you assign td[j] to 9, you are also update the value of myArray[0][j], that's why after j loop, td and myArray[0] are both [9,9,9]. Moving td=[] to beginning of the iteration means that you "get rid of" the reference to myArray[0], so that its value will be no more affected

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.