What is the function of this 'and' that is passed as a parameter?

Asked

Viewed 197 times

9

The example I’m going to show you here is just to illustrate.

I’d like to really understand how this one works e which is usually passed as a parameter in various functions that matches in codes around.

 $(".fotos").each(function(e){
                    if(e <= e + 2){
                        teste[posicao][e] = e;

                        if((e+1)%3 == 0){
                            posicao +=1;
                            teste[posicao] = new Array();
                        }

                    }
  • 2

    The e was normally used for events, or event. But it generalized and everyone started using e, without really understanding why. But you don’t necessarily need to call e.

3 answers

8


When you use the jQuery API to $(".fotos").each this method accepts a function as argument. This function is also called iterator, that is the function that will be called and run for each of the $(".fotos") found by this selector.

The variable in your example is called e but it could be another name. What matters is what it contains. And in the case of jQuery is the index (input/position) of that element that is being iterated in the array, type: Number.

If this function had two arguments the second would be the value itself, and is the type of the one inside the array and being iterated, an element with class .foto in your example.

Note that jQuery does unlike the native Javascript API, which is available in this iterator first the value, and then the.

But the (e) is just that in all cases of functions over the web?

Well, you can’t generalize it like that. But the variable e is often used as an abbreviation for "element" or even "event".

In your example, it shouldn’t even be e, semantically, but yes i. If there were two arguments I would write .each(function(i, e){ as abbreviations of .each(function(index, elemento){.

If it were another type of function, such as a callback of an event receiver, the e would be event abbreviation. For example:

$('div.teste').on('click', function(e){
    e.preventDefault(); // aqui "e" é abreviatura de evento e contem o objeto evento
  • 2

    +1, and the point concerning i is well valid; a parameter i is common practice for indices.

5

This is a parameter. An argument will be passed for him. I imagine that even not knowing the correct terminology, know what serves a parameter.

In this case the e will receive arguments sent by the function each(). This function aims to scan a data collection. Then each member of this collection will trigger a call to anonymous function written there and the collection element (in this case, its index) will be sent as argument.

I’m actually describing what I know about this function. Functions that call anonymous functions should document as well as the anonymous function (that you wrote) should be written, what parameters it should receive, in general lines what it should do and what it should return.

And of course you can write a function of your own that receives an anonymous function as an argument. If you do this, you have to document how it will be used.

Let’s see the source of the function each():

function (obj, callback) {
    var length, i = 0;
    if (isArrayLike(obj)) {
        length = obj.length;
        for (; i < length; i++) if (callback.call(obj[i], i, obj[i]) === false) break;
    } else for (i in obj) if (callback.call(obj[i], i, obj[i]) === false) break;
    return obj;
}

I put in the Github for future reference.

The callback.call is calling its function. The parameters of this function are:

  • thisArg - which is the element
  • arg1 and arg2 - which is the index and again the element

The arg1 is that it will actually be passed as argument to its anonymous function. In the case it is expressed by the variable i in the loop.

If your function declares the parameters as (i, e) you can receive the index and the element being analyzed in that iteration. In some situations just receive the index, in others also need to know the exact element.

A final addendum: almost always a loop common solves as well or better than the use of the function each().

4

Let’s disassemble the function call:

$(".fotos").each(function(e) {
  • $(".fotos") is a selector jQuery. The target may be a single member, or a collection;
  • .each is a method that allows a function call to all members of the collection returned by the selector;
  • function(e) is the function called by the method each. The parameter and, in this case, reference the selected element index.

Therefore, if your selector returns a collection containing 3 elements, the function will be called 3 times, being the value of and the value of the index.

The name and is arbitrary. It could be any valid name, as long as the code that consumes it made the correct reference:

$(".fotos").each(function(parm1){
            if(parm1 <= parm1 + 2){
                teste[posicao][parm1] = parm1;
  • I can barely see your movements :P

  • @Jéfersonbueno didn’t count on my cunning.

  • What I wanted to understand, is what exactly is assigned to the "e". In this case an integer since there is a comparison? But how an integer? Where did it come from? The example was only illustrative, as I said...

  • 1

    @Sergio you are completely correct. I was with the . Angular foreach in mind. Thank you very much for the correction.

  • @Ericklemos exactly. In this case, e receives an integer value, generated by the method .each.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.