//PROCESS: Functions: Definition, call, or reference?

Three ways to use functions - but what is the difference?

For the examples on this page, we will be using the following colour code: definition call reference

Function definition
This is the code that defines a function.
var exampleFunction = function () {}
The code inside the function will not run until the function is called.
Function call
This tells the program to switch to running the code inside a function.
exampleFunction();
This will not work unless the function has already been defined.
Function reference
This is like a variable that contains all the code inside a function.
Function references are used in detecting events, timers, and intervals.
window.onkeydown = readKeypress;

document.querySelector( '#inputId' ).onchange = readInput;

document.querySelector( '#buttonId' ).onclick = mainProcedure;

document.querySelector( '#imageId' ).onmouseover = changeImage;

document.body.onload = mainProcedure;

setTimeout( startAnimation, 1000 );

The reference will not work unless the function is defined.

Function references: functions that are stored inside variables.

Have you noticed that we have been defining functions as variables?

That is because Javascript expects that all of the events such as onclick, onload, onkeypress, onmouseover, etc., will result in a function definition.

Separating the events from the function definition is useful for beginners, and so far we have been simply storing a function in a variable and then using that variable, a function reference, to put the function at the end of the event.

Now that you are more experienced, you are allowed to skip the function reference, and add the function definition right to the event. For example, this is now OK:

//  this adds the function definition directly to the onclick event

document.querySelector( '#buttonId' ).onclick = function () {
    alert( 'Hello!' );
}

// ...IS EXACTLY THE SAME AS THE OLD WAY...

//  create a variable that stores the function definition for mainProcedure
var mainProcedure = function () {
    alert( 'Hello!' );
}

//  attaching the function reference onto onclick is the same as adding the function directly
document.querySelector( '#buttonId' ).onclick = mainProcedure;

Functions should almost always be defined seperately from each other

A common mistake of beginners is to accidentally include the definitions of all the input/process/output functions inside mainProcedure.

For example, this code WILL NOT work:

var mainProcedure = function () {
    var input   = getInput();
    var results = calculateResults( input );
    outputResults( results );
    
    var getInput = function () {
        //...grab the input
        return input
    }

    var calculateResults = function ( input ) {
        //...make a calculation
        return results
    }

    var outputResults = function ( results ) {
        document.querySelector( '#outputId' ).innerHTML = results;
    }   
}

Functions work best when defined backwards, one after another. Style-wise, I will typically list my function definitions in this order:
initoutputprocessinputmain

This example WILL work: definition call reference

var outputResults = function ( results ) {
    document.querySelector( '#outputId' ).innerHTML = results;
}

var calculateResults = function ( input ) {
    //...make a calculation
    return results
}

var getInput = function () {
    //...grab the input
    return input
}

var mainProcedure = function () {
    var input   = getInput();
    var results = calculateResults( input );
    outputResults( results );
}

An example: Which kind of function do you put where?

Let's work from the bottom to the top. Colour codes: definition call reference

var mainProcedure = function ( keyEvent ) {
    console.log( 'in mainProcedure...' );
    var keyCode = readKeypress( keyEvent  );
    
}

//INPUT: read which key was pressed

    console.log( 'in readKeypress... keyEvent:' + keyEvent );
    return keyEvent.which || keyEvent.keyCode;
}

//PROCESS: fork the code if they pressed the up button
var getBiggerOrSmaller = function ( keyCode ) {
    console.log( 'in getBiggerOrSmaller... keyCode:' + keyCode );
    if ( keyCode == 85 ) {          // U button
        
    } else if ( keyCode == 68 ) {   // D button
        makeStarSmaller();
    }   
}

//OUTPUT: make the star bigger

    console.log( 'in makeStarBigger...' );
    $( '#imageId' ).animate( { width: "+=40px" } );   
}

//OUTPUT: make the star smaller
var makeStarSmaller = function () {
    console.log( 'in makeStarSmaller...' );
    $( '#imageId' ).animate( { width: "-=40px" } );
}

//INPUT: run mainProcedure when someone presses a key
window.onkeydown    = ;