Anonymous functions (aka inline functions)

Wed, 12/26/2007 - 19:33 — sgrover

Novice

When working with JavaScript Object Notation, we sometimes want to create a function (or method if we use the OOP terminology). The traditional method of creating a function will not work well. There are a couple of ways to create methods in this situation, but we'll focus on the one jQuery favors - anonymous functions.

There is little different between a regular function and an anonymous function. The declaration syntax is a little different, and there is no function name per se that can be called. However the memory location of the function can be stored, and thus the function can be recalled as needed.

For instance:
//traditional function sample_one(parameter_one) { alert(parameter_one); } // // Anonymous / inline function var sample_two = function (parameter_two) { alert(parameter_two); }; // //Calling the methods: sample_one("Hello"); sample_two("jQuery Rocks!");

The traditional approach is to use the "function" keyword and then declare the name, parameters, and desired actions. An anonymous function leaves out the function name part but a reference to the function is returned.

Where this becomes especially handy is when JavaScript Object Notation is being used. Imagine we had a Person object, and we wanted to add a "growOlder()" method to this object.
//traditional function Person() { this.name = ""; this.age = 0; } // //Function declaration: function person_growOlder() { this.age = this.age + 1; } // // JavaScript Object Notation var bob = { name : "Bob", age : 30, growOlder : function () { this.age = this.age + 1; } };

With the use of an anonymous function, we can declare our function right where it is needed. We do not need to create the function elsewhere and use function references. This means finding code can be done a fair bit quicker as there are no references to be resolved (when troubleshooting at least). The end results though are the same.

As you can see, the JavaScript Object Notation approach is more concise, and self contained.

Now the question comes up "when would I use this technique?". Imagine you were creating a "birthday()" routine that would take some arguments. One of the arguments needed might be to do some processing after the birthday() method is finished. We can use an anonymous function to indicate this.
birthday({ person : bob, cleanup : function () { if (this.person.age > 40) { alert("How's the weather up there?"); } } }); // function birthday(options) { //exit if we don't have a person if (!options.person) { return false; } // alert("HAPPY BIRTHDAY " + options.person.name + "!!"); this.person.growOlder(); // if (this.options.cleanup) { this.options.cleanup(); } }

In our call to the birthday function, we are creating an object on the fly to pass our arguments for the function. One of these arguments is a function we want executed when the birthday routine is done - the "cleanup" property.

Another name for this cleanup property is "a callback function". Which means that when our code is done, we want it to do a call back into this other routine. jQuery makes extensive use of callback routines, or even anonymous functions just for gathering required data. The slideUp/slideDown methods, and the Ajax methods are just two examples of where this is used.