Difference between syntax to declare a function

Question

Reading this answer, I realized different forms of call for a function using jQuery.

The first way would be this:

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

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

And the second is this:

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

There is a difference between these two forms, in addition to the syntax?

Below is a small example to help understanding.

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


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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="um">Teste 1</button>

<br/>
<br/>
<button id="dois">Teste 2</button>

Answer 1

The biggest difference I see is in the statements.

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

I believe the main difference in this case is that, with the stated function, it is then passed by callback, you can repeat it for different events (as many times as you want), 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 such an 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 a unnecessary complication. So I get my first option.

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, its function testar could be using this or some specific parameters (such as event) usually, because in the end it won’t make any difference, since all jQuery needs is a callback.

Bonus

If you just want to consider as a curiosity this information that I will pass on, it is still possible to use an anonymous named function:

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

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

Answer 2

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

I believe that many people do not use a previously defined function because they do not know how to use it. It’s the same thing that people don’t understand the utility of the variable, the person doesn’t know when to use one or when to use the value inline. I think there is a lack of understanding of the language. At the bottom 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 same call is the most appropriate. Most of the time you just need that function right there, there’s no reason to define it elsewhere.

I already do:

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

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

I put in the Github for future reference.

Then it doesn’t, right? Technically it does, and maybe it has a semantic motive, but it’s almost always a mistake because one doesn’t understand what one is doing.

Use makes no difference to jQuery.

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

Answer 3

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

The advantage of using $('#dois').on("click", testar); is if there are more event headphones that should also call the function testar, or in case of object-oriented programming where often the method is passed that must be executed, instead of exposing the function on the spot.

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

Answer 4

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

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

Unlike the 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 if saved in a variable.

If you try to call it that, you’ll recognize it, due to the order of the statement:

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>