Hosting in JavaScript: Day 9

Introduction

I highly recommend reading the following previous parts:

1. Introduction to JavaScript: Day 1
2. Programming Basics in JavaScript: Day 2
3. Comments and Objects in JavaScript: Day 3
4. Scope and Events in JavaScript: Day 4
5. Array in JavaScript: Day 5
6. Page Re-direction in JavaScript: Day 6
7. Errors and Exception Handling in JavaScript: Day 7
8. Debugging in JavaScript: Day 8

Hoisting in JavaScript

It is the default behavior of JavaScript. Hoisting means moving the declarations to the top of the function. It likes you declare all variables top in a function. Rather than being available after their declaration, they might actually be available beforehand.

Example

<script>
   var hoist = "Outer";
   function Hoisting(){
      alert(hoist);
      var hoist = "Inner";
      alert(hoist);
   }
   Hoisting();
</script>

In the preceding example you are guessing the output, like the first popup message is "Outer" because it is not yet changed. It moves the declaration to above the function and over writes, that's why the first alert message is "undefined" because the default behavior of JavaScript means Hoisting.

It is the same as in the following example:

<script>
   var hoist = "Outer";
   function Hoisting(){
      var hoist;
      alert(hoist);
      hoist = "Inner";
      alert(hoist);
   }
   Hoisting();
</script>

To avoid the bugs, always declare variables at the top. JavaScript only hoists the declaration of variables but not the initializations.

Example

<script>
   function Hoisting()
   {
      var hoist = "JavaScript";
      alert(hoist + " " + example);
      var example = "Hoisting Example";
   }
   Hoisting();
</script>

Output

JavaScript is only hoisting the declaration, not the initialization. It shows in the preceding example the output is “JavaScript undefined”.

This JavaScript hoisting is not only for variables but also for functions. It is the same for variable declarations as for functions. This only hosts the function declaration, not the function expressions.

Example

<script>
   Hoisted();
   NotHoisted();
   function Hoisted() {
      alert("Function hoisted!");
   }
   var NotHoisted = function () {
      alert("Function not hoisted!");
   };
</script>

Output

The preceding example output first alert message is "Function hoisted!" and the second alert message does not show because the error "undefined is not a function" variable declaration is hoisted.

If you used the named function expression:

<script>
   fName();
   vName();
   var vName = function fName() {
      console.log("Definition not hoisted!");
   };
</script>

Output

You can see in the JavaScript console log that it will show the error "fName is not defined" because the function name isn't hoisted because it's part of the expression.

Summary

Thanks for reading. I hope you understood the concepts of Hoisting in JavaScript. If you have any suggestion regarding this article then please contact me.