Introduction to Modularization Using Functions

Getting Complicated

When we have too much information, too many files, too many things, we humans tend to organize them.

We've been doing it for a long time

Computers let us handle more information but we still need to have a way to keep track of it all.

We have many schemes for doing this

We even do it with us!

And we also have to organize software. Our programs just get too big.

The thing that we have too much of in programming is complexity. We'll start learning how to program more complex problems by learning about Modularization and Functions.

---

Modularization

The process is to break up our code into different parts. We've already been doing that. Here are Planning Lists from an example back when the program was just one block of code:

The List of Input Data:
    character1
    character2
    character3

The List of Output Data:
    character1
    character2
    character3

The Process Checklist:
    Define all variable
    prompt user for three individual characters
    Sort the three characters into ascending order
    Output three characters in ascending order

• For Learning Units 1 - 3, we identified sections of our code by using the Process Checklist.

• But, what if a program is so complex that it would have a lot of processing steps? What if it's so big that it really has its own set of sub-processes? That would be difficult to manage, and later, modify, if it was written as just one large program.

• The solution is to break our programs down to smaller and smaller parts until they are all manageable. Each process or subprocess will have its own set of processing steps, and, when written later, its own program code. In JavaScript we will do this with multiple functions. "

---

The Modularization Process

Here are the general principles about methods or functions.

• A method (in JavaScript, remember this is a  function) should be focused on a task, that is, just one task.  It should include only the operations that are necessary to do that task. Methods are like specialists.

• The name of a method (function) should describe the work that the method will do. Always start the name of a function with a verb and then have a few nouns (and an adjective is often good too.) Examples:

  • printPageHeadings
  • calculateSalesTax
  • validateInputDate

---

The Controller Method (Function)

• All programs will have one method (function) that controls the operation of the whole program. These were typically called the Mainline Module in the beginnings of modular programming. These days in our Object Oriented world they are more likely called Main functions or Controllers.

• Main functions or Controllers run the show. They tie all the other methods together. They should be easy to read and their logic should be very clear. We'll see many examples. Just remember that the terms "main" and "controller" are just terms for the same thing--different authors simply use different terms. In these learning materials, these terms will be used interchangeably.

---

The Benefits of Modular Design

• Ease of understanding. Each method (function) should perform just one task.

• Reusable code. Functions used in one program can sometimes also be used in other programs.

• Don't Repeat Yourself! Using functions can help to avoid code duplication. This is called the "DRY" principle and is a very strong convention among modern programmers.

• Efficiency of Maintenance. Each function should be self-contained and have little or no effect on other functions within the program. This lets us make future changes to programs in less time and with less worry that we are adding new bugs to the code.

• Object Orientation. Modularization is a big step towards Object Orientation. You could think of OO as modularization taken to a higher level. All modern programming languages and methodologies now use this new paradigm.

---

How it Works

Take a look at the program below, which has two functions.

Does something seem odd to you? Do the functions look like they are in the right order? Well, they are.

New Coding Standard

Function Declarations

Refer to the coding standards for rules and best practices regarding functions

/*
  This function is being called by the
  the controller function below.
*/
function justCallMe () {
    "use strict";

    // Declare variables
    let firstName;
    firstName = "Ethel";

    document.write("Hello, " + firstName + ".<br />");
}

/*
  This function will run some code,
  call a function and let the function run
  its code and then run some more code.
*/
function theController() {
    "use strict";

    // Declare variables
    let firstName;

    firstName = "Fred";

    document.write("Hello, " + firstName + ".<br />");

    //Here's the function call!
    justCallMe();

    document.write("All done!");
}

Demo: Function calls

Demo

1. Demo: Function calls
   • unit04/demos/demo-function-calls.html

What happened?

The program starts with the theController() function, which we can assume is being called from the HTML page. When it gets to this line, it does something different.

//Here's the function call!
justCallMe();

Because of the parentheses, (), JavaScript will look for a function with that name. It first looks in the file that it is in right now. And there it is!

function justCallMe () {
    "use strict";

    // Declare variables
    let firstName;

    firstName = "Ethel";

    document.write("Hello, " + firstName + ".<br />");
}

The JavaScript engine will suspend the first function and jump to the called function. It will run all the code in that function and go back up to the first one. Then it will continue on where it left off.

Labs

Labs

1. Lab09: Calling Functions in JavaScript
   • unit04/labs/lab-09-calling-functions.html

---

The Steps in Modularization

Here are some basic steps in the process of modularizing an application.

1. Define the overall problem by dividing it into its three components: input, output, and processing. This is what we have already been doing. The only difference is that we are now typically thinking of the processes as methods (functions).

2. Group the processes into subtasks or functions to determine the method that will make up the program. Remember that a function is dedicated to the performance of a single task. Not all activities need to be identified at this point. We may add more subtasks as we develop the functions later.

3. Establish the logic of the main controlling method (function) using pseudo-code. Typically, this top method (function) should contain some initial processing before the loop, some processing within the loop, and some final processing after exiting the loop. It should contain calls to the major processing functions of the program, and should be easy to read and understand. (Note: Physically this top function is placed as the last function in the JavaScript file, even though on a structure chart is drawn at the top of the chart.)

4. Develop the pseudo-code for each successive function in the main controlling method.

---

Read more

Related Reading

Pages 23 - 30 — Remember this back in Unit 1? It might not have made a whole bunch of sense then. Now's a good time to re-read this.

More demos

Demos

1. Demo: Process Three Characters - Two and Four Functions
   • unit04/demos/demo-three-characters.html
2. Demo: Gas Supply Billing
   • unit04/demos/gas-billing.html