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

In the first case,

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

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

In the second case,

.onclick = myFunction()

You are calling the function myFunction and its return will be assigned to onclick . That's why your function is always called before click . Since the myFunction function has no return, the value of onclick will be null, 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

So you define that the value of onclick will be the myFunction function itself, so 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 example of the question, is only interesting when this function has parameters defined other than the event itself. All JavaScript events, by default, pass as parameter to the callback function an object representing the event to be handled. 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!");
};

Why do you need to create a number or a string or an array , or any other object? Why the problem asks 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 execute something. How to tell her what should be done? You create a function with what to run and tell you what that function is for the property, just like you do with any other value. The function is only a value. Its value is the code to run.

The syntax

.onclick = myFunction()

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

The syntax

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

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) only calls myFunction() .

This technique is called callback , that is, you are saying the which should be called back at a given time.

The different syntax defines whether you are calling or creating a function. The function declaration 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 to do 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;

Looks you are declaring a function and you are saving it to a variable. Then you're getting the value of this variable, which is a function, and is assigning it to the .onclick property. It's the same thing to do:

function nome() {}
.onclick = nome;

But this is a little different:

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

Because here you have two functions one that calls the other.

It actually 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 the click event so it would be necessary to put another function, so that this is the control function not yours.

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

To solve this problem you need to remove the "()" so that it is interpreted as not a parameter, but rather 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">