12

How come I can say:

var myFunction = function() {
   setTimeout(myFunction, 1000);
}
myFunction();

Why does the function call in the setTimeout not require a parenthesis, but the last line does?

Dave Newton
  • 152,765
  • 23
  • 240
  • 286
Phillip Senn
  • 43,069
  • 83
  • 242
  • 359

5 Answers5

19

The setTimeout function expects a function reference* as an argument: references are variables, and don't have parentheses.

Function calls require parentheses (even if the function takes no parameters).

Nutshell: myFunction is a reference to the function. myFunction() executes the function, and in an expression, will "equal" the function's return value (or undefined if nothing is returned).

Digging Deeper: There are circumstances where setTimeout(myFunction(), 1000) might make sense, like if myFunction() itself returns a function. For example:

var myFunction = function() {
    return function() {
        alert("ohai");
    };
};
  • The anonymous function (containing a single return statement) is executed immediately.
  • The return value of that function is itself a function containing an alert.

So:

  • myFunction alone is a reference to a function (that happens to return a function).
  • myFunction() will execute. It evaluates to a function reference, suitable for setTimeout().

Finally:

setTimeout(myFunction(), 1000);

This calls myFunction()'s return value in one second. One second later, up pops the alert.

See also Why function statement requires a name?

* Or a string to be evaluated, but a reference is preferred.

Community
  • 1
  • 1
Dave Newton
  • 152,765
  • 23
  • 240
  • 286
  • 2
    Weird. JavaScript is a quirky language. – Phillip Senn Nov 01 '11 at 15:55
  • 3
    @cf_PhillipSenn: It is basically the same in Python or C (function pointers). Only providing the name of the function references it. Adding parenthesis behind it calls it. Of course this does not exist in languages where functions are not first class objects and therefore cannot be referenced directly (such as Java). – Felix Kling Nov 01 '11 at 15:57
  • 1
    It's not that weird :) you can do that sort of thing in C#, VB.NET too. It's a very useful feature. – M3NTA7 Nov 01 '11 at 16:05
10

myFunction is a function

myFunction() calls the function and yields whatever value the function returns.

The purpose of setTimeout is running code after some time elapses. You need to pass just the function to it (so setTimeout can itself call the function when appropriate) because if you called the function (with the parenthesis) before passing it to setTimeout it would execute now instead of after 1 second.

hugomg
  • 63,082
  • 19
  • 144
  • 230
6

When you use the parenthesis, it's saying 'call this function now'. So if you say setTimeout(myFunction(),1000);, it will use the return value of the function as the callback for the timeout. If the return value for the function is not itself a function, you'll get an error because it will try to execute something that isn't executable after the timeout (a string, a number, undefined, etc).

Chris
  • 1,000
  • 2
  • 13
  • 22
  • Although, worth noting: If the string that was returned was something that was executable, like say `alert("Hello world!");` it would work in this context because `setTimeout` can accept strings as js code literals. – Chris Nov 01 '11 at 16:06
2

In line 2, the function myFunction is not called, but passed as an argument to the setTimeout function, whereas in line 4 myFunction is called; to call a function, you always have to use parentheses, even if there are no arguments.

Luc125
  • 5,365
  • 29
  • 34
1

I think this example would make it clearer if i may,

function callback() {
  console.log('this function runs on page loads.');
}

setTimeout(callback(), 2000); 

Here callback() function will run immediately after page loads and won't wait 2 seconds.

function callback() {
  console.log('this function runs after page loads.');
}

setTimeout(callback, 2000);

Here callback() function will run after 2 seconds.

Safwat Fathi
  • 368
  • 3
  • 8