Passing function as callback to another function

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

Callback without arguments

For a callback with no arguments you pass it like this:

myFunction(myCallBack);

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are 'First class citizens' and so can be passed around like variable references and executed at a later time.

Callback with arguments

"What do you do if you have arguments that you want to pass?", you might ask yourself.

Wrong

The Wrong Way (will not work!)


myFunction(myCallBack(param1, param2));


This will not work because it calls myCallBack(param1, param2) and then passes the return value as the second parameter to myFunction.

Right

The Right Way ( note the use of function(){ preceding myCallBack() )


myFunction(function(){
myCallBack(param1, param2);
});


jQuery Cross Domain Ajax Query

I have been quite interested in jQuery nowsday. Before, I use Prototype framework and Scriptaculous framework to do my work. But now, it seems jQuery is more powerful than Prototype. There are conflicts between IE and Prototype framework. I realize some IE on some computer cannot load pages that has loaded Prototype code. I don't know what wrong with that. I try to ask people in the forum, no one can answers this question.

Now, it comes to jQuery 1.2. It includes one of the nicest feature. It allows you to transfer JSON data across multiple domains. Have a look on this:
http://docs.jquery.com/Release:jQuery_1.2/Ajax

jQuery now supports JSONP natively - if you attempt to load JSON (via $.getJSON or $.ajax) from a remote URL then an extra callback will be provided for the server to interpret. Additionally, if the server requires a special field for specifying your own callback name you can provide it by having a "=?" in your query string.

Good Practice for the use of for-in loop

As many people trying to extend the core javascript object, your code will have the risk and may broke somewhere because your for-in loop will loop through all properties including not-inherited properties. Consider this code:


//someone might extend funny methods from the global object
Object.prototype.hello = function() {
    return "hello";
};

//your code trying to count the number of properties or do something for your application
var object = {x: 5, y: 10};
var i = 0;
for(var property in object) {
    i++;
}
alert(i); // 3, you expect only 2 why it has three?


To solve this above problem, use hasOwnProperty("property") anywhere when you use for-in loop. hasOwnProperty() returns whether the pass-in property is inherited property or not.


var i = 0;
for(var property in object) {
    if(object.hasOwnProperty(property))
        i++;
}
alert(i); // 2, this is what expected


Good practice in array deletion

One day I paired with my friend, we stuck about 2 hours when trying deleting items in array. We forget we are trying to delete item in array. Take a look at http://ungsophy.blogspot.com/2008/07/good-practice-in-array-deletion.html to see the good practice code.

Trick to use static variables in javascript

Maybe people that have background in C language know how to do this because in C language there is a static keyword to declare a static variable. What is about Javascript?

Well, Javascript doesn't have static keyword. One way to solve this problem, you may use global variable. However, for some people, it will pollute the global namespace. Last night, I read a javascript book, Javascript - The Definitive Guide, 5th edition. The author used closure to achieve this by returning back the anonymous function.

var uniqueID = (function() {
   var id = 0; // This is the private persistent value
   // The outer function returns a nested function that has access
   // to the persistent value.  It is this nested function we're storing
   // in the variable uniqueID above.
   return function() { return id++; };  // Return and increment
})(); // Invoke the outer function after defining it.



uniqueID(); // 0

uniqueID(); // 1

uniqueID(); // 2