Two variables passed to a function, one's undefined?

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, 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?

score 2 · Accepted Answer · answered May 25 '11 at 23:05

Why does the function need two parameters?

First of all you should read the documentation of .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) {
  ...
});

Thanks for that link on .each, and extra thanks for laying out what's happening. I think that finally unstuck my brain on the whole problem! — worc, May 26 '11 at 17:44

score 1 · Answer 2 · answered May 25 '11 at 23:02

The 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 and .value is DOM 0 property for accessing an input's value= attribute. In your code, field.value is equivalent to $(field).val().

Oh, it's from *DOM*, okay. That helped clear up that question. Thanks for the link! — worc, May 26 '11 at 17:49

score 0 · Answer 3 · answered May 25 '11 at 22:56

0

I believe i is passed to the inner workings of Jquery for it to work out which value in the array to pass/use in the function. Without i Jquery cant tell where it is on the iteration.

answered May 25 '11 at 22:56

Declan Cook

6,066
2
35
52

Two variables passed to a function, one's undefined?

Where I got stuck:

3 Answers3