Difference between syntax for declaring a function

The biggest difference I see is in the statements.

In option 1, you used a function, and in option 2, an anonymous function.

I think the main difference in this case is that, with the function declared, and then passed by callback , you can repeat it for different events (as many times as you like) without repeating unnecessary code.

Example:

$('#dois').on("click", testar);
$(document).on("click", ".botao-dinamico", testar);

function testar() {
  console.log('Teste Dois');
}

As already mentioned, many people do not know that it is possible to do this operation in jQuery and end up falling into the following problem:

$('#dois').on("click", function () {
       console.log('Teste Dois');
});

$(document).on("click", ".botao-dinamico", function () {
       console.log('Teste Dois');
});

Note that the second example is an unnecessary complication . So I get my first choice.

Of course we have to remember that the example is very simple in this case. You could have greater gains in cases where you needed a more complex function.

For example, your testar q function could be using this or some specific parameters (like event ) normally, because in the end this will not make any difference, since everything jQuery needs is a callback.

Bonus

If you just want to consider the following information as a curiosity, you can still use an anonymous function named:

$('#um').on("click", function onClick() {
  console.log(onClick);
});

In the specific case, it will not go into the global or local scope of Javascript, but will be accessible only from the anonymous function itself.

JavaScript has some idiosyncrasies and may have missed something, but under normal conditions there is no difference in use. Both will run the same way. One is anonymous and declared inline on the call and the other is named and previously defined somewhere.

I think a lot of people do not use a predefined function because they do not know how to use it. It is the same as people do not understand the utility of the variable, the person does not know when to use one or when using the inline value. I think I lack understanding of language. In the background a named function is like a variable, and an anonymous function is like the value.

But it is also reasonable to infer that in many cases creating an anonymous function there in the call itself is the most appropriate. Most of the time you only need this function right there, you do not have to define it elsewhere.

I already do:

$('#dois').on("click", function() {
    testar();
});

function testar() {
    console.log('Teste Dois');
}

That does not work, right? Technically it does, and maybe it has a semantic motive, but it's almost always a mistake because the person does not understand what he's doing.

Use makes no difference to jQuery.

I did not merit using the function statement as a function identifier or as a variable. This can be seen in What is the difference between the var name = function () and function name ()? functions. There is a small difference explained there in the question. This is demonstrated in Guilherme Nascimento's response.

In practice, for your example, they are similar, they do the same thing.

The advantage of using $('#dois').on("click", testar); is if there are more event headers that should also call the testar function, or in cases of object-oriented programming where you often pass the method that should be executed instead of expose the function in place.

Furthermore, the $('#dois').on("click", testar); case uses a named function, or named function; and the other example uses an anonymous function.

Just an addendum to explain about the difference of other functions of any kind against:

function testar() {
    console.log('Teste Dois');
}

Unlike the way mentioned above, almost all other forms will be anonymous functions, for example, if you do this, it will always be an anonymous function:

var foo = function () { /** Algo aqui **/ };

document.getElementById("meuId").onclick = foo;

Even though it saves in a variable.

If you try to call it that way you will recognize it, because of the order of the declaration:

var foo;

document.getElementById("meuId").onclick = foo;

foo = function () {
    alert("Oi");
};

<button id="meuId">Teste</button>

But if you do this will work, even if the function comes later:

document.getElementById("meuId").onclick = foo;

function foo() {
    alert("Oi");
}

<button id="meuId">Teste</button>