Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 5 Introduction to Modularization Using Functions

# Introduction to Modularization Using Functions

#### File: /Learning Plan 5/introToModularization.html

### 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's a Planning Lists from an example:

    The List of Input Variables:
        character1
        character2
        character3

    The List of Output Variables:
        character1
        character2
        character3

    The Process Checklist:
        prompt for characters
        accept three characters into variables
        sort three characters
        output three characters

- By identifying the processes we are able to start designing a program.
- But, what if a process has a lot of steps? What if it's so big a process that it really has its own set of processes?
- We have to break our processes down to smaller and smaller parts until they are all manageable. Each process or subprocess will have its own algorithm, and its own code. In JavaScript we will first do this with `functions`.

mod•u•lar
adjective
1. employing or involving a module or modules as the basis of design or construction : modular housing units.

### The Modularization Process

- Here are the general principles about modules or functions.
  - A module should be focused on a task, one task. It should include only the operations that do that task. Modules are specialists.
  - The name of a module should describe the work that the module will do. Try to start the name with a verb and then have a few nouns (and an adjective is often good too.) Examples:
    - `printPageHeadings`
    - `calculateSalesTax`
    - `validateInputDate`

## The Mainline or Controller Module

- All programs will have one module 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 called Controllers.
- `Controllers` 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 "mainline" and "controller" are just terms for the same thing. In these learning materials, both terms will be used interchangeably.

### The Benefits of Modular Design

- Ease of understanding. Each module should perform just one task.
- Reusable code. Modules used in one program can 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 with the program. This lets us make future changes to your 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.

### JavaScript Functions

- When our algorithms are ready and we write our applications in JavaScript, our modules will be `functions`.
- As we started to see in unit 4, our functions will be in external files. So far we have had just one function in a file. In actual use we have lots of functions in a JavaScript file.
- Here's a simple function.
- Here's a bigger picture with some finer details.

### How Functions Work

- Here's a sample to illustrate how functions work in JavaScript. Here's the code:

- Here's the output:

- Does something seem odd to you? Do the functions look like they are in the right order? Well, they are. A new and strong convention among professional JavaScript programmers is that functions should be declared before they are called. This is in our newly updated course coding standards right here.

- How did that work?
- The program starts in `theMainline()` function. When it gets to this line it does something different.
- Because of the parentheses, `()`, it will look for a function with that name. It first looks in the file that it is in right now. And there it is!
- 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.
- Let's see this in action:
  - Function Calls
- Of course, now we do a lab!
  - 5.3 Lab 1

### A First Look at Variable Scope

scope
noun
1. the extent of the area or subject matter that something deals with or to which it is relevant.
: we widened the scope of our investigation | such questions go well beyond the scope of this book.
Thesaurus:
the scope of the investigation, EXTENT, range, breadth, width, reach, sweep, purview, span, horizon; area, sphere, field, realm, compass, orbit, ambit, terms/field of reference, jurisdiction; confine, limit; gamut.

#### Naming Conflicts

- It's hard to come up with good variables names for your projects. Having clear, well thought-out names is crucial for the long-term success of an application.
- In the early days of computer programming two limitations made naming very hard. First, the maximum length of a variable name was very small, six or eight character limits were typical. Then, when we made a variable we had to make sure that the names we picked were not the same as any other names in programs at our site.
- This resulted in variable names like these. The first three letters were an abbreviation for the overall system and the rest were an abbreviation of what it was. Can you see what they are?
  - `TCSTLTAX`
  - `MMSTRSRC`
  - `CDPPNAME`
- All this because programs could see all the variables!

#### Variable Scope to the Rescue!

- There is a solution to this in all modern languages. Today there is more than one scope for variables. Let's first talk about the scope where variables are available everywhere.
- Global Scope
  - Variables that exist throughout a JavaScript file are called `Global Variables`. Their values can be changed anywhere in the code and even by other functions.
- Here's a demo of how this works
  - Global Scope Demo
- And here's the lab for this.
  - 5.3 Lab 2

### The Steps in Modularization

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

1. Define the 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 thinking of the processes as modules.
2. 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.
3. Establish the logic of the main controlling module in pseudocode. This module 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.
4. Develop the pseudocode for each successive module in the main controlling module.

#### Large applications can have lots of modules and functions. A common pattern of modules is:

1. An initial processing module containing the steps to be performed at the beginning of the algorithm, before any looping.
2. A processing module with a loop that contains all the steps necessary to process one record or piece of data.
3. A final processing module containing the steps to be performed at the end of the algorithm, after looping has finished.

#### Let's See The Whole Process in Action

- When our algorithms start getting too big we need to make some changes. This example goes through the process of modularization right through the JavaScript
  - Example 5: Process Three Characters - Two and Four Functions

#### Let's go through the steps one more time.

- Example 6: Gas Supply Billing