Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 524
Vladimir Avatar asked Dec 27 '13 12:12

Vladimir


People also ask

How do you declare a function in JavaScript?

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...)

Can a function be assigned to a variable in JavaScript?

It is possible to use a function expression and assign it to a regular variable, e.g. const factorial = function(n) {...} .

What are the different types of functions in JavaScript?

There are 3 ways of writing a function in JavaScript: Function Declaration. Function Expression. Arrow Function.

How is the function called in JavaScript?

In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects. For more examples and explanations, see the JavaScript guide about functions.


2 Answers

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.

like image 124
RobG Avatar answered Sep 19 '22 14:09

RobG


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

like image 45
Niet the Dark Absol Avatar answered Sep 19 '22 14:09

Niet the Dark Absol