Tuesday, June 22, 2010

Javascript functions

Just recently, i have been dabbling with jQuery. Its a pretty powerful andd awesome javascript utility framework. If you don't know about it already, make sure that you take a peek. However this post is not about jQuery. This post is the result of my first steps into learning javascript. Although jQuery does not require you to have an in depth knowledge of javascript to do most of the amazing stuff you can do with it, it helps to have a few things clear in your mind before you end up making silly mistakes and the pondering over what went wrong.

Coming from a a deeply rooted object oriented background, my attempt at learning javascript has been more of and adventure, and boy oh boy, a twisted one it has been. This blog post discussed one of the first experiments that i did when i was trying to figure out how javascript works. To many of you javascript pros, this might seem pretty simple and easy, but me, being an arduous fan of object oriented languages, was completely befuddled by the way things were handled.

So, whats the big deal about functions in javascript?

Well, firstly a function is just an illusion. At least it was for me. Because a function is actually just like any other variable that you declare in javascript.
Yes, you heard me right. A function is a variable(or object, call it whatever suits u) in javascript.
Why do i say so? Well, just check out this piece of code.

Note, i will be using jQuery's - $ function throughout the code to load my javascript elements on document load. If you are new to jQuery, you you might want to take a look at it, but you hardly need to know much about it to understand the examples here. Just keep any of these code snippets in the script tag of your html page ,and open the page in any browser of your choice.

  function fun1(){
   alert("hi. fun1 here.");
  fun1.funlimit = "infinity";

WHAT THE ....? Yes yes, believe your eyes. Because what you just saw, actually happened and it WORKS! Okey, I admit, I exaggerated my emotions, but still, this is not something you see everryday(unless you are a crazy javascript programmer.. which means that you dont need to read this blog post, but thanks for reading anyway :> ) The first few lines are simple. You create a function whose name is fun1 which displays a simple alert dialog box. Then you call this function the way you would do in any other conventional OO programming language like java. But that's not where the fun ends. In fact, the fun hasn't even begun.

If you see what has happened in the next line, you've gotta admit that whatever is happening is not so obvious if you are someone like me who has been working purely on Java since only god knows when. What i have done here is that i have created a new property named funlimit on the function fun1, treating fun1 as a variable. And then, I display the value of the property in an alert dialog box.

oh, thats nice eh? my function is a variable.
Easy to digest? No?

Well, lets make this a bit more digestible.

The function declaration syntax that we saw above was just a shorthand notation for declaring functions. What is actually interpreted is this :

var fun1 = function(){
alert("hi. fun1 here.");

As can be seen clearly now, the function name is just like any other variable/javascript object that is referencing a function. Being an ordinary javascript object, this function is allowed to have any number of properties.

Pretty simple eh?
Well, there is an old, wise saying - All the things that seem twisted are actually simple, all all those that seem simple are actually twisted.

This simple fact when combined with other features of javascript, seem to create magic. Javascript, being a dynamic language, makes it possible to do things that may seem like nearly impossible with other OO languages.

In my future posts, we shall see more of javascript functions, and delve into the implications of the having such powerful features in javascript functions.

(For those of you who are still wondering that who said the old, wise saying that i just quoted, don't worry, because i just made that up! )

Happy Programming :)

Signing Off

No comments: