//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
}``````

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``

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
}``````

What does the following code do?

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

## For example

...is created with the following code:

``````<!doctype html>
<html lang="en">
<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>

<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 volume  = calculateVolume( radius );
outputVolume( volume );
}

var getRadius = function () {

return document.querySelector( '#inputId ').value;
}

//PROCESS: calculate and return the volume of a sphere given a radius
var calculateVolume = function ( radius ) {

//PROCESS: convert the radius from a string to a number

//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
}

//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>``````