Hoisting

Let's start with example 1 (len)

#Ex1: 
console.log(a);

The result is not unusual: raised error a is not define, because the variable ahas not been declared anywhere

Example 2:

#Ex2:
console.log(a);
a = 'Hello Hoisting';

This example seems "a lot" more complicated than the above example but the result is still the same:a is not define

Example 3:

#Ex3:
var a;
console.log(a);

The output will be undefinedbecause ait has been declared but has not yet been assigned a value

Example 4

#Ex4:
console.log(a);
var a;

By chance and surprisingly, the results were the same as Ex3, both undefined Why is that so???

Define

Hoisting is the default action of Javascript, it will move the declaration to the top. In Javascript, a variable can be declared after being used.

We will continue Ex5and explain more clearly for example 4.

#Ex5
console.log(a);
var a = 'Hello Hoisting'
#Output = ???

The results will be interpreted according to the following diagram: Explanation:

• The Javascript compiler will separate the section var a = 'Hello Hoisting'into two parts: declaration and value assignment

  • Declare:var a

  • Assign valuea = 'Hello Hoisting'

• According to Hoisting, Javascipt will move the declaration to the top. Therefore, only the declaration part will be moved to the top, while the value assignment part will remain in the same order so it will remain at the bottom. So the Output will beundefined

Hoisting of function?

Define

The Javascript compiler will move the declaration to the top just like it does with variables. Example 6:

say_something('YOLO');
function say_something(a){
    console.log(a);
}

Output is the same as with the variable partYOLO

Example 7:

#Ex7:
do_something();
function do_something(){
    console.log(a);
    var a = 'fly';
}

The results will be interpreted according to the following diagram:

Explain:

• Just like with part 1, the internals of the function do_somethingare also used by the compiler hoisting.

• But the declaration is only moved to the top of the function do_something, not the program

So, Output will beundefined

Hoisting function vs Hoisting variable

Define:

The Javascript compiler will move the function definition before the variable declaration. Example 8:

var show_me;
show_me();
function show_me() {
  console.log('Money');
}
show_me = function() {
  console.log('Diamond');
}

According to the above definition, the output will beMoney

Functions declared later, if they have the same name, will overwrite the function declared before

Example 9:

var show_me;
show_me();
function show_me(){
  console.log('Money');
}
show_me = function(){
  console.log('Diamond');
}
function show_me(){
  console.log('Gem');
}

Output will beGem

Summary

• The Javascript compiler will move the declaration of variables and functions to the top, it is called Hoisting

• Only the declaration part is put at the top, not the value assignment part

• The function declaration is placed before the variable declaration