//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 = exampleFunction;

setTimeout( exampleFunction, 1000);

The reference will not work unless the function is defined.

Functions should almost always be defined outside of 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 inputResults = function () {
        //...grab the input
        return input
    }

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

    var outputResults = function ( results ) {
        document.getElementById('outputID').innerHTML = results;
    }   
}

Functions work best when defined one after another. Style-wise, I will typically list my function definitions in this order:
init → main → input → process → output

This example will work: definition call reference

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

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

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

var outputResults = function ( results ) {
    document.getElementById('outputID').innerHTML = 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    = ;