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 modules or functions.
-
A module (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. Modules are like specialists. -
The name of a module (function) should describe the work that the module 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 Module (Function)¶
-
All programs will have one module (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 orControllers
run the show. They tie all the other modules 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 module (function) should perform just one task.
-
Reusable code. Modules used in one program can sometimes also be used in other programs.
-
Don't Repeat Yourself! Using modules 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 module should be self-contained and have little or no effect on other modules 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
Refer to the coding standards for rules and best practices regarding functions
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
Demo: Function calls¶
Demo
- 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.
1 2 |
|
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!
1 2 3 4 5 6 7 8 9 10 |
|
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
- 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.¶
-
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 modules (functions).
-
Group the processes into subtasks or functions to determine the modules that will make up the program. Remember that a module 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 modules later.
-
Establish the logic of the main controlling module (function) using pseudo-code. Typically, this top module (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 modules 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.)
-
Develop the pseudo-code for each successive module in the main controlling module.
More demos¶
Demos
- Demo: Process Three Characters - Two and Four Functions
- unit04/demos/demo-three-characters.html
- Demo: Gas Supply Billing
- unit04/demos/gas-billing.html