title: Two variables passed to a function, one's undefined?
body: <h2>Where I got stuck:</h2>
  <p>In my spare time I work on a private website. My self-teaching is <em>really</em> unstructured, and I've run up against a huge hole in my fundamentals.</p>
  <p>I'm looking at a jQuery example from the jQuery API website, <a href="http://api.jquery.com/serializeArray/" rel="nofollow noreferrer">serializeArray</a>, and I can't wrap my head around the ShowValues function.</p>
  <p>Here's how it goes:</p>
  <pre><code>function showValues() {
    var fields = $(&quot;:input&quot;).serializeArray();
    $(&quot;#results&quot;).empty();
    jQuery.each(fields, function(i, field){
      $(&quot;#results&quot;).append(field.value + &quot; &quot;);
    });
  }
  
  $(&quot;:checkbox, :radio&quot;).click(showValues);
  $(&quot;select&quot;).change(showValues);
  showValues();
  </code></pre>
  <p>And I'm pretty sure I get what's going on in everything except lines 4 and 5:</p>
  <pre><code>  jQuery.each(fields, function(i, field){
      $(&quot;#results&quot;).append(field.value + &quot; &quot;);
  </code></pre>
  <p>jQuery goes through each key in the <em>fields</em> array and puts what it finds through the generic function: <em>function(i,field)</em></p>
  <p>that function uses its two parameters to produce a string to append to #results.</p>
  <p><strong>My questions</strong>:</p>
  <p>Why does that function need two parameters? The variable <em>i</em> seems to count up from zero, for each time the function is run. and if it's taken out of the function, field.value returns undefined.</p>
  <p>Since the values coming in to the two-parameter function are arranged into an array, the function has to...match the dimensions of the array?</p>
  <p>Is <code>i</code> special, or could any spare variable be used?</p>
  <p>And what's happening with <code>field.value</code>? <code>.value</code> isn't in the jQuery API, but I think it's still plucking values from the second position in the fields array?</p>