How to Modularize JavaScript Functions

Published: September 24, 2011
Last Updated: October 30, 2011

Some previous hubs detailing various aspects of JavaScript included code that took up a fair amount of space. Is this a bad thing? Not necessarily, however, long code is prone to mistakes and does not provide the programmer with a means to easily reuse his code.

This is where the concept of modularization comes into play. Many large functions or processes may be broken down into smaller components or modules. These modules are then easier to troubleshoot and also provide the programmer the ability to use those modules in other programs, as long as some simple guidelines are followed.

We will use the How to Validate Data Using JavaScript hub for an example of how to modularize.

JavaScript: The HTML Stimulant
JavaScript: The HTML Stimulant

The code contained in this hub actually contains examples of modularization but to demonstrate the concept we will examine a version of validation code without modularization. The code depicted below contains quite a bit of redundancy. By that, the author means that the programming code repeats certain structures over and over.

Let's take a look:

<script type="text/javascript">
  functtion validate() {
    var goodData=true;
    var testData=document.contactForm.fname.value;
    if (testData==null || testData=="") {
      alert("Please enter your First Name!");
      goodData = false;
    }
    else {
      if (testData.length>25) {
       alert("The field must be no more than 25 characters!");
       goodData=false;
    }
    else {
      testData=document.contactForm.lname.value;
      if (testData==null || testData=="") {
        alert("Please enter your last name!");
        goodData = false;
      }
    }
    else {
      if (testData.length>25) {
       alert("The field must be no more than 25 characters!");
       goodData=false;
      }
    }
    else {
      testData=document.contactForm.email.value;
      if (testData==null || testData=="") {
        alert("Please enter your e-mail address!");
        goodData = false;
      }
    }
    else 
      if (testData.length>25) {
       alert("The field must be no more than 25 characters!");
       goodData=false;
    }
    return goodData;
  }
</script>

You may notice that this bit of code is fairly long when you consider the amount of functionality added to the program; the above script is 41-lines long. Although validating data is an important function, there must be a simpler method to perform the task. Modularization provides the solution to our dilemma.

To modularize the validation routine, we will write a function for each of the validation methods, which are to check for the presence of data and the maximum size of the fields. The methods in the above code are then replaced with function calls to each of the routines using the appropriate parameters to check the appropriate fields. A parameter is a value that the function receives from the calling routine. The calling routine passes these values to the functions using arguments in the function-call.

We specify arguments in the function call by placing entities within the parentheses in the call statement. Likewise, the parameters received by the function are included in the parentheses in the function definition.

<script type="text/javascript">
  functtion validate() {
    var goodData=true;
    var testData=document.contactForm.fname.value;
    goodData=dataNotNull(testData);
    if (goodData)
      goodData=dataNotToLong(testData);
    if (goodData) {
      testData=document.contactForm.lname.value;
      goodData=dataNotNull(testData);
    }
    if (goodData)
      goodData=dataNotToLong(testData);
    if (goodData) {
      testData=document.contactForm.email.value;
      goodData=dataNotNull(testData);
    }
    if (goodData)
      goodData=dataNotToLong(testData);
    return goodData;
  }
</script>

Notice the five if statements in the above code. These statements base actions on the value of a variable called goodData. This variable is a Boolean or true/false variable, which may hold one of only two values. The function validate() begins by setting the goodData variable to true, then each of the if statements test the value of goodData to see if the value remains true. If the value changes at any time during the validation tests then the data failed a test and the validate() function will return a false value to the calling routine.

The goodData variable uses the functions dataNotNull() and dataNotToLong() to perform the validation tests. Therefore, the goodData variable acts as the entity and the validate() function is the calling function. these statements replace the tests in the original example code.

You may also notice that the function calls to the dataNotNull(testData) and dataNotToLong(testData) functions include the testData variable within the parentheses of the function calls. This variable acts as the argument for the function calls and the parameter for the functions themselves.

We will now take a look at the dataNotNull() function:

function dataNotNull(testData) {
  if (testData==null || testData=="") {
    alert("Please make a non-blank entry!")
    var goodData = false;
  }
  return goodData;
}

The dataNotNull() function receives a parameter from the calling function that passes the data to undergo the test. For this routine the data is called testData. The test simply checks the passed variable to make sure that the variable in fact contains data. If the variable contains no data then this module displays a message that alerts the user that the variable contains no data.

the alert statement provides a system call to display the message in an alert box. This removes the task of coding the statements necessary to actually display a message on the screen from the programmer; the system takes care of that function.

If the variable contains a null value (garbage in the variable location) or is filled with spaces then the function sets the value of goodData to false before returning control to the calling module. If the variable contains a valid data entry then this function leaves the goodData variable untouched and simply returns control.

The final data test in our example is the dataNotToLong() function. We finally take a look at that code:

function dataNotToLong(testData){
  if (testData.length>25) {
    alert("The field must be no more than 25 characters!");
    var goodData=false;
  }
  return goodData;
}

The dataNotToLong function simply tests the data to verify that the data is no longer than 25 characters. The form used in the example specified text-box lengths of 25 characters so this function validates that length to prevent buffer overflows. The module operates in a similar manner as the dataNotNull() function in the manner that the function provides results for the test and how the function signals a success or failure condition.

Although creating the functions only shortened the length of the sample code by four lines, more variable could be tested if added to the form without re-writing the test code. These modules promote re-usability so they could be used in other areas of this or another program.

Was this hub useful?

The author appreciates all comments.

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working