Why is it necessary to create a function to execute certain methods?

Question

.onclick = function() {myFunction()};

Why the example below does not work?

.onclick = myFunction()

It runs without me having clicked!

<script>
document.getElementById("demo").onclick = function() {myFunction()};

function myFunction() {
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

Answer 1

In the first case,

.onclick = function() {myFunction()};

You are assigning to the event onclick the definition of a function. In this case, an anonymous function which, when executed, will call the function myFunction. That is, the value of onclick will be an anonymous function.

Already in the second case,

.onclick = myFunction()

You are calling the function myFunction and her return will be attributed to onclick. Why its function is always called before the click. As the function myFunction has no return, the value of onclick shall be void, undefined, and nothing will be executed when the element is pressed.

To better understand the difference, you can improve the first code by doing:

.onclick = myFunction

Thus, you define that the value of onclick will be the very function myFunction and therefore when the element is pressed, the function will be executed. See the difference better:

.onclick = myFunction    // Não executa a função, apenas no click
.onclick = myFunction()  // Executa a função e atribui o retorno, não executa no click

Creating an anonymous function to call the desired function, as was done in the first question example, is only interesting when this function has defined parameters different from the event itself. All Javascript events, by default, pass as parameter to the callback an object representing the event to be treated. If your function has a different parameter, you must create the anonymous function, or something equivalent:

function myFunction(message) {
    document.getElementById("demo").innerHTML = message;
}

.onclick = function (event) {
  myFunction("YOU CLICKED ME!");
};

Answer 2

Why you need to create a number or a string or a array, or any other object? Why does the problem ask for that, right? It’s the same thing. You have a problem that requires a function, so you have to create it.

In this specific case you have a property of an object that is an event, that is, when something happens to the object it must perform something. How to tell her what to execute? You create a function with which to execute and inform what this function is for the property, just as you do with any other value. The function is just a value. Its value is the code to be executed.

The syntax

.onclick = myFunction()

Is calling the function myFunction() and putting the result of it in .onclick, is not what you want, you do not want the result of the function, you want the function itself.

Already the syntax

.onclick = function() {myFunction()};

It does not call the function, it just declares the function and the function itself is stored in .onclick. In case this anonymous function (note that it does not have a name) just calls myFunction().

This technique is called callback, that is, you are saying what should be called back at a certain time.

The different syntax defines whether you are calling or creating a function. The function statement always starts with the reserved word function and always has a body, may or may not have a name.

This:

function nome() {}

is the same as this:

nome = function() {}

A simplified way of doing the same:

.onclick = myFunction

Note that the syntax here is not a function call because it does not include parentheses. So you’re just passing the name of an existing function instead of calling the function. So think like this:

nome = function() {};
.onclick = nome;

Look, you’re declaring a function and you’re holding it in a variable. Here you’re taking the value of this variable, which is a function, and you’re assigning it to the property .onclick. It’s the same as doing:

function nome() {}
.onclick = nome;

But this is a little different:

function nome() {}
.onclick = function() {nome()};

Cstamped on Github for future reference.

Because here you have two functions One that calls to the other.

Answer 3

Actually it works see the example below, what happens is that when you arrow

document.getElementById("demo").onclick = myFunction();

the browser understands that this is the control function of Event click so it would be necessary to put another Function, so that this is the control Function not its.

document.getElementById("demo").onclick = function(){myFunction()};

to solve this problem you need to remove the "()" so that it is interpreted as not parameter, but as a call action:

document.getElementById("demo").onclick = myFunction;

function myFunction(){
  alert("foi");
}

document.getElementById("demo").onclick = myFunction;

<input type="submit" value="click-me" id="demo">