//STYLE: Using function pipelines

<New code>

//PROCESS: var someFunction = (somethingIn) { return somethingOut }
— 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:

  1. //INIT:
  2. //INPUT:
  3. //PROCESS:
  4. //OUTPUT:

So what is the difference between these?

  1. Initialization: set up things, initialize and declare the variables
  2. Input: read or detect something
  3. Process: do something to the thing you read
  4. Output: communicate some kind of result

Which one is which?

Look at the examples below, and determine whether they are initialization, input, process, or output:

  1. Reading a click with
    document.getElementById('buttonID').onclick = mainProcedure;:

  2. Moving things with
    $('#animateID').animate();:

  3. Defining acceleration due to gravity:
    var ACCEL_DUE_TO_GRAVITY = -9.8;:

  4. Changing a color:
    document.getElementById('outputID').style.color = 'red';:

  5. Adding 30 to the current position:
    var newTopPos = currentTopPos + 30;:

  6. Reading a text area:
    var newText = document.getElementById('textareaID').value;:

  7. Deciding if someone if old enough to vote:
    if ( age > 17 ) { youCanVote() }:

  8. Setting a the jump distance:
    var JUMP_DISTANCE = 20;:

  9. Calculating radians, given the degree:
    var radians = degrees * Math.PI / 180;:

The old way to do things: sequential 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.getElementById('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.getElementById('outputID').innerHTML   = radians;
            }
            
            //INPUT: trigger mainProcedure when the button is clicked
            document.getElementById('buttonID').onclick = 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.

Creating function pipelines

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>
            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: read the number of degrees entered and returns it
            var readDegrees = function () {
                console.log('in readDegrees...');
                return document.getElementById('inputID').value;
            }
            
            //PROCESS: accepts degrees and returns the equivalent in radians
            var convertToRadians = function ( degrees ) {
                console.log('in convertToRadians...');
                degrees     = parseFloat(degrees);      // first convert string to number
                var radians = degrees * Math.PI / 180;  // then do the trigonometry
                return radians;                         // and return the answer    
            }

            //OUTPUT: accepts the radians and outputs it inside #outputID
            var outputRadians = function ( radians ) {
                console.log('in outputRadians...');
                document.getElementById('outputID').innerHTML   =radians;
            }
            
            //INPUT: trigger mainProcedure when the button is clicked or the number changed
            document.getElementById('buttonID').onclick = mainProcedure;
            document.getElementById('inputID').onchange = mainProcedure;
        </script>
    </body>
</html>

Using function pipelines 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().