By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,732 Members | 1,435 Online
Bytes IT Community
Submit an Article
Got Smarts?
Share your bits of IT knowledge by writing an article on Bytes.

An Introduction to Function Objects

pbmods
Expert 5K+
P: 5,821
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:

Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = myAwesomeFunction;
  2.  
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:

Expand|Select|Wrap|Line Numbers
  1. var width = 100, height = 300;
  2. http.onreadystatechange = function() {
  3.     myAwesomeFunction();
  4.     doSomethingAmazing(width, height);
  5. };
  6.  
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:

Expand|Select|Wrap|Line Numbers
  1. var myNumber = 2;
  2. var myNumber = new Number(2);
  3.  
  4. var myString = 'Hello!';
  5. var myString = new String('Hello!');
  6.  
  7. var myBoolean = true;
  8. var myBoolean = new Boolean(true);
  9.  
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?

Expand|Select|Wrap|Line Numbers
  1. function doSomething(x, y) {
  2.     return x * y;
  3. }
  4.  
  5. var doSomething = new Function('x, y', 'return x * y;');
  6.  
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:

Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = myAwesomeFunction;
  2.  
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:
Expand|Select|Wrap|Line Numbers
  1. var someObject = new Number(2);
  2.  
  3. myVar = someObject;
  4.  
... you could assign http.onreadystatechange a 'value' of a function like this:
Expand|Select|Wrap|Line Numbers
  1. var someObject = new Function('', 'alert("Hi!");');
  2.  
  3. //    Or...
  4. function someObject() {
  5.     alert("Hi!");
  6. }
  7.  
  8. http.onreadystatechange = someObject;
  9.  
Pretty neat, huh? But there's more!

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

Expand|Select|Wrap|Line Numbers
  1. var width = 100, height = 300;
  2. http.onreadystatechange = function() {
  3.     myAwesomeFunction();
  4.     doSomethingAmazing(width, height);
  5. };
  6.  
Why does that work?

Remember how we created a function using the Function constructor:

Expand|Select|Wrap|Line Numbers
  1. function callSomeFuncs() {
  2.     myAwesomeFunction(response);
  3.     doSomethingAmazing(width, height);
  4. }
  5.  
  6. //    Which is equivalent to this:
  7. var callSomeFuncs = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);');
  8.  
  9. //    In both cases, we can assign http.onreadystatechange the 'value' (function object) of doSomething like this:
  10. http.onreadystatechange = doSomething;
  11.  
But shouldn't this work, too?

Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = new Function('', 'myAwesomeFunction(response);\ndoSomethingAmazing(width, height);');
  2.  
  3. //    Remember that these work:
  4. var myNumber = new Number(2);
  5. var myString = new String('Hello!');
  6. var myBoolean = new Boolean(true);
And if we translate that so that we can use the function keyword:
Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = function() {
  2.     myAwesomeFunction(response);
  3.     doSomethingAmazing(width, height);
  4. }
  5.  
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!

Expand|Select|Wrap|Line Numbers
  1. http.onreadystatechange = function() {
  2.     alert('Hi!');
  3. }
  4.  
  5. http.onreadystatechange();
  6.  
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:
Expand|Select|Wrap|Line Numbers
  1. var myFoo = function() {
  2.     alert('Hi!');
  3. }
  4.  
  5. var someBar = myFoo;
  6.  
  7. someBar();
  8.  
  9. //    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.
  10. var myFoo = new Number(2);
  11.  
  12. var someBar = myFoo;
  13.  
  14. document.write(someBar);    //    Outputs '2'.
  15.  
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.]
May 29 '07 #1
Share this Article
Share on Google+
3 Comments


acoder
Expert Mod 15k+
P: 16,027
Excellent article. It's well-written and I like it!

We needed some articles here. This is a good start.
May 30 '07 #2

sumittyagi
Expert 100+
P: 202
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.
May 31 '07 #3

pbmods
Expert 5K+
P: 5,821
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.
May 31 '07 #4