Hoisting

Hoisting is JavaScript's default behavior: moving declarations to the top. That means the following code will work in JavaScript:

bookName("ES8 Concepts");
function bookName(name) {
   console.log("I'm reading " + name);
}

If you're coming from a C/C++ background, this might seem a little weird at first because those languages do not allow you to call a function before at least declaring its prototype. But JavaScript, behind the scenes, hoists the function, that is, all function declarations are moved to the top of the context. So, essentially, the preceding code is the same as the following:

function bookName(name) {
   console.log("I'm reading " + name);
}

bookName("ES8 Concepts");

Hoisting only moves the declarations to the top, not the initializations. Therefore, although the preceding code works, the following code won't work:

bookName("ES8 Concepts"); // bookName is not a function
var bookName = function(name) {
   console.log("I'm reading " + name);
}

This is because, as we said earlier, only declarations are hoisted. Therefore, what a browser sees is something like this:

var bookName; // hoisted above
bookName("ES8 Concepts"); // bookName is not function 
                          // because bookName is undefined
bookName = function(name) { // initalization is not hoisted
   console.log("I'm reading " + name);
}

Guess the output of the following code:

function foo(a) {
   a();
   function a() {
      console.log("Mehul");
   }
}

foo(); // ??
foo( undefined ); // ??
foo( function(){ console.log("Not Mehul"); } ); // ??

Ready to find out? Your possible answers are:

• Mehul
  undefined
  Not Mehul

• Program throws error

• Mehul
  Mehul
  Mehul

The output will be :

Mehul
Mehul
Mehul

Why? Because this is how your browser see this code (after applying the hoisting thing):

function foo(a) { 
   // the moment below function is declared, 
   //the argument 'a' passed is overwritten.
   function a() {
      console.log("Mehul");
   }
   a();
}

foo();
foo( undefined );
foo( function(){ console.log("Not Mehul"); } );

Once the function is hoisted, it doesn't matter what you pass in that function. It is always overwritten with the function defined inside the foo function.

Therefore, the output is just Mehul written three times.