Function as parameter in jQuery functions

Question

I always used some functions without really understanding what was happening and where such parameters came from. I speak of the following:

Example 1:

$("#link").on("click", function(event){
   event.preventDefault(); 
});

Example 2:

$.getJSON("http://minhaurl", {id: 20}, function(data){
    $.each(data, function(key, value){
        console.log(value.property)
    })
});

In the first example, where does this come from event? What leaves me in doubt is that no matter the name of this parameter, it will always work. And I haven’t declared it anywhere!

In the second, in the same way. Where does the data, which can be changed to any other name as in the first example?

I simply use following examples, but need to understand how it works.

Can someone explain to me?

Answer 1

Your attitude is commendable I wish more programmers were like this.

These functions are called callback. They are created precisely to respond with an action to something that the environment where your application is running requires. Usually data is passed to functions. This is a way to pass algorithms to functions. Note that this function you are creating is by itself a parameter of a function you are calling. That’s how the callback (in English) works.

In this case you don’t see the calls anywhere because it’s done within the browser or at least within some library you’re using. You do not see calls because they are not the responsibility of your application.

Note that nothing prevents you from creating such a mechanism within your application. There are some advantages to doing this in some situations giving plenty of flexibility and power to the application. Of course if you create all the mechanism in your application you will have to create the call to these functions somewhere.

This is an excellent form of communication of parties who do not know each other, very used to treat events (in English), asynchronicity as used in AJAX (in English) or even to complete with some action that a module needs but must be provided by the user of that module. Often this module is a API (in English).

So you have to study the API you’re using. You have to look for documentation that explains what it does, why it is important and the various ways to use it. Knowing all the information you can be much more creative. This is what sets true developers apart from cake recipe followers.

In the documentation you have the function signature. That is, it shows how the function that the API will call should be declared. Shows the parameters it should receive and what it should return. Usually describes it gives examples of the minimum that should be done in the body of the function. You can do what and the way you want internally, you just need to respect the input and output protocols and do something minimally useful that in some cases may even be nothing.

In some cases it can be exaggeration to use something like this. In the examples I do not know if there is any real advantage in using the each(). Basically it replaces the use of for each to make the code smaller, as far as I know nothing more than this, at least in this case. Decreasing the code is good but is not something without cost, this should not be the main goal. It is often better to use the Vanilla JS at least because he is much faster but in this case it is also less flexible and legibility is questionable.

But this is an easy case to understand:

// args is for internal usage only
each: function( obj, callback, args ) { //note que args não faz parte da API pública
    var i = 0,
        length = obj.length,
        isArray = isArraylike( obj );

    if ( args ) { //aqui trata quando há algo interno acontecendo
        if ( isArray ) {
            for ( ; i < length; i++ ) {
                if ( callback.apply( obj[ i ], args ) === false ) {
                    break;
                }
            }
        } else {
            for ( i in obj ) {
                if ( callback.apply( obj[ i ], args ) === false ) {
                    break;
                }
            }
        }

    // A special, fast, case for the most common use of each
    } else { //tratamento do caso público que é que nos interessa
        if ( isArray ) { //tratamento especial se for um array
            for ( ; i < length; i++ ) { //varrrrá todo array passado
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break; //encerra quando a chama acima falhar
                }
            }
        } else { //outros objetos
            for ( i in obj ) { //vai analisar cada elemento do objeto passado
                if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }
        }
    }

    return obj;
},

I put in the Github for future reference.

Source.

That’s the each() jQuery that you don’t know where the call comes from.

Note that who does the individual operation is the function callback.call that is part of Javascript. It is a function that serves precisely to call other functions that are passed as argument. Ultimately the function call will be called. It has the necessary infrastructure to carry out the effective execution of the desired function.

This has nothing to do with meta-programming. At least not directly.

Documentation of getJSON().

Documentation of on().

Documentation of each().

Answer 2

The @Maniero response was on the fly, I highlight this excerpt:

Usually data is passed to functions. This is a way to pass algorithms to functions. Note that this function you are creating is by itself a parameter of a function you are calling. That’s how the callback works.

In this case you don’t see the calls anywhere because it’s done within the browser or at least within some library you’re using. You do not see calls because they are not the responsibility of your application.

.on("click", function(event) { })

Your first example assigns a Listener for a click event. There you define which will be the callback of an asynchronous operation, an operation that will not occur immediately (but when the user interacts through a click).

When the click occurs, the browser creates a object representing the event and passes it to the corresponding Reader. This object is what you get if you’re listening to the event with pure Javascript:

elemento.addEventListener('click', function(evento) {
    // estou falando deste objeto aqui -------^
});

jQuery will wrap the original object in a custom object, normalized for greater browser compatibility, and that’s what the function in your code gets.

"no matter the name of this parameter, it will always work"

It’s true. Think about it, you’re defining a function. Whoever defines the function names the parameters. In fact you don’t even need to create named parameters if the arguments are passed you can still access them in order via arguments[0], arguments[1] etc. Who is responsible for calling the function and passing the arguments is first the browser, and then the jQuery that passes it forward to its function.

$.getJSON(url, {}, function(data){ })

The operation is very similar to that of the Listener click, with the difference that the asynchronous event is not originated by a user action, but by the arrival of the requested response to the server. From then on everything is the same: the browser calls a function and provides the answer (but in this case it is not passed to the function, is available as property of the object XMLHttpRequest). jQuery takes that answer, wraps it in a object, and passes this object to its function.

Deepening

If you want to better understand how the browser handles asynchronous Javascript operations, maybe this question and answer will help: How asynchronous programming works in Javascript?.

Answer 3

To understand the parameters received by jQuery functions, you need to check on documentation.

For example, in the function on. The simplest way to use it is as follows:

.on( events, handler )

As you already know, the parameter events receives a string with the desired events and the handler receives a function to be executed when the event is triggered.

In the documentation, jQuery informs that the handler will receive the following parameters:

( Event eventObject [, Anything extraParameter ] [, ... ] )

The first parameter will be an object of the type Event. The others are optional and not the case.

In short, when one of the parameters is a function (callback), you should look in the documentation to check which parameters it will receive.

---

Note: Another way to check which parameters your function is receiving is by checking all the arguments that the function received.

console.log(arguments);
// a variável arguments é um array contendo
// todos os argumentos recebidos pela função