Why don’t I need to pass parameters to that function?

Asked

Viewed 213 times

5

I would like to know how the function passage works as a parameter in JS, I am starting in the language now and I needed to make a call to EventListenner

document.getElementsByClassName("informacao")[0].addEventListener("mouseover", troca(banner2));

I would also like to know why he does not accept troca(banner2) in the statement with the parameters of my function, but accepts if I pass only the function name or declare as anonymous function (function(){}). Thank you!

javascript events function

  • It’s just an example to learn even kkk functionality

3 answers

4

The solution would be like this:

document.getElementsByClassName("informacao")[0].addEventListener("mouseover",
 function() { troca(banner2) });

troca(banner2) is a function call. addEventListener does not expect a function call but a function. This function() { } that I put around your code creates a function that in turn will make the call you want the moment the event occurs.

Maybe it helps to think that the body of troca could come within this anonymous function (thus, it would not be one function within the other). Thus, there is simply an indirect (and a passage of parameters)

  • Thank you :) ?

  • One might think so, but this is an ideological question. Some languages separate the concept of function from the concept of anonymous function. But there are those who prefer the simplicity of Javascript. It is a fact that, compared to the verbosity of Java before-8, for example, you will probably prefer this way here. :)

  • If you think about it, the trick would be 'ddEventListener("mouseover", troca(banner2)) function. In any other Javascript function if you do foo(troca(banner2))what the code does is evaluate the troca(banner2) and pass the value to foo. To make it work in the form of your question, eventlisteners would have to be treated in a special way by language.

  • That’s right, Hugo. That’s the case with Java, for example. There’s an interface for each listener. Even with 8, we have Lambda functions that are not the same as methods. Python has Lambdas, but are limited to expressions. Javascript follows this philosophy of being as generic as possible. This can be seen as something good or bad.

  • Okay, I’m sorry but I’m still a little confused:/ In short, in passing function by parameter, ALWAYS either I pass an anonymous function or I pass only the function name (no use of parentheses)? At the time of creating a function that will receive a function in its parameter I treat as if it were a variable (without the use of parentheses) ? If so, it is much simpler than I thought :) But there is an explanation, a reason why?

  • Not necessarily. You can pass a name of a previously defined function without parentheses. The issue of the anonymous function here is that its function requires parameters and addeventlistener does not have a parameter that is an argument for the function passed. Some other functions that receive functions have this facility. If the function you want to call does not require parameters, just pass its name.

  • What matters is passing an expression whose value is a function. You can experiment with this by going to the console, writing an expression and pressing enter. typing 1+1 he will print 2 on console. writing alert he will print function alert() on the console. alert() it will show a popup and then print undefined on the console (which was the value returned by calling Alert)

Show 2 more comments

3

In Javascript the expression value troca(banner2) is the return value of troca. When you call

blah.addEventListener("mouseover", troca(banner2));

it’s like you’ve written

var tmp = troca(banner2);
blah.addEventListener("mouseover", tmp);

As addeventlistener expects to receive a function as a parameter you must either pass the direct function (by name, without parentheses), or pass an anonymous function or some other expression whose value at the end is a function.

1

First thing to consider is that in Javascript functions are first class objects, which means that they can be assigned to variables and passed as argument to other functions in the same way as you would with a string or a number or an array or etc...

So it’s perfectly natural to do something like this:

var minhaFuncao = function( mensagem ) {
    console.log( mensagem );
};

// ou...

var minhaOutraFuncao = funcaoQueFazAlgumaCoisa;

function funcaoQueFazAlgumaCoisa( mensagem ) { console.log( mensagem ); }

And then that:

minhaFuncao( "Chamando minhaFunção!" );

// ou...

minhaOutraFuncao( "Chamando minhaOutraFuncao" );

// ou...

funcaoQueFazAlgumaCoisa( "Chamando funcaoQueFazAlgumaCoisa" );

With that in mind, consider the following function:

function passeMeUmaFuncaoQualquer( mensagem, umaFuncaoQualquer ) {
    umaFuncaoQualquer( mensagem );
}

The above function expects to receive as first argument a string and as second a function, then we could invoke it as follows:

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", function( msg ) { console.log( msg ) } );

// ou...

function umaFuncaoQualquer( msg ) {
    console.log( msg );
}

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", umaFuncaoQualquer );

And if I do it:

passeMeUmaFuncaoQualquer( "Olá", "Mundo" );

It will make a mistake, because it would be the same thing to do:

"Mundo"();

And you can’t invoke a string, it’s not even?

Now, if I do it the way you showed me:

passeMeUmaFuncaoQualquer( "Olá, Mundo!!!", umaFuncaoQualquer() );

What happens is I summoning umaFuncaoQualquer and passing the value returned by it (whatever it may be) as the second argument of passeMeUmaFuncaoQualquer, which creates an error.

Browser other questions tagged javascript events function

You are not signed in. Login or sign up in order to post.