Skip to main content

Hoisting

Hoisting is one of the feature in JavaScript that puzzles many beginners and intermediate developers.  Hoisting is a feature wherein all the variables are moved to the outermost scope, which is function, in JavaScript.  This may sometimes result in seemingly strange behavior.

Before and after hoisting





The output of the above program is an alert with a value of 10.  Traditional logic would have lead us to believe that the value of alert should be undefined.  But because of hoisting the variable is moved to the top of function declaration.  Its important to realize that only the variable declaration is moved and not the initialization.
Recommendation: Always declare your variables at the top of the function scope.

Similar to variable hoisting we also have function hoisting.  Function hoisting has different behaviors based on the fact if the function is an expression or a declaration.

A function is an expression if it is assigned to a variable.  The assignment may also hold an anonymous or named function.   A function declaration is fully hoisted whereas a function expression has the hoisting behaviour of the variables as seen above.

Checkout the jsfiddle demo for a running application.


Watch out for next post where we will be demystifying "scope" in JavaScript.

Comments

[...] You can read more about hoisting here http://rajeshpillai.tekacademy.com/hoisting/ [...]
Siddhesh said…
Nice Post :)
hxxxld said…
vIvOlr exzjfkvpkcbt, [url=http://vlrzfwctsceu.com/]vlrzfwctsceu[/url], [link=http://zcicmlebrwbf.com/]zcicmlebrwbf[/link], http://jeymgxnghlud.com/

Popular posts from this blog

JavaScript Scope

In this blog post we will dig deeper into various aspects of JavaScript scope.  This is a pretty interesting topic  and also a topic which confuses many beginning JavaScript programmers. Understanding JavaScript scope helps you write bug free programs (hmm.. atleast helps your troubleshoot things easily) Scope control the visibility and lifetimes of variables and parameters.  This is important from the perspective of avoiding naming collisions and provides memory management service. Unlike other languages, JavaScript does not have block level scope.  For e.g. take for instance the following piece of c# code. public void Main () { int a = 5; if (true) { int b = 10; } // This will throw compile time error as b is not defined // and not within the scope of function Main(); Console.WriteLine(b); } If you write the same code in JavaScript, then the value of 'b' will be available outside the 'if' block. The reason for this is JavaScript does no

JavaScript Function Spaghetti Code

In this post we will have a look at the spaghetti code created by functions and how to avoid them. First lets quickly go through why this is a cause of concern. Problems with Function Spaghetti Code Variables/ functions are added to the global scope The code is not modular There's potential for duplicate function names Difficult to maintain No namespace sense. Let's take for example the following set of functions and check whats the issue with them. // file1.js function saveState(obj) {     // write code here to saveState of some object     alert('file1 saveState'); } // file2.js (remote team or some third party scripts) function saveState(obj, obj2) {      // further code...     alert('file2 saveState"); } Now the problem here is if your application is using saveState() then the execution of saveState() which one to call is determined by the script loading.  The later script overrides same functions already defined by earlier script. F

JavaScript for Web and Library Developers

This is my first blog post on my home domain and in this series of posts I will explore various facets of JavaScript language that will help us become better programmers.  The idea is tear apart the language and understand how to use the features and build libraries like jquery, knockoutjs, backbonejs. The idea is not to replicate this libraries, but understand the inner workings using better JavaScript coding practices, design principles and thereby make the web a better place to visit.. We will be covering the following topics, though not in order and there may be addition to this list. Foundations Patterns Closure this keyword Hoisting Anonymous function Currying Server side JavaScript Canvas etc. Hope you will enjoy this journey with me!