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 - The this keyword

"this" is one of the most misunderstood construct in JavaScript.  To understand this first lets go through how to create a construction function in JavaScript.  A constructor function is a function which is used to create instances of objects in JavaScript.

You define a constructor function using the same notation that you use to define a normal JavaScript function.  The convention to follow is to capitalize the first letter of the function name.

This requirement is not enforced by the JavaScript language but it is a generally accepted practice and there are many benefits which we will shortly discuss.

Let's define a constructor function to hold our menu information.

function Menu() { }
So, in the above snippet you have a constructor function named Menu defined. At present this function doesn't do anything good.

Let's see how to invoke this function

var menu = new Menu();
Let's add some public properties to this function.
function Menu() { this.menuName = &q…

C# Abstract Class Vs. Interface - Building a simple rule engine

In this video post we will briefly go over the difference between abstract class and an interface.  This is one of the most confusing concepts for beginners to understand. In the following video we will walkthrough step by step through these concepts and build a simple RuleEngine as a demo.

Please do note that this rule engine is not fully functional and production ready, but is demonstrated to make the concepts clear.

Please leave your constructive comments and also suggestions about future videos, if you like to have on any specific topics.