CODEWITHSUNDEEP
javascriptfunction
user2019110
user2019110

Reputation: 55

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

Upvotes: 6

Views: 2361

Answers (4)

LuckyLuke Skywalker
LuckyLuke Skywalker

Reputation: 791

long story short:

Let's say we have function f(){} or f = function(){}

If you now write

someFunction(f());

it will call f() and whatever f() returns will be passed as argument to someFunction().

If you write

someFunction(f);

on the other hand (when defined like the latter), f will be passed to someFunction() as (a variable holding) the function.

This could be used e.g. if the function is supposed to be used later on but maybe can't be called some other ('normal') way.

( Of course, depending on language, "function" could obviously be a "method" and the language could not even have function-variables or however you call it! )

( off topic: note that this answer says the same as the other answers because that is THE true answer but I did not want to edit the other answers because each may be found differently helpful by different people )

Upvotes: 0

Maizere Pathak
Maizere Pathak

Reputation: 299

The parenthesis at the end of the function is the permission for javascript engine to execute the function. If you don't supply it, it won't be executed at all.

If you do x=a() you are invoking the function but if you do x=a you are passing a pointer to a function

Upvotes: 0

David G
David G

Reputation: 96810

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

Upvotes: 8

epascarello
epascarello

Reputation: 207501

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;

Upvotes: 2

Related Questions