Why JavaScript function visibility depends on declaration in the same or different script block in HTML

Question

If I implement the following JavaScript code block in HTML markup:

    <script type="text/javascript">
        function MyFunc() {
            alert(1);
        }
        var f1 = MyFunc;
    </script>
    <script type="text/javascript">
        function MyFunc() {
            alert(2)
        }
    </script>
    <script type="text/javascript">
        f1();
    </script>

I get an alert message '1'. However, if I use the following code:

<script type="text/javascript">
            function MyFunc() {
                alert(1);
            }
            var f1 = MyFunc;
            function MyFunc() {
                alert(2)
            }
        </script>
        <script type="text/javascript">

        </script>
        <script type="text/javascript">
            f1();
        </script>

I get '2'. Why? Tested in IE10, latest FF, Chrome.

Answer 1

Each script element is parsed and executed in order. In the first case, the assignment to f1 is made before the second declaration is processed.

In the second case, both declarations are parsed before the assignment is made (because declarations are processed before any code is executed), so the second declaration replaces the first before the assignment to f1.

Answer 2

This is caused by hoisting. var and function declarations are hoisted to the top of the script block they are in.

This means that your first script essentially becomes:

var f1;
function MyFunc() {
    alert(1);
}
f1 = MyFunc;

// new script block

function MyFunc() {
    alert(2)
}

// new script block

f1(); // alert 1

Meanwhile, your second script becomes:

var f1;
function MyFunc() {
    alert(1);
}
function MyFunc() { // overwrite previous MyFunc
    alert(2)
}
f1 = MyFunc;

// new script block

f1(); // alert 2

I hope this makes sense - just in general avoid overwriting functions XD