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

Question

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;
}

Answer 1

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");
                                     //   }