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".
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".
Just a small fun Code challenge to people who are visiting my site.
ReplyDelete1. Above code can be fix with the help of just one
symbol. Can you figure it out??
2. There is a browser where this code will work fine.Can you figure it out.
Post your answer here!!
Happy Coding to all of you!!!
Dude this works well in Mozilla and not in IE. That is in mozilla the output will be "Hello True" and in IE it will be "Hello False". Because parsing the javascript code depends on the browser's javascript engine. In case of Mozilla these are global variables and so it executes in a line by line manner. And hence it just declares a function with the Hello True method and does not declare the function in else block. So when the method is invoked it just calls the function which is defined in the true section. In case of IE the whole story is the other way what u've explained. Hope i'm correct
ReplyDeleteThats right. But tell me how to fix this code so that it should
Deletework in all browsers,with minimal code change:)
declare the variable like this var isTrue="true";
ReplyDeleteHey sorry for late reply.
DeleteI am afraid the solution is not going to work. You can try for yourself.
The solution is very easy this behavior is due to the nature of javascript how it parses the function declaration.
So instead of making "myFunc" as function declaration make it,
function expression i.e
var myFunc=function(){
};
Once you do this all will be well. Try out and let me know
if you face any issue.