An Introduction to Function Objects

[pbmods]

AN INTRODUCTION TO FUNCTION OBJECTS
LEVEL: INTERMEDIATE
PREREQS: OBJECTS

You've seen it before. You're setting up an XMLHttpRequest call, and you need to execute a function when it returns, so you do something like this:

http.onreadystatechange = myAwesomeFunction;
 

This works really well for awhile. But soon you get to wondering if it's possible to execute more than one function when http's readystate changes. Or maybe you need to pass some extra parameters to myAwesomeFunction.

You read somewhere that you can do this:

var width = 100, height = 300;
http.onreadystatechange = function() {
    myAwesomeFunction();
    doSomethingAmazing(width, height);
};
 

That works great, but you can't help but wonder why.

Well, here's why:

All functions in JavaScript are actually objects.

That's right. A function is an object, just like window, or document, or 2, or 'Hello, World!', or....

If you're familiar with JavaScript objects, you probably know that scalars are objects. For example:

var myNumber = 2;
var myNumber = new Number(2);
 
var myString = 'Hello!';
var myString = new String('Hello!');
 
var myBoolean = true;
var myBoolean = new Boolean(true);
 

and so on. Note that in each pair, you are using the 'literal' value in the first statement. Both statements in each pair, however, produce identical results.

So if numbers and booleans and other types that we take for granted are all objects, why not functions?

function doSomething(x, y) {
    return x * y;
}
 
var doSomething = new Function('x, y', 'return x * y;');
 

Amazingly, both statements will run in your favorite browser, and they will produce identical results*!

Ok, so functions are objects. So what?

Well, let's go back to the XMLHttpRequest snippet above:

http.onreadystatechange = myAwesomeFunction;
 

Unlike in, for example, PHP where myAwesomeFunction resolves to a string, which the Zend engine determines to be the name of a defined function, JavaScript is actually using the Function object stored directly in the variable named myAwesomeFunction.

Similarly to how you could assign myVar a value of 2 like this:

var someObject = new Number(2);
 
myVar = someObject;
 

... you could assign http.onreadystatechange a 'value' of a function like this:

var someObject = new Function('', 'alert("Hi!");');
 
//    Or...
function someObject() {
    alert("Hi!");
}
 
http.onreadystatechange = someObject;
 

Pretty neat, huh? But there's more!

Remember how you were able to store multiple functions to http.onreadystatechange by doing this:

var width = 100, height = 300;
http.onreadystatechange = function() {
    myAwesomeFunction();
    doSomethingAmazing(width, height);
};
 

Why does that work?

Remember how we created a function using the Function constructor:

function callSomeFuncs() {
    myAwesomeFunction(response);
    doSomethingAmazing(width, height);
}
 
//    Which is equivalent to this:
var callSomeFuncs = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);');
 
//    In both cases, we can assign http.onreadystatechange the 'value' (function object) of doSomething like this:
http.onreadystatechange = doSomething;
 

But shouldn't this work, too?

http.onreadystatechange = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);');
 
//    Remember that these work:
var myNumber = new Number(2);
var myString = new String('Hello!');
var myBoolean = new Boolean(true);

And if we translate that so that we can use the function keyword:

http.onreadystatechange = function() {
    myAwesomeFunction(response);
    doSomethingAmazing(width, height);
}
 

Hey, look at that!

Incidentally, this is an example of what we like to call an 'anonymous function', since we're not defining it with a variable name to the right side of the function keyword.

But that doesn't mean that our function disappears!

http.onreadystatechange = function() {
    alert('Hi!');
}
 
http.onreadystatechange();
 

Can you guess what this code does? That's right; it creates an alert! It doesn't matter what variable stores your function object; all you have to do is put some parenthesis after the variable name, and the browser will execute the function stored in that variable.

One more:

var myFoo = function() {
    alert('Hi!');
}
 
var someBar = myFoo;
 
someBar();
 
//    Why does this work?  Well, for the same reason that this works, but instead of calling the function stored in someBar, this code passes the value stored in someBar (2) to the function stored in document.write.
var myFoo = new Number(2);
 
var someBar = myFoo;
 
document.write(someBar);    //    Outputs '2'.
 

So now you know JavaScript's dirty little secret. All functions are actually objects.

For more information, take a look at the MDC JavaScript Reference

*[SIDEBAR: Actually, the second statement will execute a tiny fraction of a second more slowly because explicitly-defined functions (using the 'Function' constructor) are interpreted rather than compiled. So you should try to use the function keyword rather than explicitly creating Function objects wherever possible.]

[acoder]

Excellent article. It's well-written and I like it!

We needed some articles here. This is a good start.

[sumittyagi]

pbmods!! its really a great effort.
Your article is really great.
and the link you provided is invaluable.

Thanks a lot for such a nice article and keep it up.

[pbmods]

Hey thanks for the feedback!

I did find myself posting this stuff in a lot of threads, so I figured it was time to condense it and article it.