Create reusable routines in JavaScript

Tired of rewriting everything? Here's how to build a component library for JavaScript and reuse common routines -- simply by cutting and pasting code

By Gordon Mccomb, JavaWorld.com, 02/01/97

Page 2 of 6

How routines are like JavaScript functions

Most of the plug-and-play routines you write will be functions that return a value of some type. As such, they behave very much like JavaScript's built-in functions, such as eval, parseInt, or escape. I'll use the JavaScript parseInt function as an example. It takes a string and "parses" it to a numeric value. The parseInt function has many uses and syntaxes, but the most common goes like this:

var Ret = parseInt ("12345");

As shown here, the parseInt function takes one parameter, which is a number string value. When JavaScript executes this function, it converts the string value to a number ("12345" becomes 12345). Thus, the value can be used in mathematical expressions. The returned value is stored in a variable named Ret.

Note: As with built-in JavaScript functions that return a variable, you can often use user-defined functions in complex expressions. For example, JavaScript lets you use the parseInt function in the following manner, because it forms a complex expression using an if statement:

StringValue = "12";
if (parseInt(StringValue) < 10)

The parseInt function returns the numeric value of the StringValue variable ("12"), and this is used in an "if" expression. The expression tests whether the numeric value 12 is less than the number 10.

Now consider a user-defined function -- say one that returns the length of a string. (We'll use this as an example because it's quick and easy to demonstrate, not because it's particularly useful.) The function is defined as:

function stringLength(InString) {
    var Temp = InString.length;
    return (Temp);
}

To use this function you provide an instruction elsewhere in your JavaScript program that refers to the function by name and provides the required parameter. For example, the following code displays "14" in an alert box; it's the length, in characters, of the string "This is a test."

var Ret;
var MyString = "This is a test";
Ret = stringLength(MyString);
alert(Ret);

Passing parameters to functions

It is quite common to create functions that use one or more parameters. Parameters work the same way with your own plug-and-play routines as they do with JavaScript functions and object methods. If you plan to use any of the reusable routines presented in this column, be sure to provide all the parameters specified in the appropriate order, or an error will result.

Parameters passed to a function are contained within parentheses and follow the name of the routine. If more than one parameter is used with a routine, the parameters are separated by a comma, which is JavaScript's syntactical standard. In almost all cases, you can include the actual value of the parameter you want the routine to use, as in:

var Ret = leftTrim("   This is a test");

Alternatively, you can assign the value you want to use for the parameter to a variable, and stick the variable name inside the parentheses, as shown:

var StrVar = "   This is a test";
var Ret = leftTrim(StrVar);

As with JavaScript functions and object methods, the reusable functions in this column, and the ones you will write for yourself, usually expect certain kinds of values at each parameter. One parameter may be a string value, another a number, the third an array, and the fourth an object. Be sure always to use the right kind of data or an error is likely to result.