Javascript in all its weirdness: Function hoisting (will spin your head!)

Unless you are a Javascript guru, or have read related stuff before, this will spin your head!

To see this in action: Paste this into a "test.html" file and open in firefox, and open Firebug.

Here, two functions a and b are defined, both using what are called 'function declaration syntax', much like a C/Java function.

However, another function tries to redefine each of these locally. 'a' is redefined using a function declaration syntax, whereas b is redefined using a 'function expression' syntax (i.e., treating function like an expression and assigning it to a var called 'b'). Notice, how the entire defintion of 'a' is hoisted (pushed up to the top of the defining function), whereas only the variable name 'b' is hoisted, not its definition.

See my other article on the basics of hoisting, if you are not familiar with it - "Javascript in all its weirdness - Hoisting"


<script type="text/javascript">
// Function hoisting

// function declaration
function a() {
    console.log('a called');
}

// function declaration
function b() {
    console.log('b called');
}

// Hoisting function
function hoister() {
    console.log("Hoister: a is : " + typeof a); // a is completely hoisted, so its definition even is already available
    console.log("Hoister: b is : " + typeof b); // only the variable declaration of 'b' is hoisted, and it's not yet recognized here as a function, hence 'undefined'

    // redefine a locally
    // using function declaration
    // entire declaration/definition is hoisted
    function a() {
        console.log('Hoister: local a called');
    } // Notice, no semicolon!
   
    // Redefine b locally, but using function expression
    var b = function () {
        console.log('Hoister: local b called');
    }; // Notice the semicolon
   
}
hoister();
</script>

Reference: Javascript patterns, Stoyan Stefanov