Javascript anonymous functions - Indispensable Example #1
In this javascript tutorial on anonymous functions, we are shown how anonymous functions (or lambdas, in computer science parlance) work and what the javascript syntax for them looks like. Some people might wonder of what practical value they might be. Well, I've just come across a situation where the utility of having lambdas just shines through and is made unequivocally clear. It is in fact a very general situation which you are likely to encounter often so pay close attention. :-D
In Mozilla, if you want to attach an event to a particular DOM node, you can simply do the below:
This causes an alert saying "loaded!" to popup everytime
However, the sad part is that this straightforward technique does not work in IE (as of 6) at all. Instead you must use the proprietary
Notice the BIG problem with the above syntax though. You can only pass a function name but cannot specify its parameters! This has vexed me (and I'm sure many others) pretty often in the past. Once you understand how lambdas/anonymous functions work though, the elegant solution becomes obvious:
In the above, Javascript lets us substitute an inline function definition in place of a function identifier. The function is created at this point and exists ('lives') without having to be formally referenced or declared anywhere else. The reason for the term anonymous function now becomes obvious. [ Note: while the above technique will give identical results to the Mozilla method, it is technically not equivalent and involves an additional indirection or at least that's how it seems to me... This is because instead of calling
This sort of power and flexibility that the lambda syntax brings is just impossible in C/C++, Java and other static languages and proves that Javascript does indeed belong in the pantheon of higher order languages along with Python, Ruby, Lisp and others.
In Mozilla, if you want to attach an event to a particular DOM node, you can simply do the below:
document.getElementById("iframe1").
setAttribute("onload","alert('loaded!')")
This causes an alert saying "loaded!" to popup everytime
iframe1
finishes loading or reloading its content, and is the equivalent of manually writing:<iframe src="blah.html" onload="alert('loaded!')">
However, the sad part is that this straightforward technique does not work in IE (as of 6) at all. Instead you must use the proprietary
attachEvent()
method as follows:document.getElementById("iframe1").attachEvent("onload",FuncName)
Notice the BIG problem with the above syntax though. You can only pass a function name but cannot specify its parameters! This has vexed me (and I'm sure many others) pretty often in the past. Once you understand how lambdas/anonymous functions work though, the elegant solution becomes obvious:
document.getElementById("iframe1").
attachEvent("onload",function() { alert('loaded!') } )
In the above, Javascript lets us substitute an inline function definition in place of a function identifier. The function is created at this point and exists ('lives') without having to be formally referenced or declared anywhere else. The reason for the term anonymous function now becomes obvious. [ Note: while the above technique will give identical results to the Mozilla method, it is technically not equivalent and involves an additional indirection or at least that's how it seems to me... This is because instead of calling
alert()
directly, the call lies within an anonymous function which just serves as a dummy wrapper. ]This sort of power and flexibility that the lambda syntax brings is just impossible in C/C++, Java and other static languages and proves that Javascript does indeed belong in the pantheon of higher order languages along with Python, Ruby, Lisp and others.