Function hoisting in JavaScript

JavaScript Function Hoisting

Function hoisting means that functions are moved to the top of their scope, Which means you can call functions before they are declared in your code.

There are 2-ways of creating functions in JavaScript :

1. Function declarations.

2. Function expressions.

Let's see the following example of function hoisting :

1.) Function declarations :

As you can see, we called the message() function before it is defined, but the code still works. This is because the function declaration is moved to the top automatically behind the scenes.

 ➤ Example 1 : Function declaration before hoisting;

<script>
    //Calling function before declaration
    message(); //Outputs: Hello, I am hoisted!
    function message()
     {
       document.write("Hello, I am hoisted!");
     }
</script>

Behind the scenes, this is how the JavaScript interpreter looks at the above code, Javascript compiler change Example 1 to Example 2.

 ➤ Example 2 : Function declaration after hoisting;

<script>
    function message()
     {
       document.write("Hello, I am hoisted!");
     }
    message(); //Outputs: Hello, I am hoisted!
</script>

2.) Function expressions :

• Function expressions, are not hoisted.

 ➤ Example :

<script>
    message(); //TypeError: message is not a function
    var message = function()
     {
       document.write("Hello, I not am hoisted!");
     };
</script>

Example explanation :

As we can see above, the variable declaration var message is hoisted but it's assignment to a function is not. Therefore, the intepreter throws a TypeError since it sees message as a variable and not a function.

Let's try the combination of a function declaration and expressions :

 ➤ Example :

<script>
    message(); //TypeError: message is not a function
    var message = function hoisting()
     {
       document.write("Hello, I not am hoisted!");
     };
</script>