<New code>
//PROCESS:
var someFunction = ( inputParameter ) {
return outputInformation }
— creates a function that takes in information,
processes it, and spits out the result
Taking in the input, pushing out the output
We've been making a lot of programs. You will notice that in the examples, there will often be comments that will start with:
- //INIT:
- //INPUT:
- //PROCESS:
- //OUTPUT:
So what is the difference between these?
- Initialization: set up things, initialize and declare the variables
- Input: read or detect something
- Process: change or manipulate something
- Output: communicate or display something
Which one is which?
Look at the examples below, and determine whether they are initialization, input, process, or output:
-
Reading a click with
document.querySelector( '#buttonId' ).onclick = mainProcedure;:
-
Moving things with
$( '#animateId' ).animate();:
-
Defining acceleration due to gravity:
const ACCEL_DUE_TO_GRAVITY = -9.8;:
-
Changing a color:
document.querySelector( '#outputId' ).style.color = 'red';:
-
Adding 30 to the current position:
var newTopPos = currentTopPos + 30;:
-
Reading a text area:
var newText = document.querySelector( '#textareaId' ).value;:
-
Deciding if someone if old enough to vote:
if ( age > 17 ) { youCanVote() }:
-
Setting a the jump distance:
const JUMP_DISTANCE = 20;:
-
Calculating radians, given the degree:
var radians = degrees * Math.PI / 180;:
The old way to do things: sequential or declarative programming
So far we have been creating our programs as a bunch of commands in a line. We have been using init, input, process, and output commands, but we have been using them all in a row, one following another. This is a good way to start for beginners.
Take a look a the following code that converts degrees to radians:
Enter the degrees:
The answer in radians is:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convert degrees to radians</title>
<meta name="description" content="Convert degrees to radians in Javascript">
</head>
<body>
<p>
Enter the degrees:
<input id="inputId" type="text"></input>
<button id="buttonId">Click to convert!</button>
</p>
<p>
The answer in radians is:
<span id="outputId"></span>
</p>
<script>
var mainProcedure = function () {
console.log( 'in mainProcedure...' );
//INPUT: read the number of degrees entered
var degrees = document.querySelector( '#inputId' ).value;
//PROCESS: convert degrees from a string to a number if needed
degrees = parseFloat(degrees);
//PROCESS: calculate the radians
var radians = degrees * Math.PI / 180;
//OUTPUT: display the radians
document.querySelector( '#outputId' ).innerHTML = radians;
}
//INPUT: trigger mainProcedure when the button is clicked or the input changes
document.querySelector( '#buttonId' ).onclick = mainProcedure;
document.querySelector( '#inputId' ).onchange = mainProcedure;
</script>
</body>
</html>This is a good structure, and it works for small programs. But our programs are about to get bigger. Big programs can be hard to understand unless you develop great style.
Functional programming means making a pipeline from input to process to output
When programs get big, it is best to break them into smaller chunks. This often means dividing them into separate initialization, input, process, and output functions.
There are certain advantages to doing this. One is that it is easier to write and adapt code for different computing platforms. Often transporting your code to a different environment means changing how input and output works, but it usually leaves the initialization and process parts alone. It also helps you break down you code into manageable, doable chunks.
In the degrees to radians converter, the problem is broken down as follows. Notice that the data flows in a pipeline: INPUT → PROCESS → OUTPUT.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convert degrees to radians</title>
<meta name="description" content="Convert degrees to radians in Javascript">
</head>
<body>
<p>
Enter the degrees:
<input id="inputId" type="text"></input>
<button id="buttonId">Click to convert!</button>
</p>
<p>
The answer in radians is:
<span id="outputId"></span>
</p>
<script>
//OUTPUT: accepts the radians and outputs it inside #outputId
var outputRadians = function ( radians ) {
console.log( 'in outputRadians, radians=' + radians );
document.querySelector( '#outputId' ).innerHTML = radians;
}
//PROCESS: accepts degrees and returns the equivalent in radians
var convertToRadians = function ( degrees ) {
console.log( 'in convertToRadians, degrees=' + degrees );
//PROCESS: convert the input string to a number
degrees = parseFloat( degrees );
//PROCESS: do the trigonometry
var radians = degrees * Math.PI / 180;
//OUTPUT: send the answer out of the function
return radians;
}
//INPUT: read the input line and return it
var readDegrees = function () {
console.log( 'in readDegrees...' );
return document.querySelector( '#inputId' ).value;
}
//MAIN:
var mainProcedure = function () {
console.log( 'in mainProcedure...' );
var degrees = readDegrees(); //INPUT
var radians = convertToRadians( degrees ); //PROCESS
outputRadians( radians ); //OUTPUT
// the following code is the same as the lines above:
// outputRadians( convertToRadians ( readDegrees ) );
}
//INPUT: trigger mainProcedure when the button is clicked or the number changed
document.querySelector( '#buttonId' ).onclick = mainProcedure;
document.querySelector( '#inputId' ).onchange = mainProcedure;
</script>
</body>
</html>Functional programming is good style
Notice the following about different kinds of functions:
- //INPUT functions
- never have an argument, but always return something
- //PROCESS functions
- always have one or more arguments, and always return something
- //OUTPUT functions
- always have one or more arguments, never return anything
From now on, you will be using function pipelines to create your programs.
This means that you will divide your code into //INIT, //INPUT, //PROCESS, and //OUTPUT functions.
All of these functions will pipe to each other inside other master functions, for example, mainProcedure().