code_0:

(calling foo without parentheses)

function foo(){
    console.log('hello world');
}

setTimeout(foo, 2000);

This is how code_0 was executed:

start -> wait for 2 seconds -> 'hello world' displayed -> end

code_1:

(calling foo with parentheses)

function foo(){
    console.log('hello world');
}

setTimeout(foo(), 2000);

And this is how code_1 was executed:

start -> 'hello world' displayed immediately -> wait for 2 seconds -> end

Why would the program perform so differently when I called the function with parentheses? What is the underlying mechanism?

Sorry if this question is too trivial. But I could't find an explanation on any javascript tutorial for beginners.

code_0:

(calling foo without parentheses)

function foo(){
    console.log('hello world');
}

setTimeout(foo, 2000);

This is how code_0 was executed:

start -> wait for 2 seconds -> 'hello world' displayed -> end

code_1:

(calling foo with parentheses)

function foo(){
    console.log('hello world');
}

setTimeout(foo(), 2000);

And this is how code_1 was executed:

start -> 'hello world' displayed immediately -> wait for 2 seconds -> end

Why would the program perform so differently when I called the function with parentheses? What is the underlying mechanism?

Sorry if this question is too trivial. But I could't find an explanation on any javascript tutorial for beginners.

• javascript
• parameter-passing
• parentheses
• function-calls

6 Answers 6

setTimeout(foo, 2000) passes the function foo and the number 2000 as arguments to setTimeout. setTimeout(foo(), 2000) calls foo and passes its return value and the number 2000 to setTimeout.

In the first example, you’re not calling the function at all, just passing it as an argument like any other value.

As a simpler example, just log it:

function foo() {
    return 5;
}

console.log(foo);   // console.log is passed a function and prints [Function]

console.log(foo()); // foo() is called and returns 5; console.log is passed 5
                    // and prints 5

In the first code snippet, the function foo is being passed to the timeout. That means that foo gets called after 2 seconds when the timeout expires.

In the second code snippet, the function foo is being called to decide what to pass to the timeout. So foo gets called before the timeout is set. Since foo() doesn't return anything, nothing happens when the timeout expires.

In your question, foo is

function foo(){
    console.log('hello world');
}

whereas foo() is

console.log(hello world)

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds, and this function is supposed to be the first parameter to it, in your first case you are passing a function that is why the behaviour is expected and in the second case you are passing console.log(...) which is not a function, so it is executing foo() first and prints in console hello world then waits for 2 sec and do nothing and thus showing wierd behaviour.

See

typeof foo; // is function

typeof foo(); // prints hello world in console first and then says undefined.

The basic difference between foo and foo() is the following:

function foo() {
   alert("bar");
   return "baz";
}

console.log(foo); // gives "function"
console.log(foo());  // gives "baz"

foo is a reference to the function body itself while foo() executes the function. Thus

setTimeout(foo(), 2000);

passes the return value ("baz") to the function setTimeout(which will result in an error). setTimeout expects an "executable" function as first argument, so you need to pass in a reference to an existing function.

The point of confusion here is that you're not realizing that using foo without parentheses is not calling the function...it's only referencing it.

foo is the reference to the function itself. To call a function (i.e. actually execute its code) you reference it with parentheses at the end (e.g. foo()). In a practical sense that means:

// references the function itself
// ...you could call one() now and it would run the function foo
var one = foo;

// runs/calls the function, and var two will then be whatever foo returns
var two = foo();

So in the first example you are NOT calling the function. You are passing the function foo to setTimeout. setTimeout will then call it after a delay.

In the second example you called foo immediately and passed whatever foo returns to setTimeout (which setTimeout couldn't do anything with, because that return value likely wasn't another function). So your function was executed immediately and then nothing would have happened (except likely some errors) after setTimeout was done with its delay.

Here's an easy solution. You can use parentheses and pass data to the function if needed.

<script> function foo(){alert("hello world")} setTimeout(function() {foo()}, 2000) </script>