Difference between calling function and referencing function?

Question

Look at the following code:

window.onload = someFunction;

Many times I see the use of this kind of code and even I use the same. But, there are still few things unclear.

1. The above is a call to someFunction as soon as the page loads, right. But, aren't we supposed to call a function with brackets ()?
2. From my understanding, we are just assigning someFunction to window.onload, therefore can we or shouldn't we call window.onload();
3. Are there such cases, when functionName() and functionName becames interchangeable. Because at many places, and in various API, I have seen calling the function without brackets.

Answer 1

You're not calling the function, you're telling the browser which function to call, onload.

Referencing a function and calling a function are never interchangeable: they're completely different things.

You may, however, call a function that returns a function:

function getFunction() {
    return function() {
        alert("I'm the real onload function.");
    };
}

window.onload = getFunction();

Answer 2

In this case, you are registering a callback function for the window onload event. To do so, you give a reference to the function, you don't execute the function (unless, of course, executing the function returns another function which is used as the callback handler). The function you specify will be executed when the onload event occurs, that is, when the page finishes loading.

Answer 3

In JavaScript, parentheses do matter. In your case, you are assigning the function object itself to a certain slot of window. When putting the parentheses, you explicitly call the function, thus the value of someFunction() is the returned value of the function, not the function object itself. In short :

• when you see a function without parentheses, you are facing an expression which has the value of the function object itself
• when you see a function with parentheses, the expression has the value of the returned value of the function, because the parentheses indicate a call of the function

A special case is someVar = new someConstructor; which should not be used generally, and does not follow my short explanation above. For a very good explanation of function, and that particular statement above, see the wonderful book by Douglas Crockford Javascript, the Good Parts.

Answer 4

The above is a call to someFunction as soon as the page loads, right.

Not exactly.

window.onload = someFunction is an assignment of the value of someFunction to window.onload.

It is just an assignment.

Later on, some other code, not written by you (because it is built into the browser) will check the value of window.onload to see if it is a function and, if it is, call it.

But, aren't we supposed to call a function with brackets ()?

If the code you were writing was calling it then you would use (), but your code isn't doing that.

Are there such cases, when functionName() and functionName becames interchangeable.

No.

Because at many places, and in various API, I have seen calling the function without brackets.

There are many APIs that expect to be handed functions.

For example Array.prototype.sort expects to be given a function to tell it how to sort the data in the array.

You could pass it a function to a numerical sort. If you pass it nothing it uses a default function which does an alphabetical sort.