What is the difference between a function call and function reference?

Solution 1:

Well, the onclick property expects a reference to a function, for it to execute when the element is clicked. Normally it's either:

element.onclick = funcRef;

or

element.onclick = function () {
    funcRef();
};

(but of course, it's best to use addEventListener and attachEvent)

Notice how both of them are references to functions, not calling.

When something expects a reference, you don't call it...you assign a reference to it (first example).

When you want to specifically call a function, you call it with () (second example). But notice how in the second example, there's still a reference to a function that's assigned to onclick - it's just an anonymous function.

Probably the more important part:

Some people think you want to do this:

element.onclick = funcRef();

But that immediately executes the function (because of the ()), and assigns its return value to onclick. Unless the return value is a function, this isn't what you want.

I think the moral of the story is that when you want/need something to execute right now, you call the function. If the function is wanted for later use or needs stored, you don't call it.

Solution 2:

Do you want it to execute NOW? Then call it.

a=hello() means "Call hello() ASAP, and set its return value to a".

On the other hand, a=hello means "a is an alias for hello. If you call a(), you get the same results as calling hello()"

You use the latter for callbacks, etc, where you want to tell the browser what you want to happen after an event occurs. For example, you may want to say "call hello() when the user clicks" (as in the example). Or, "When the AJAX query returns a result, call the callback() function on the returned data".