How to Create Custom Functions with Optional and Required Arguments in JavaScript

All arguments for a JavaScript function are optional. In fact, the caller can send as many arguments as desired to program with HTML. Of course, if you’re expecting only one argument, then you’ll process only one argument in most cases. Unfortunately, you might be expecting at least one argument and may not receive any at all.

In short, you need some method of dealing with arguments in JavaScript that helps you account for what the caller may or may not send. The following example demonstrates some techniques for working with optional arguments:

function OptionalArgument(param)
  // Determine whether there were any params passed.
  if (typeof(param) == "undefined")
   param = "Hello There!";
  // Determine whether there are extra params.
  if (typeof(arguments[1]) != "undefined")
   // If so, output the param and optional
   // argument onscreen.
   document.getElementById("Result").innerHTML =
     "The param is: " + param +
     " and the optional argument is: " + arguments[1];
   // Output the param onscreen.
   document.getElementById("Result").innerHTML =
     "The param is: " + param;

This function requires one argument as input. Of course, the caller might not provide a value for param, which means that param is undefined. You can check for that issue by using the typeof operator. Notice that when param is undefined, the code assigns it a default value. This is the correct way to handle optional named arguments.

JavaScript also provides a special arguments variable. It’s an array that contains one element for each argument passed to the function. When someone passes more arguments than you anticipated or your function can accept a variable number of arguments, you can use the arguments variable to work with them.

In this case, when the caller passes an additional argument — one not accounted for by param — the application can still display its value onscreen by using a different message from the message it displays when a caller passes zero or one arguments. Normally you use loops to process a variable number of arguments.

Sometimes you really do want one and only one parameter. It’s a waste of time to complain about too many arguments in most cases, but you can definitely do something about not getting what you need. The following example tests for a specific kind of input to ensure it has what it needs:

function RequiredArgument(param)
  // Determine whether there were any params passed.
  if (typeof(param) != "string")
   // If not, return to the caller without doing
   // anything.
  // If so, then display the value onscreen.
   document.getElementById("Result").innerHTML =
     "The param is: " + param;

In this case, the code checks for a string. When the caller passes something other than a string, the code simply returns without doing anything. Of course, you could pass back a value indicating an error or even display an alert() onscreen.

How you react to the error is up to you, but you need to keep the single task nature of functions in mind when deciding on a reaction. In this case, doing nothing is the best choice. When the caller does pass a string, the function displays it onscreen.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus