//PROCESS: Using function parameters and returns

<New code>

//PROCESS: var someFunction = (somethingIn) { return somethingOut }
— 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) {
	var answer =Math.pow(inputNumber, 2)
	return answer;
	}

In this example, inputNumber is called getSquare's argument. An argument is the information given to a function.

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


Volume of a cylinder

Enter the radius of the cylinder:
Enter the height of the cylinder:

The volume is


...is created with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>drapak.ca - Computer Programming 12: 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!
                25. March 2017  - reworked for improved programming style
            -->
        <style>
        </style>
    </head>

    <body>
        <h1>Volume of a cylinder</h1>
        <p>
            Enter the radius of the cylinder:
            <input id="radiusID" type="text" value="10"><br>
            
            Enter the height of the cylinder:
            <input id="heightID" type="text" value="10"><br>
            
            <button id="buttonID">Calculate!</button><br>
            The volume is <strong id="outputID"></strong>
        </p>

        <script>
            var mainProcedure = function() {
                console.log('in mainProcedure...');
                var radius  = getRadius();
                var height  = getHeight();
                var volume  = calculateVolume( radius, height );
                outputVolume( volume );
            }
            
            //INPUT: read in from #radiusID
            var getRadius = function () {
                console.log('in getRadius...');
                return document.getElementById('radiusID').value;
            }

            //INPUT: read in from #heightID
            var getHeight = function () {
                console.log('in getHeight...');
                return document.getElementById('heightID').value;
            }
            
            //PROCESS: accept radius and height and return the volume
            var calculateVolume = function ( radius, height ) {
                console.log('in calculateVolume...');
                radius  = parseFloat( radius );     // convert from string to number if needed
                height  = parseFloat( height );     // convert from string to number if needed
                var volume  = Math.PI * radius * radius * height;   // calculate the volume
                return volume;                      // spit the answer out
            }
            
            //OUTPUT: display the answer inside #outputID
            var outputVolume = function ( volume ) {
                document.getElementById('outputID').innerHTML   = volume;
            }
            
            //INPUT: make clicking the button or changing the numbers trigger mainProcedure
            document.getElementById('radiusID').onchange    = mainProcedure;
            document.getElementById('heightID').onchange    = mainProcedure;
            document.getElementById('buttonID').onclick     = mainProcedure;
        </script>
    </body>
</html>