ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Modularize JavaScript Functions

Updated on October 30, 2011

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.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)