Hosting is JavaScript's default behavior of moving up declarations of variable and function to the top of their scope before execution of the code. This default behavior allows to declare a variable or function after it has been used.

In this article I will explain the hosting behavior of JavaScript in details with example.

How Interpreter execute code in JavaScript?

Before going to further explanation of hosting, it's worth to mention how interpreter execute code in JavaScript. This way it will be easier to understand what is hosting and what actually happens behind the scene. In JavaScript, interpreter executes code in two phases:

1. On the first phase, it looks for all the variable and function declarations and place them in the memory.
2. On the second phase, it executes the code.

Example Illustration

Now consider the following code sample to illustrate the concept of hosting.

//accessing 'greetings' variable before its declaration
console.log(greetings); 
var greetings = "hello hoisting";
//accessing 'greetings' variable after its declaration & initialization
console.log(greetings); 
//calling 'message' function before its declaration
message("A default behavior!");
function message(msg){
    console.log(msg);
}

The above code looks wired initially (especially for one who is new in JavaScript), isn't it? Accessing variable and function before their declarations! It seems it will produce error. But it won't produce any error because of hosting. Look at the output of the above code.

Output:
-------
undefined
hello hoisting
A default behavior!

In JavaScript, hosting means to move up variable and function declarations to the top of their scope before code execution. It is important to be noted that in case of variable, only variable declaration is hoisted not variable initialization.

That's why, In the output, you can see that greetings have undefined in the first case. Because, when a variable declare with var keyword without initialization, it's assigned undefined value by default. But in the later case, after initialization of greetings variable with value "hello hoisting", it shows the expected output.

On the other side, a variable declared with let or const keyword, do not have this default behavior, and hence, results in ReferenceError. This behavior is called Temporal Dead Zone (i.e. accessing variable which is declared later and not even have the default undefined value in it). Therefore, it is said that variables declared with let or const don't hoist! Though the truth is, it does hoist but doesn't get initialized with the default undefined value like the var keyword, and hence, results in ReferenceError.

So, behind the scene, the above code sample can be considered and imagined as below as per the concept of hoisting in JavaScript.

var greetings;
function message(msg){
    console.log(msg);
}
console.log(greetings); 
greetings = "hello hoisting";
console.log(greetings);
message("A default behavior!");

Output:
-------
undefined
hello hoisting
A default behavior!

It's magic! Isn't it?

No, actually it's not a magic. That's why at the beginning of this article, I mentioned how Interpreter execute code in JavaScript, so that you can imagine what actually happened behind the scene. The actual fact is, interpreter first looks for all the variables and functions and place them in the memory before execute the code. Thus, in the time of code execution, interpreter already know the greetings variable and message function even if they declared after they have been used.

Summary

The default behavior of hosting in JavaScript might causes unexpected effect if not handles carefully. So, it is considered to a best practice to declare and initialize variables always at the top of their scope to avoid having undefined value in the variable or any undesirable behavior. This way you can also have a cleaner and more manageable code.

Happy JavaScript coding!