Difference Between a Function Call and Function Reference

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

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.

JavaScript: what's the difference between a function name & function reference?

function: function func() {}

function reference: func

function name: 'func'

understanding javascript function call and referance

Take this for example:

function foo() {
    alert('foo');
    return 'bar';
}

First of all, what is a function? It's a routine that can be called (or "invoked", or "executed"), and when you do so it usually does something, and returns some value.

So you have a function named foo. You can call it by adding () after its name:

foo();

You can store the return value in a variable, if you assign the result of the invocation to it:

var something = foo();
something === 'bar'; // true

But that's not all you can do with functions in JavaScript. It's a language where functions are first class citizens, so they can be passed around to other functions, and returned from other functions. They can also be stored as variables. For example:

var refToFoo = foo;

Now refToFoo is the same as foo. It's not a copy, it's a reference pointing to the same (internal) function object as foo. So you can use refToFoo just like you would use foo:

var something = refToFoo();
something === 'bar'; // true
refToFoo === foo; // true; they're the same object

Perhaps the most common use to function references is to use them as event listeners:

someElement.onclick = foo;

Note there is no parentheses above. It we used parentheses, foo would be invoked, immediately, and its return value would be assigned to the element's onclick method. Since that function returns a string, nothing would happen if the element were clicked. That's a very common mistake newbies do. Another common one is invoking a function instead of passing a reference to setTimeout:

setTimeout(foo(), 1000); // WRONG - foo is executed immediately

Compare that to:

setTimeout(foo, 1000); // RIGHT - we're passing a reference to the function, 
                       // that will be invoked by the js engine after 1000ms

I hope this helps clarify your doubt.

---

Related Topics