Geek Answers Handbook

Javascript syntax: function calls and using parentheses

why does it work ..

<script type="text/javascript"> <!-- function myAlert(){ alert('magic!!!'); } if(document.addEventListener){ myForm.addEventListener('submit',myAlert,false); }else{ myForm.attachEvent('onsubmit',myAlert); } // --> </script>

but not that ????

 <script type="text/javascript"> <!-- function myAlert(){ alert('magic!!!'); } if(document.addEventListener){ myForm.addEventListener('submit',myAlert(),false); }else{ myForm.attachEvent('onsubmit',myAlert()); } // --> </script>

the difference is the use of parentheses when calling the myAlert function.

the error i get.

"htmlfile: Type of mismatch." when compiling through VS2008.

+7
javascript syntax
source share
5 answers

() after the function means the execution of the function itself and returns its value. Without it, you just have a function that can be useful for a callback.

 var f1 = function() { return 1; }; // 'f1' holds the function itself, not the value '1' var f2 = function() { return 1; }(); // 'f2' holds the value '1' because we're executing it with the parenthesis after the function definition var a = f1(); // we are now executing the function 'f1' which return value will be assigned to 'a' var b = f2(); // we are executing 'f2' which is the value 1. We can only execute functions so this won't work
+29
source share

The addEventListener function expects a function or object that implements the EventListener as the second argument, not a function call.

When () added to a function name, it is a function call, not the function itself.

Edit: As pointed out in other answers and comments, functions can be returned in Javascript.

So, for something interesting, we could try the following. From the original myAlert we can change it a bit to return another message depending on the parameters:

 function myAlert(msg) { return function() { alert("Message: " + msg); } }

Note here that a function actually returns a function. Therefore, to call this function, an additional () required.

I wrote some HTML and Javascript to use the above function. (Please excuse my unclean HTML and Javascript as this is not my domain):

 <script type="text/javascript"> function myAlert(msg) { return function() { alert("Message: " + msg); } } </script> <html> <body> <form> <input type="button" value="Button1" onclick="myAlert('Clicked Button1')()"> <input type="button" value="Button2" onclick="myAlert('Clicked Button2')()"> </form> </body> </html>

Two buttons are displayed, each of which calls the myAlert function with a different parameter. As soon as the function myAlert is called, it will return another function , so it must be called with an additional set of brackets.

The end result: clicking on Button1 display a message box with the message Message: Clicked Button1 , and when you click on Button2 window will appear with the message Message: Clicked Button2 .

+5
source share

When you use a bracket, you actually call this function, and you send the result of the function (in this case undefined, because myAlert has no return value) as a parameter.

+2
source share

It is also worth noting that features are first-class facilities. You can drop them like any other object. Here is a good brief example of why it's cool, from Wikipedia :

 function makeDerivative( f, deltaX ) { var deriv = function(x) { return ( f(x + deltaX) - f(x) )/ deltaX; } return deriv; } var cos = makeDerivative( Math.sin, 0.000001);
0
source share
 if(document.addEventListener){ myForm.addEventListener('submit',myAlert(),false); }else{ myForm.attachEvent('onsubmit',myAlert()); }

using myAlert() here is the return value of the function, not the function itself.

Consider this:

 function bob() { return "hello world"; } alert(bob());

the warning will use the value returned by the bob function.

If you want to pass additional parameters to addEventListener, try the following:

 if(document.addEventListener){ myForm.addEventListener('submit',function(event) { myAlert(event,myOtherParamater); },false); }else{ myForm.attachEvent('onsubmit',function () { myAlert(window.event,myOtherParameter); }); }

javascript uses first-class functions and therefore can be passed as parameters to functions that expect addEventListener and attachEvent methods. Hope this helps.

0
source share

More articles:


All Articles