Difference between these two ways of calling a function

Question

PopupFirstNameButton.addEventListener('click', FirstNameFunction);

// This gets called
function FirstNameFunction(){
  alert("Hello");   
}

// This does not
var FirstNameFunction = function (){
    alert("Hello");   
}

score 7 · Answer 1 · answered Apr 19 '11 at 14:03

7

var FirstNameFunction = function (){
    alert("Hello");   
}

this is an assignment statement , so only after this is executed, FirstNameFunction gets assigned a value. So when PopupFirstNameButton.addEventListener('click', FirstNameFunction); is executing, FirstNameFunction is undefined

answered Apr 19 '11 at 14:03

wong2

28,972
43
121
165

1

To be more precise, it's a ‘function expression’ (opposed to ‘function declarations’ and Mozilla's non-standard ‘function statements’). See http://kangax.github.com/nfe/#expr-vs-decl – Marcel Korpel Apr 19 '11 at 14:04
@theJava see http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname for the difference between two method of function definition – wong2 Apr 19 '11 at 14:11

Joshua Carmody · Accepted Answer · 2011-04-19T14:20:39.440

In the first example, you're creating a named function. The function's name is FirstNameFunction.

In the second example, you're creating an anonymous function (a function that has no name). However, you're also defining a variable named FirstNameFunction that holds a reference to the anonymous function. In this case FirstNameFunction is not the function itself, but is just a variable that references it.

The reason these differences are important when assigning the event handler as you did on the first line, is because global-scope named functions can be referenced from anywhere in the code, as long as their declaration has been parsed and interpreted before you try to use them. On the other hand, variables can only be used while they're in scope. That means after they're defined, and before they fall out of scope. Therefore, you should be able to use the second declaration method with your event handler assignment, as long as you declare the variable pointing to the anonymous function before you call the event handler and you do it in the same scope.

This works:

var FirstNameFunction = function (){
    alert("Hello");   
}    
PopupFirstNameButton.addEventListener('click', FirstNameFunction, false);

This doesn't:

PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // FirstNameFunction is undefined!!
var FirstNameFunction = function (){
    alert("Hello");   
}

Neither does this:

function declareFunction()
{
    var FirstNameFunction = function (){
        alert("Hello");   
    }    
}  // FirstNameFunction falls out of scope here and is no longer declared

declareFunction(); // The anonymous function exists while this is running but the reference is lost when the function returns

PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // This doesn't work.

user422039 · Answer 3 · 2011-04-19T14:28:27.333

2

You are missing 3rd argument to addEventListener again!

This happens because FirstNameFunction used in line 1 is undefined yet with anonymous function syntax at line 9. With function syntax FirstNameFunction symbol is in scope already.

edited Apr 19 '11 at 14:28

answered Apr 19 '11 at 14:07

user422039

1,371
3
12
27

+1 because I didn't realize that addEventListener's third argument was mandatory (I thought it would default to false). But O'Reilly agrees with you: http://bit.ly/e9tlbJ – Joshua Carmody Apr 19 '11 at 14:24
@Joshua Carmody, added link to authoritative source (dont like DevMo? there is W3C link at the bottom too!) – user422039 Apr 19 '11 at 14:33

score 1 · Answer 4 · answered Apr 19 '11 at 14:04

1

The first function gets bound at compile time. The function foo() syntax allows for look-ahead declaration of functions.

The second is a simple variable declaration. And you can't use variables, before they are declared...

answered Apr 19 '11 at 14:04

Boldewyn

75,918
43
139
205

Well, interpretion time. However, at some time there is machine code involved, so the term is not fully wrong. – Boldewyn Apr 19 '11 at 15:20

score 1 · Answer 5 · answered Apr 19 '11 at 14:08

Maybe because they both have the same name? I tried :

<HEAD>
        <SCRIPT TYPE="text/JavaScript">
            // This does not get called?
            var FirstNameFunction = function (){
                alert("Hello");
            }
        </SCRIPT>
    </HEAD>
    <BODY>
        <button id="abutton" value="!"/>

        <SCRIPT TYPE="text/JavaScript">
            getById('abutton').addEventListener('click', FirstNameFunction);
            </SCRIPT>
    </BODY>

And it worked (in Chrome at least)

This works because you're calling the addEventListener function after the variable is declared, whereas the asker was calling it before. — Joshua Carmody, Apr 19 '11 at 14:15

Difference between these two ways of calling a function

5 Answers5