Disclosing the Javascript CLOSURE

This is my third post in the series - "Perplexed world of javascript" . It is very important and subtle concept , hence i will try to explain in a very intuitive way.

So i guess most of you must have been in relationship.Now what is the difference between "Breakup" and "Moving On"?

"Beakup" is an event and it is very visible and evident but not the "Moving On" , it is a very subtle in nature and it depends on people how many months , years or even decade ,it will take to completely "Move On".Now programming languages also behave in similar manner.

Lets try to figure out the output of the following code snippet.

//Code Snippet

function a () {

        var x=11;

        var b=function () {

        alert(++x);

         } ;

        return b;

}

var funB=a();

//call 1

funB();

//call 2

funB(); 

If you think both "call1" and "call2" both will return 12, then you are a person who believes "Breakup" and "Moving On" both occurs at a time and yes one more thing you are coming from a "JAVA" or "C++" background. In these languages end of a function marks the end of its scope too.

Javascript is a sensitive language :) It takes time to "Move On" means to say the end of the function does not mark the end of its scope.

If there are variables declared inside a function (like x) and also some internal functions are defined (like b). The internal functions (like b) will have its own copy of the internal variable (like x) even after the end of the parent function.

Hence the output will be 12 and 13 in this case.When we made "call1" ,"x" becomes 12 and "call2"  made the value of "x" 13. Now if we get a new copy of function "b" by invoking function "a" then again this new copy will get a fresh copy of "x" i.e 11. 

If you have any question please shot out here.I will be more than happy to help.

Happy coding to all of you.

Function Declaration Hoisting

This is the second post in the series of posts  explaining some fascinating features and caveats of javascript. "Function Declaration Hoisting" the name itself is intimidating ...!!!

Lets understand it with an example. What do you think will be the output of the below code snippet?

//Code Snippet 1
var isTrue=true;

if(isTrue) {
      
       function myFunc(){
         alert("Hello True");
       }
}

else {

     function myFunc(){
         alert("Hello False");
       }
}   

myFunc();

The answer is "Hello False".

When javascript interpreter starts scanning the javascript, it scans the function declaration first. 
What it means that, we can write some code like below and it works fine.

 //Code Snippet 2
myFunction();

function myFunction(){
  alert("Hello World");
} 

Now we can see that we have called the function before implementing it ,still it works due to this feature called "Function Declaration  Hoisting".Where javascript scans and interprets all the function declaration in document first before interpreting any of the statements.

If this feature would not have been there "Code Snippet 2" would fail because interpreter would have tried to execute statement "myFunction();" before knowing about function "myFunction()".

"Code Snippet 1" does not work properly because in first scan interpreter reads both the implementations of the function "myFunc()" without caring if the variable "isTrue" evaluates to "true" or "false". Now as i discussed in my previous post javascript does not support function overloading ,hence for javascript after first scan there is only one function named "myFunc()' with the implementation in the "else part as it was the last one to appear in the execution".So whatever be the value of the variable "isTrue", output will always be "Hello False".

 

Function Overloading in Javascript

Some of the concepts in "JavaScript" is really difficult to get. What make them more difficult is the fact that we except it to behave like true object oriented programming language.

What would you expect from the following piece of code:-
      
             //Function 1
             function fun(arg1,arg2){
              alert("Fun_1");
             }
            
             //Function 2
             function fun(arg){
              alert("Fun_2");
             }

             fun();//Call 1
             fun("Hello_1","Hello_2");//Call 2

I bet most of us will think "Call 1" will fail and "Call 2" will invoke "Function 1".

The fact is both calls will invoke "Function 2"....Surprised????

To understand why javascript shows this behavior , we have to consider that even though the above mentioned functions seems like two different functions (Because we are very much familiar with C++ or Java). The fact is they are not as javascript does not support function overloading . What is being done in the above code snippet is that the second function i.e Function2 just overwrites the Function1.

Hence in nutshell. Javascript does not support function overloading and as it is not a compiled programming language there is no compiler to warn you when you write two function with same name but different argument.

The interpreter which  comes with the browser just follows "Last One Wins" principle and leave us all surprised and puzzled when we see that all calls (With different argument) invokes only one of the function which is declared at last in the execution flow.