Hoisting in javascript

In Javascript , Scope is set of functions/ variables/objects you have access to. Javascript (ES5) provides functional scope. Which means you can access all the variables, functions etc which is declared within function. All variables, functions, objects declared within the scope act as if they were declared at the start of scope. This behaviour is known as Hoisting.

To understand the hoisting, lets go through few examples:

EXAMPLE1:

var global = “global”;
               function scopeFunction () {
                    var local = “local”;
                    console.log(global); // global
                    console.log(local); // local
               }

EXAMPLE2:

var global = “global”;
               function scopeFunction () {
                    console.log(global); //global
                    console.log(local); //undefined
                    var local = “local”;
               }

EXAMPLE 3:

var global = “global”;
               function scopeFunction () {
                    console.log(global);
                    console.log(local);
                    var global = “global”;
               }

Let’s look at what is happening in above examples.

EXAMPLE1: We have declared two variables: ‘global’ outside the scope ‘local’ Inside the scope, at the start of the scope. If we log these two variable we get output showing the values we have assigned to each variable.

EXAMPLE2 : Here we have declared and assigned ‘local’ variable inside the scope but at the end of the scope. Though we have assigned value “local” to ‘local’ variable , we get output as ‘undefined’. We need to understand the hoisting to understand this behaviour. As we have declared and assigned local at the end of the scope. Javascript will hoist this variable at the start of the scope. While hoisting variable will get declared (not assigned). So output will be undefined (which is default variable value in javascript).

EXAMPLE3: In this example local ‘global’ variable will replace global ‘global’ variable. And local ‘global’ will be hoisted. So it will give output as ‘undefined’ of this global variable.

FUNCTION HOISTING

Functions can be declared as,

1. Function declaration.
2. Function Expression.

To understand how hoisting works on functions, look at following example, EXAMPLE 4:

output:

Hello

Example5:

console.log(callMethod); //output: undefined

callMethod(); // TypeError: undefined is not a function

var callMethod = function() { return “Hello”; }

In Example4 : Both function definition and function declaration are getting hoisted so It executing function and giving output properly. but in example 5 : only function declaration is getting hoisted but not its definition . So value of callMethod is undefined and not function. So, In function expression only function name gets hoisted as a variable , but in function declaration function gets hoisted with its definition. The Hoisting problem could led to errors. So we need to follow few patterns to avoid those errors:

1. Write your code in strict mode.
2. Declare all variables at start of the scope.
3. Avoid implied globals. Declare all variable using ‘var’.

Happy coding…