I sometimes hear people rant about JavaScript and how it’s not a modern language with modern constructs. When comes to Object Orientation, you can write Object “Oriented” code in any language. We wrote Objected Oriented code in straight “C” 20 years ago. Though the language didn’t natively support advanced OO constructs.

JavaScript a script programming language with its own idea about Object Orientation.

While JavaScript’s current implementation does not support function overloading, we can simulate it using the loose type system included in JavaScript.

We can create a single function definition and then branch base don the different calling signatures of the function.

Here is a complete sample page that implements a JavaScript function that is “pseudo overloaded” with five different calling signatures.

[sourcecode language=”JavaScript” htmlscript=”true”]

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function DoProcess(opmode, clock, args) {
//——————————————————————+
// 1.) We can simulate function overloading by selectivly passing |
// or not passing parameters. |
//——————————————————————+
// Since JavaScript is "loosly" typed, function parameters are |
// optional. An parameter that is specified by not recieved |
// will be undefined. (myArgumant == null). |
//——————————————————————+
if(opmode == null) {
alert("NO OPMODE Recieved");
}

//——————————————————————+
// 2.) We can simulate function overloading by selectivly passing |
// DIFFERENT TYPES in the same parameter position. |
//——————————————————————+
// AT this point we know we recieved SOME argument in the |
// first position. We can test the TYPE and execute differnt |
// code depending on what TYPE of parameter we recieved. |
//——————————————————————+
else if (typeof opmode == "number" ) {
alert("Revieved NUMERIC opmode, value : " + opmode);
}
else if (typeof opmode == "string" ) {
alert("Recieved a STRING opmode, value : " + opmode);
}

//——————————————————————+
// 3.) We can simulate function overloading by passing a variable |
// NUMBER of arguments. |
//——————————————————————+
// In our function definition we can define as many function |
// parameters as we like and then when callign our function we |
// can choose to pass none, some, or all of them. Parameters |
// that are not passed in teh function call will evaluate |
// inside the function as undefined and we can decide what code |
// to execute based on that evaluation. |
//——————————————————————+
if (opmode != null) {
if ( clock == null) {
alert("OPMODE Recieved BUT NO CLOCK ARGUMENT");
}
}

//——————————————————————+
// 4.) We can simulate function overloading by selectivly passing |
// DIFFERENT SIZE ARRAYS in a parameter position. |
//——————————————————————+
// In the same way we tested for TYPE above we can test that a |
// parameter is an array. In addition to logic branching on |
// the type of a parameter, we can pass a variable number of |
// items in an array. Note instanceof has issues working |
// across frames / iframes |
//——————————————————————+

if (args != null) {
if (args instanceof Array) {
switch(args.length) {
case 3:
alert("Recieved an Array: 3rd item = " + args[2]);
break;
case 6:
alert("Recieved an Array: 6th item = " + args[5]);
break;
default:
alert("Recieved an Array but length is invalid");
break;
}
}
}

//——————————————————————+
// 5.) We can simulate function overloading by selectivly passing |
// a NAME/VALUE PAIR COLLECTION in a parameter position. |
//——————————————————————+
// In the above example we tested to see if the parameter was |
// an instance of teh Array type. |
// In this case we check to see if we have a parameter that is |
// an instance of the JavaScript Object type but NOT an array |
// we know it’s a name/vause pair collection. Note that |
// objects CAN be other subtypes (not only arrays) so our code |
// needs to know about all the object types that we test for. |
//——————————————————————+
if (args != null) {
if ((args instanceof Object == true) &&
(args instanceof Array == false)) {
alert("Recieved a collection in the args parameter.");
alert("Values = [Work : " + args.Work +
"] and [Intensity : " + args.Intensity + "]");
}
}

}
</script>
</head>
<body>
<br /><br />
<center>
<h3>Test Simulated Function Overloading in JavaScript</h3><br />
<input type="button" value="Pass NO Arguments"
onclick="DoProcess()" /><br /><br />
<input type="button" value="Pass a numeric argument"
onclick="DoProcess(999)" /><br /><br />
<input type="button" value="Pass a String Argument"
onclick="DoProcess(‘Im a STRING’, 1)" /><br /><br />
<input type="button" value="Pass a 3 item Array"
onclick=’DoProcess(777, 1, [5, 6, 7])’ /><br /><br />
<input type="button" value="Pass a 6 item Array"
onclick=’DoProcess(777, 1, [33, 66, 77, 88, 99, 100])’ /><br /><br />
<input type="button" value="Pass a collection"
onclick=’DoProcess(888, 1, {"Work":"3:00", "Intensity":"Maximum"})’ />
<br /><br />
</center>
</body>
</html>

[/sourcecode]