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.
<!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>
Filed under:
jQuery / JavaScript
I love articles like these. Showing people how to do things in JavaScript!
null and undefined in JavaScript are two separate concepts. In your example, the arguments not passed in will be null but not undefined. If you use the normal equality operator, e.g. opmode == null; opmode == undefined, both expressions will return true. However if you use the identity operator, e.g. opmode === null; opmode === undefined, only opmode === null will return true.
Also, the || operator is short circuited. So you can use it to assign default values to optional parameters in your JS functions.
http://www.lazycoder.com/weblog/2008/02/26/modern-javascript-development-constructors-and-objects/
You can program badly or well in any language. Like you I’ve done OO style, however its harder and so its rarely done. I think JavaScript is a bit the same way (although vastly better than ‘C’).
Cheers
Mark Levison