Simple For Loop Question

[defencedog]

@ http://jsfiddle.net/defencedog/rrKYW/

A recent observation has deeply embezzled my knowledge of js. Look at the code below:

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";
        document.getElementById("posti").innerHTML = x;
    }

}​

The above code's output is similar to that of the following & that is the thing vague to me

var x = "";

function postbody() {
    for (i = 0; i < 5; i++) {
        x = x + "<sup>" + i + "</sup><br/>";

    }
  document.getElementById("posti").innerHTML = x;
}​

the latter code must giv me a single (to be concise last value of x) output & not the whole iterated output?

[WolfShade]

Correct. The first one will add line after line as it iterates, each line becoming longer. The second one will post only the value of the last iteration.

[Old Pedant]

Ummm...yes and no.

The final result of both sets of code will be the same!

In the first case, there are repeated assignments to the innerHTML of "posti", but each one simply OVERWRITES the prior one.

So, in the end, ONLY the LAST value of x will be assigned to the innerHTML and the results are thus identical.

The bigger problem, here, is that the variable x is initialized BEFORE the function is invoked. Because of that, each time the function is called, ANOTHER FULL SET of the values from 1 to 5 is appended to x and thus will appear in the innerHTML.

*PROBABLY* the initialization of x needs to be moved INSIDE the function.

[Philip M]

Originally Posted by Old Pedant

Ummm...yes and no.

The final result of both sets of code will be the same!

In the first case, there are repeated assignments to the innerHTML of "posti", but each one simply OVERWRITES the prior one.

So, in the end, ONLY the LAST value of x will be assigned to the innerHTML and the results are thus identical.

The bigger problem, here, is that the variable x is initialized BEFORE the function is invoked. Because of that, each time the function is called, ANOTHER FULL SET of the values from 1 to 5 is appended to x and thus will appear in the innerHTML.

*PROBABLY* the initialization of x needs to be moved INSIDE the function.

No, the results are indeed the same but the first one keeps overwriting with the updated innerHTML of posti while the second code does it only once.

In both cases the result is

0
1
2
3
4

It makes no difference here whether x is declared inside or outside the function.

If you want only the final value of x then delete the red

x = x + "^{" + i + "}<br/>";

[defencedog]

Ah! thank you guys so it seems background working is indeed what I was taught but I was confused by the similar output, so it means the latter example is indeed the optimised one why updating when when I need only the last output