title: Difference between for(i in array) and for(var i=0;i<array.length;i++)
body: <p>This would be a very easy question for all you javascript/jquery guys.</p>
  
  <p>I've been programming javascript from past 2 years and today I faced a strange problem.</p>
  
  <p>I am fetching a JSONarray from my <code>C# Webmethod</code> and calling it by <code>jQuery.ajax()</code></p>
  
  <p>When I do </p>
  
  <pre><code>for (i in JSONRaw) {
      Index = Index + 1;
      $('#bottomGridDashboard').append('&lt;tr&gt; &lt;td&gt;' + Index + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].DisplayName + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].SpeedInKPH + '&lt;/td&gt; &lt;td&gt;&lt;img src="' + JSONRaw[i].ImageURL + '" height="20px" alt="" /&gt;&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].DepotID + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].RouteID + '/' + JSONRaw[i].ScheduleID + '/' + JSONRaw[i].TripID + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].Direction + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].LastStop + '&lt;/td&gt; &lt;td&gt; ' + JSONRaw[i].ETAMinutes + ' &lt;/td&gt; &lt;/tr&gt;');
  }
  </code></pre>
  
  <p>the appended table adds two extra rows putting every field as 'undefined'. <a href="http://i.imgur.com/6eecLdT.jpg" rel="noreferrer">See this Image</a></p>
  
  <p>However if i replace the loop with </p>
  
  <pre><code>for (var i = 0; i &lt; JSONRaw.length;i++ ) {
      Index = Index + 1;
      $('#bottomGridDashboard').append('&lt;tr&gt; &lt;td&gt;' + Index + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].DisplayName + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].SpeedInKPH + '&lt;/td&gt; &lt;td&gt;&lt;img src="' + JSONRaw[i].ImageURL + '" height="20px" alt="" /&gt;&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].DepotID + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].RouteID + '/' + JSONRaw[i].ScheduleID + '/' + JSONRaw[i].TripID + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].Direction + '&lt;/td&gt; &lt;td&gt;' + JSONRaw[i].LastStop + '&lt;/td&gt; &lt;td&gt; ' + JSONRaw[i].ETAMinutes + ' &lt;/td&gt; &lt;/tr&gt;');
  }
  </code></pre>
  
  <p>the undefined rows disappear.. <a href="http://i.imgur.com/XT9XJ4c.jpg" rel="noreferrer">See the image</a></p>
  
  <p>I apologize for my stupidity but I have never faced any such problem before.
  What could be the reason??</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The array is perfectly fine. And there are no holes in it.
  Another observation is that the undefined properties appear only at the bottom of my grid. I think it is processing two extra indexes more than the array length.</p>
  
  <p><strong>EDIT-2</strong></p>
  
  <p>My console.log showed me the following elements in my array.</p>
  
  <p><a href="http://i.imgur.com/rI5TjdK.jpg" rel="noreferrer">http://i.imgur.com/rI5TjdK.jpg</a></p>
  
  <p>I've declared the prototypes in my Master page.</p>
  
  <pre><code>Array.prototype.inArray = function (comparer) {
      for (var i = 0; i &lt; this.length; i++) {
          if (comparer(this[i])) return true;
      }
      return false;
  };
  
  
  Array.prototype.pushIfNotExist = function (element, comparer) {
      if (!this.inArray(comparer)) {
          this.unshift(element);
      }
  };
  </code></pre>
  
  <p>Is it increasing the array length. ? ?</p>