//PROCESS: Functional Programming

<New code>

//PROCESS: var someFunction = function ( parameterVariableIn ) { return answerVariableOut }
— creates a function that takes in information, processes it, and spits out the result

Functions that give and take

Every function has the ability to take information in, and then return information out: 

//PROCESS: accept a number, and return the square of it
var getSquare = function( inputNumber ) {
    console.log( 'in getSquare. inputNumber=' + inputNumber );
    
    //PROCESS: calculate the square of the number used as the parameter
    var answer = inputNumber * inputNumber;
    
    //PROCESS: send out the answer back to the ORIGINAL function call
    return answer;
    }

In this example, inputNumber is called getSquare's argument. An argument is the information sent into a function. Another word for argument argument is parameter.

In this example, answer is returned. This means that the function will finish and give back whatever information was inside answer.

So now you can make code like this:

var square =getSquare(16); // makes square equal to 256

Check your understanding

What is inside square in the following example:
var square = getSquare( 2 );

What is inside square in the following example:
var square = getSquare( 4 );

What is inside square in the following example:
var square = getSquare( 2 * 4 );

Creating functions with more than one parameter

Let's say that I want to create function that calculates the volume of a cylinder.

We know that when calculating the volume of a cylinder the equation is:

V = π r2 h

In this case, we could pass two arguments, radius and height, to a function like this: 

//PROCESS: accept radius and height and return the volume
            var calculateVolume = function ( radius, height ) {
                var volume  = Math.PI * radius * radius * height;   // calculate the volume
                return volume;                      // spit the answer out
            }

Check your understanding

What does the following code do?

var mysteryFunction = function ( edge ) {
	var answer  =Math.pow( edge, 3 ) / ( 6 *  Math.sqrt( 2 ) );   
	return answer;
}

Learn more

For example

...is created with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Calculate the volume of a cylinder</title>
        <meta 
            name="description" 
            content="This program calculates the volume of a cylinder">
        <meta 
            name="author" 
            content="Dave Drapak">
        <!--
            Change log: 
                12. Oct         - created!                                      - Drapak
                25. March 2017  - reworked for improved programming style       - Drapak
                21. Oct 2018    - reworked for clarity and improved style       - Drapak
            -->
        <style>
            #outputId {
                color:          darkRed;
                font-weight:    bold;
            }
        </style>
    </head>

    <body>
        <h1>Volume of a sphere</h1>
        <p>
            Enter the radius of the sphere:
            <input id="inputId" type="text" value="10"><br>
            
            <button id="buttonId">Calculate!</button><br>
            The volume is <span id="outputId">Waiting for input...</span>
        </p>

        <script>
            var mainProcedure = function() {
                console.log( 'in mainProcedure...' );
                
                var radius  = getRadius();
                var volume  = calculateVolume( radius );
                outputVolume( volume );
            }
            
            //INPUT: read in text input from #radiusId
            var getRadius = function () {
                console.log( 'in getRadius...' );
                
                return document.querySelector( '#inputId ').value;
            }

            
            //PROCESS: calculate and return the volume of a sphere given a radius
            var calculateVolume = function ( radius ) {
                console.log( 'in calculateVolume, radius=' + radius );
                
                //PROCESS: convert the radius from a string to a number
                radius  = parseFloat( radius );     

                //PROCESS: calculate the volume = 4/3 x pi x r ^ 3
                var answer  = 4 / 3 * Math.PI * Math.pow( radius, 3 );
                
                //PROCESS: send the answer out out of the function
                return answer;                      
            }
            
            //OUTPUT: display the answer inside #outputId
            var outputVolume = function ( volume ) {
                console.log ( 'in outputVolume, volume='  + volume );
                
                document.querySelector( '#outputId' ).innerHTML = volume;
            }
            
            //INPUT: make clicking the button or changing the numbers trigger mainProcedure
            document.querySelector( '#inputId' ).onchange   = mainProcedure;
            document.querySelector( '#buttonId' ).onclick   = mainProcedure;
        </script>
    </body>
</html>