Question: Where I got stuck:
------------------

In my spare time I work on a private website. My self-teaching is *really* unstructured, and I've run up against a huge hole in my fundamentals.

I'm looking at a jQuery example from the jQuery API website, [serializeArray](http://api.jquery.com/serializeArray/), and I can't wrap my head around the ShowValues function.

Here's how it goes:

```
function showValues() {
  var fields = $(":input").serializeArray();
  $("#results").empty();
  jQuery.each(fields, function(i, field){
    $("#results").append(field.value + " ");
  });
}

$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

```

And I'm pretty sure I get what's going on in everything except lines 4 and 5:

```
  jQuery.each(fields, function(i, field){
    $("#results").append(field.value + " ");

```

jQuery goes through each key in the *fields* array and puts what it finds through the generic function: *function(i,field)*

that function uses its two parameters to produce a string to append to #results.

**My questions**:

Why does that function need two parameters? The variable *i* 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.

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?

Is `i` special, or could any spare variable be used?

And what's happening with `field.value`? `.value` isn't in the jQuery API, but I think it's still plucking values from the second position in the fields array?

Answer: 
**Why does the function need two parameters?**

First of all you should read the documentation of [.each](http://api.jquery.com/jQuery.each/). It tells you that it expects a function defined as such:

```
callback(indexInArray, valueOfElement)

```

That has been decided, so you have to abide to it (the reasoning is beyond this answer).

If you define your callback as such

```
function(indexInArray, valueOfElement, foo) { ... }

```

and it is called as

```
callback(indexInArray, valueOfElement)

```

then `foo` will be undefined.

If you define your callback as

```
function(foo) { ... }

```

it will still be called as 

```
callback(indexInArray, valueOfElement)

```

and `foo` will contain the `indexInArray` - and `0.value` will of course be undefined if you "leave out the `i`".

**Can I use a spare variable?**

Yes you can. In most functional languages you will find `_` used for parameter that you don't care about (be careful if you use libraries like `underscore.js` though). Any other name can be used.

```
$(...).each(function(_, elem) {
  ...
});

```
The [`jQuery.each`](http://api.jquery.com/jQuery.each/) runs the function you provide (here, an anonymous function) against each key/value pair in an array or object. This works much like iteration in a functional language.

The parameter names are neither special nor even required. The function is called with the current value as `this`, so in many cases you can omit them. In your code, for example, the function could be changed to `function() { $("#results").append(this.value + " "); }` and it would produce the same results.

Inside the function, `field` is a [DOMElement](https://developer.mozilla.org/en/DOM/element) and `.value` is DOM 0 property for accessing an input's `value=` attribute. In your code, `field.value` is equivalent to `$(field).val()`.