Javascript functions - Part 2

This is the continuation of my previous blog post here wherein I discussed the very basics of functions in javascript. This, and a few more posts will build upon it by exploiting the nature and relationship between objects and functions in javascript.

Today, here, I am going to explore the ways in which javascript functions can be invoked. Although i won't be discussing all the possible ways as i am yet to experiment with each one of them, however, the below examples would act as a good starter.

Ok, lets get down to the nitty-gritty.

Function calling. Pretty simple eh? Whats the big deal about them that made me want to write a post about them? Well, although its not a big deal, it can get a bit confusing at times for an OOPS programmer like me when i see code given in the below examples for the first time.

Lets start with the standard way.

As in all programming languages, invoking a function in javascript is achieved by using the function name, the parenthesis and specifying its arguments.

Here is an example;

function fun1(){
   console.log("hi. fun1 here.");
  }
  
  fun1();

Nice and simple. I just called a function having no arguments, that prints a message on your browser console(Firefox. You need to have the Firebug plugin for console.log to work. Its a pretty good tool. If you haven't been using it already, now would be the right time to start.)

Lets see another example

function fun2(arg){
   console.log("hi. fun2 here. Argument : " + arg);
  }
  
  fun2('ryan');

This is pretty simple as well. I am just calling a function fun2 having a single argument. But you already know that, dont you?

Now lets see a 'Second way' way to call a function.

(function fun3(){
   console.log("hi. fun3 here.");
  })();

Whoops! Did you get it at the first glance? If you are astute observer, then you might have noticed, but if you are like me, then you would still be pondering for a while before completely absorbing what the new syntax actually does.

Read the code once more, and I think you will figure it out. The funny thing about this snippet is that not only is it a function declaration, but it is a function invocation as well. Let's see how.

First, you need to note that you have created a function inside a parenthesis. This parenthesis is followed by another pair of parenthesis. Inside your first parenthesis, you create a function definition and print a message to the console. The function is named fun3.

Once you are out of the first parenthesis, the function definition and declaration are complete. Now all that you need to do is to invoke your function. That task is performed by your second pair of parenthesis.

Okey, thats simple. But how do you call a function with arguments?
That's pretty simple as well.

(function fun3(arg){
   console.log("hi. fun3 here. : " + arg);
  })('ryan');

As you see, we simply passed in the argument in the parenthesis that are used to invoke the function.

But there is something that makes this 'Second way' of invoking your function, a bit different from the first way of calling.

As you have seen, my function fun3 was declared and defined inside a parenthesis. And was invoked by another set of parenthesis. But if you try to invoke this function again, using a call like fun3(), it wont work. Why wont it work? Because the scope of your declared function - fun3, is only up to the the first pair of enclosing parenthesis. The moment you invoke the function, the function is no more.

That explains why the following piece of code won't work

(function fun3(){
   console.log("hi. fun3 here." );
  })();
  
  fun3();

This is because, by the time the javascript engine comes to the line where you are invoking fun3 using the syntax fun3(), the function is no longer in scope.

The implication of this is that such functions can be used to easily perform one time tasks, and the names of such functions will never clash with any other global function and object names. For example the following code will print both, the first message and the second message, in spite of the names being the same.

(function fun3(){
console.log("scoped : hi. fun3 here.");
  })();
  
  function fun3(){
   console.log("global : hi. fun3 here.");
  }
  
  fun3();

This will work even if you reverse the order in which you declare and invoke the function. For example, the following will work as well.

function fun3(){
   console.log("global : hi. fun3 here.");
  }

(function fun3(){
   console.log("scoped : hi. fun3 here.");
  })();
  
  fun3();

There is an interesting inference that can be made from this observation. If the name of the function declared within the first parenthesis have no impact whatsoever, then why do we have to declare a name in the first place? Well, do we?

Fortunately, javascript allows us to have anonymous functions. In fact, all javascript functions are anonymous functions when they are declared, and they are simply assigned to variables so that they can be invoked.

Well, that means that the following piece of code should work just fine. And guess what, it simply does work!

(function (){
   console.log("anonymous : Hi. Mr anonymous here.");
  })();

Now, is'int that beautiful? It sure is.

Although there are a few more ways of invoking functions, we will delve into it in another post as that requires a bit more knowledge of some other javascript features as well. For now, this should suffice as introduction.In The next part of this series we will check out some more implications of the Second way of invoking functions that has been discussed here.

Happy Programming :)
Signing Off

Ryan

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(){
  function fun1(){
   alert("hi. fun1 here.");
  }
  
  fun1();
  
  fun1.funlimit = "infinity";
  
  alert(fun1.funlimit);
 });

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
Ryan