functions in javascript - defining and calling them, with or without a function name

Question

My question is easiest explained with the code block and the questions below it.

But here is an attempt to explain my question in English:

I am learning JavaScript (and I am lazy so I use a lot of jQuery... ;) ) and I came across something which I don't quite understand, and I don't know what it is called, therefore I don't know what terms i should research.

Basically I am wondering when it is necessary to use function(){ ... } (without a name) and when to use function function_name(){ ... } (with a name), and how to execute a function with things like .click() .post() or setTimeout().

I know a couple of jQuery functions, like .click() that require you to put in a function to be called. But the thing is, you can't just say .click( function_name() ) (this would call the function immediately upon executing the script if I interpreted my test results correctly) instead you have to do .click( function(){ ... }) or you can do .click( function function_name(){ ... }). I also found out that you can say .click( function_name ) as long as you define beforehand var function_name = function function_name(){ ... } whereas the function name is optional, it will work with or without adding that.

I made an example with all possible scenarios I could think of. And I did find out what is working and what isn't, now I want to find out why each one is working and others aren't.

I am hoping understanding this will help me better understand asynchronous functions such as .post() or setTimeout().

<button id="one">Button 1</button>
<button id="two">Button 2</button>
<button id="three">Button 3</button>
<button id="four">Button 4</button>
<button id="five">Button 5</button>
<button id="six">Button 6</button>
<button id="seven">Button 7</button>
<button id="eight">Button 8</button>
<button id="nine">Button 9</button>

<script type="text/javascript">
    function alert_three(){
        alert('three');
    }

    var alert_four = function(){
        alert('four');
    }

    function alert_five(){
        alert('five');
    }

    var alert_five = alert_five();
    //this will alert five right away, because we call to the function alert five, which does not return anything but creates an alert box.

    var alert_six = function alert_six(){
        alert('six');
    }

    $('#one').click( function(){
        alert('one');
    });
    //this will work correctly.

    $('#two').click( alert('two') );
    //this will alert two right away, because...?
    //it wont do anything else on click

    $('#three').click( alert_three() );
    //this will alert three right away, because...?
    //it wont do anything else on click

    $('#four').click( alert_four );
    //this will work correctly.

    $('#five').click( alert_five );
    //this wont do anything else on click

    $('#six').click( alert_six );
    //this will work correctly.

    $('#seven').click( function alert_seven(){
        alert('seven');
    });
    //this will work correctly.

    function alert_eight(){
        return function(){
           alert('eight');
        }
    }

    $('#eight').click( alert_eight() );
    //this will work correctly      

    function alert_nine(){
       alert('nine');
    }

    $('#nine').click( alert_nine ); 
    //this will not work
</script>

• Why will this script alert first five, then two, then three on startup?
• Why will only buttons 1, 4, 6, and 7 work correcty?
• How would you describe the differences between the working buttons?
• Which variation would you use when and why? (meaning: when to give it a name, when to write the function in a variable?)

A Fiddle for the same: http://jsfiddle.net/ZfnaM/5/

Answer 1

Basically I am wondering when it is necessary to use function(){ ... } (without a name) and when to use function function_name(){ ... } (with a name)

It is never really necessary to use either. It is just sometimes more convenient to use one or the other.

and how to execute a function with things like .click() .post() or setTimeout().

If you are using the function that accepts the callback, then you just pass the function you want to use as the callback like any other variable or literal.

If you want to write a function that uses a callback, then it essentially boils down to:

function accepts_callback(callback) {
    callback();
}
function a_callback() {
    alert("This is a callback");
}
accepts_callback(a_callback);

you can't just say .click( function_name() )

Putting () after a function will call it. Don't include them as you can pass it.

Why will this script alert first five,

The first thing you do, other then declare functions, is make a function call: var alert_five = alert_five();

then two

$('#two').click( alert('two') ); //this will alert two right away, because...?

You are calling alert here

//it wont do anything else on click

The return value of alert will always be undefined, which isn't a function

then three on startup?

$('#three').click( alert_three() ); //this will alert three right away, because...?

You are calling the alert_three function immediately.

//it wont do anything else on click

alert_three has no return statement, so it returns undefined, which isn't a function

Why will only buttons 1, 4, 6, and 7 work correcty?

The are the only ones for which you give a function as the argument to click().