Javascript handles function and variable declartions quite differently and you must have got stuck in one of the awkard scenarios due to it.<\/p>\n
First of all, you should be familiar with Scoping in JavaScript. If you are, then you would know already that JavaScript only has function scopes and no block scopes<\/strong>.<\/p>\n [js] The result is: As we can see in the above example, the if<\/strong> block doesn’t create a new scope.<\/p>\n Lets go into the concept of Hoisting<\/strong> now. Hoisting is a way in which JavaScript deals with variable and function declarations. What actually the JavaScript interpreter does is, it pushes all your Function and Variable declarations to the top of the containing scope.<\/p>\n Lets understand this with a simple example:<\/p>\n [js] \/\/Now this function will be interpreted as below<\/p>\n [js] Lets try some code here:<\/p>\n [js] The above code will throw an error : undefined is not a function<\/strong>. Lets see how this function is interpreted.<\/p>\n [js] As we can see, only the left handside of the declarations is hoisted, but that is not the case with function declarations written as sum<\/strong> method.<\/p>\n The other way of declaring functions is as method multiply<\/strong>, in this case though the interpreter only takes the left hand side name. This results in an error undefined is not a function as multiply is undefiend at the time of function call.<\/p>\n This is all about JavaScript Hoisting in brief. Hoisting is a way in which JavaScript deals with variable and function declarations. What actually the JavaScript interpreter does is, it pushes all your Function and Variable declarations to the top of the containing scope.<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1,"footnotes":""},"categories":[1],"tags":[1528,1527,55,1529,1530],"class_list":["post-15722","post","type-post","status-publish","format-standard","hentry","category-technology","tag-functions","tag-hoisting","tag-javascript","tag-scopes","tag-variables"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
\nvar a = ‘hello’;
\nconsole.log(a);
\nif(a)
\n{ console.log(a);
\n a = ‘javascript’;
\n }
\nconsole.log(a);
\n[\/js]<\/p>\n
\n
\nhello
\nhello
\njavascript
\n<\/code><\/p>\n
\nfunction sum() {
\n calculate();
\n var a = 10;
\n var b = 20;
\n}
\n[\/js]<\/p>\n
\nfunction sum() {
\n var a, b;
\n calculate();
\n a = 10;
\n b = 20;
\n}
\n[\/js]<\/p>\n
\nfunction calculate() {
\n sum();
\n multiply();
\n var a = 10;
\n function sum(){
\n console.log(a + b);
\n }
\n var b = 20;
\n var multiply = function() {
\n console.log(a * b);
\n }
\n}
\ncalculate();
\n[\/js]<\/p>\n
\nfunction calculate() {
\n var a, b, multiply;
\n function sum(){
\n console.log(a + b);
\n }
\n sum();
\n multiply();
\n a = 10;
\n b = 20;
\n multiply = function() {
\n console.log(a * b)
\n }
\n}
\n[\/js]<\/p>\n
\nHope it helps you, hoisting your own flag in JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"