Strange for-loop behavior in Javascript
<p>I have next problem: arr has only two elements. Next loop tries to execute his body 3 times:</p>

<pre><code>var selectHTML = "";
for (var i = 0; i&lt; arr.length; i++) {
    selectHTML += '&lt;option value="' + arr[i].id + '"&gt;' + arr[i].name + '&lt;/option&gt;';
} 
</code></pre>

<p>Next loop tries to execute his body only 2 times as I expect:</p>

<pre><code>var selectHTML = "";
for (var i = 0; i&lt; arr.length; i++) {
    alert(i);
    selectHTML += '&lt;option value="' + arr[i].id + '"&gt;' + arr[i].name + '&lt;/option&gt;';
} 
</code></pre>

<p>Why (tested in Firefox 14.0.1)?</p>

<p>Updated: sorry for the semicolon after counter increment, it's a typo. But the code still doesn't work event without it.</p>

<p>Updated: Ok, this code was simplified. Whole code itself:</p>

<pre><code>var selectHTML = "";
timeSheet.steps = [ { name:"Leave as is", id:-1}, { name:"Approved", id:2} ];
for (var counter = 0; counter &lt; timeSheet.steps.length; counter++) {
    selectHTML += '&lt;option value="' + timeSheet.steps[counter].id + '"&gt;' + timeSheet.steps[counter].name + '&lt;/option&gt;';
</code></pre>

<p>}</p>

<p>In Firebug I can see that timeSheet.steps.length equals 2. By the way, instead of placing "alert(i)" I've added a comment and body executes 2 times. Magic...</p>
