Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the difference between calling function in JavaScript with or without parentheses ()

so a simple example would be

function a() {
    alert("something");
}

anything.onclick = a; // this is without parentheses

anything.onclick = a(); // this is with parentheses 

What is the difference between the two?

And one thing more: if I define the same function but this time return false, will it work?

function a(){
    alert("something");
    return false;
}
like image 476
user2019110 Avatar asked Jan 15 '23 09:01

user2019110


2 Answers

The difference is that a() calls the function while a is the function.

console.log( a() ); // false
console.log(  a  ); // function() {...}

To make it clear what technically happens when you use the second part of your example, let's redefine alike this:

a = function() {
    return 100;
};

and set the event handler:

anything.onclick = a();

f() not only calls the function f but returns its return value. So when setting a variable or object property to a function call, the return value of the function call will be assigned. So the above statement is effectlively equivalent to:

anything.onclick = 100;

which doesn't make sense and might cause an error. If a function doesn't have a return value, its return value is implicitly undefined.

However, if you had set a variable equal to a without calling it, it would be the same as setting a regular function expression to that variable:

var a = function() { ... },
    b = a; // b = function() { ... }

b would perform the same operation as a would.

So in your example go with the first one because it makes sense! The only case in which you would assign the return value of the function call to an event handler is if the function returns another function. For instance:

var x = function(xyz) {
    return function() {
        console.log(xyz);
    };
};

anything.onclick = x("Hello World"); // = function() {
                                     //       console.log("Hello World");
                                     //   }
like image 127
David G Avatar answered Apr 06 '23 00:04

David G


Assigns reference:

anything.onclick = a; //assigns a reference

With your function it is:

anything.onclick = function() { 
    alert("something"); 
}

Executes method and assigns the returned result

anything.onclick = a(); //calls the method and assigns whatever is returned.

With your function it is:

anything.onclick = false; 
like image 27
epascarello Avatar answered Apr 05 '23 23:04

epascarello