{"id":15722,"date":"2014-10-12T18:43:14","date_gmt":"2014-10-12T13:13:14","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=15722"},"modified":"2014-10-17T14:11:56","modified_gmt":"2014-10-17T08:41:56","slug":"variable-hoisting-in-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/variable-hoisting-in-javascript\/","title":{"rendered":"Variable Hoisting In JavaScript"},"content":{"rendered":"<p>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<p>First of all, you should be familiar with Scoping in JavaScript. If you are, then you would know already that <strong>JavaScript only has function scopes and no block scopes<\/strong>.<\/p>\n<p>[js]<br \/>\nvar a = &#8216;hello&#8217;;<br \/>\nconsole.log(a);<br \/>\nif(a)<br \/>\n{    console.log(a);<br \/>\n    a = &#8216;javascript&#8217;;<br \/>\n }<br \/>\nconsole.log(a);<br \/>\n[\/js]<\/p>\n<p>The result is:<br \/>\n<code><br \/>\nhello<br \/>\nhello<br \/>\njavascript<br \/>\n<\/code><\/p>\n<p>As we can see in the above example, the <strong>if<\/strong> block doesn&#8217;t create a new scope.<\/p>\n<p>Lets go into the concept of <strong>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<p>Lets understand this with a simple example:<\/p>\n<p>[js]<br \/>\nfunction sum() {<br \/>\n    calculate();<br \/>\n    var a = 10;<br \/>\n    var b = 20;<br \/>\n}<br \/>\n[\/js]<\/p>\n<p>\/\/Now this function will be interpreted as below<\/p>\n<p>[js]<br \/>\nfunction sum() {<br \/>\n    var a, b;<br \/>\n    calculate();<br \/>\n    a = 10;<br \/>\n    b = 20;<br \/>\n}<br \/>\n[\/js]<\/p>\n<p>Lets try some code here:<\/p>\n<p>[js]<br \/>\nfunction calculate() {<br \/>\n    sum();<br \/>\n    multiply();<br \/>\n    var a = 10;<br \/>\n    function sum(){<br \/>\n        console.log(a + b);<br \/>\n    }<br \/>\n    var b = 20;<br \/>\n    var multiply = function() {<br \/>\n        console.log(a * b);<br \/>\n    }<br \/>\n}<br \/>\ncalculate();<br \/>\n[\/js]<\/p>\n<p>The above code will throw an error : <strong>undefined is not a function<\/strong>. Lets see how this function is interpreted.<\/p>\n<p>[js]<br \/>\nfunction calculate() {<br \/>\n    var a, b, multiply;<br \/>\n    function sum(){<br \/>\n        console.log(a + b);<br \/>\n    }<br \/>\n    sum();<br \/>\n    multiply();<br \/>\n    a = 10;<br \/>\n    b = 20;<br \/>\n    multiply = function() {<br \/>\n        console.log(a * b)<br \/>\n    }<br \/>\n}<br \/>\n[\/js]<\/p>\n<p>As we can see, only the left handside of the declarations is hoisted, but that is not the case with function declarations written as <strong>sum<\/strong> method.<\/p>\n<p>The other way of declaring functions is as method <strong>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<p>This is all about JavaScript Hoisting in brief.<br \/>\nHope it helps you, hoisting your own flag in JavaScript.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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":0},"categories":[1],"tags":[1528,1527,55,1529,1530],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/15722"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=15722"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/15722\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=15722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=15722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=15722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}