title: Array Object Acceptable Globally, but Not in Loops
body: <p>So I have an array, which is populated with objects. The objects have two values, one containing a list item, and another containing a float (price). I'm trying to push the list into a DOM element, but the variable is globally undefined.</p>
  
  <p>This code outputs the second array item to the console:</p>
  
  <pre><code>$('#coll-price-filter').change(function() {
      var newList = [];
      $('#coll-product-list li').each(function(idx, li) {
          pprice = $(li).find('.coll-prod-price').html().trim().substring(1)
          pprice = parseInt(pprice);
          newList[idx] = {
              value: $(li).wrap('&lt;div&gt;&lt;/div&gt;').parent().html(),
              price: pprice
          }
          newList.sort(function(a, b){  
              a = a.price, b = b.price;
              return a &gt; b ? 1 : a &lt; b ? -1 : 0;
          });
      });
      console.log(newList[1].value);
  });    
  </code></pre>
  
  <p><br />
  However this does not
  <br /></p>
  
  <pre><code>$('#coll-price-filter').change(function() {
      var newList = [];
      $('#coll-product-list li').each(function(idx, li) {
          pprice = $(li).find('.coll-prod-price').html().trim().substring(1)
          pprice = parseInt(pprice);
          newList[idx] = {
              value: $(li).wrap('&lt;div&gt;&lt;/div&gt;').parent().html(),
              price: pprice
          }
          newList.sort(function(a, b){  
              a = a.price, b = b.price;
              return a &gt; b ? 1 : a &lt; b ? -1 : 0;
          });
      });
  
      i = newList.length;
      while (i &gt; 0) {
          console.log(newList[i].listItem);
          i--;
      }
  });    
  </code></pre>
  
  <p><br />
  So it appears that the while loop is breaking the accessibility of the <code>newList[]</code> object. I've tried it a few ways, and it works if I'm inside the <code>.each()</code> iterator. But I need to access it outside. </p>