In JavaScript, how can I create a function with an optional parameter?

user_269116 0
Viewed 39861

Question: What is the proper way to define a function in JavaScript that takes optional parameters?

For example:

function myFunc(optionVar1) {
    if(optionVar1 == undefined) {
        ...
    } else {
        ...
    }
}

myFunc('10');  // valid function call
myFunc();      // also a valid function call

Is it proper to use a ? mark like Ruby in the function declaration like so to denote optional parameters:

function myFunc(optionVar1?) {...}  //  <--- notice the ? mark
html javascript
12 Answers

There is no syntax in Javascript that specifies that a parameter is optional (or required). All parameters are optional. If they aren't specified they're undefined so you need to check for that. For example, this function will in effect create a default value of 10 for the parameter:

function myfunc(someParam) {
  if (someParam === undefined) {
    someParam = 10;
  }
  ...
}

Also you can access the parameters programmatically using the arguments property.

Lastly, if you have more than about 3-4 parameters it's generally advisable to use an anonymous object instead.

cletus_183930

Actually, all parameters are optional in JS functions. There is no warning or error if you omit a parameter.

You can set defaults like

function throw_cat(dist){
  dist = typeof dist=='undefined' ? 20 : dist;
   //OR
  dist = dist || 20; //this will assign it to 20 if you pass 0 or another 'falsy' value, though. May be good if you expect a string. String '0' stays, '' or null assigns the default
  //etc...
  }
jimmy_924480

First, everyone who writes JavaScript, do yourself a favor and go through Learning Advanced JavaScript from John Resig.

function myFunc(arg1, arg2 /* varargs... */) {
  var optional = Array.prototype.slice.call( arguments, 2 );

Every parameter to a function is "optional", even those you declare in the parameter list of the function declaration.

Just consider documenting them well.

user_230560
Damovisa_775460

Some sources will tell you to skip parameters altogether and instead make use of the arguments array. This lets you take any input that's provided to your function, and you can decide how to respond to the arguments passed to your function as you see fit.

You can read more about it here: http://www.devguru.org/technologies/ecmascript/quickref/arguments.html

user_2037130

cletus and Damovisa have made good suggestions. I would also add that some (like myself) might prefer a notation like this:

function foo(/*bar*/) {
   if (arguments.length == 1) {
      var bar = arguments[0];
      ...
   }
}

This serves to document to developers of your code base that the argument is optional and also documents the name, but it also prevents the argument from showing up in the function name in a debugger (the example would show up as foo() rather than foo(optional_argument). Otherwise, developers who are consuming the API might assume that it was required.

Edit: This is especially useful for optional arguments that are intended to be used internally.

user_1709900 
function connect(hostname, port, method) {
   hostname = hostname || "localhost";
   port = port || 80;
   method = method || "GET";
}

Important URL Optional Parameters in Javascript

user_49815460

Just don't define the function with any parameters and access the special arguments array from within the function where you want the optional parameters to be. Example below.

<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function foo() {
  var argv = foo.arguments;
  var argc = argv.length;
  for (var i = 0; i < argc; i++) {
    alert("Argument " + i + " = " + argv[i]);
   }
}
</SCRIPT>
</HEAD>
<BODY onload="foo('hello', 'world');">
</BODY>
</HTML>
user_567530

Is it proper to use a ? mark like Ruby in the function declaration

No, there's no language-based way denote an optional arg. I definitely think it's worth indicating in a comment, though:

function myFunc(var1, var2 /* optional */, var3 /* optional */) {
    if (var2===undefined) ...

(Note the triple-equals for exact equality testing. Otherwise a passed null value will also match. You generally want === for most comparisons in JS, as the double-equals is undesirably weakly-typed.)

For when you've got an indeterminate number of optional arguments, you generally omit them from the function statement, and again a comment is polite:

function myFunc(var1 /* , optional var2..varN */) {
    for (var i= 1; i<arguments.length; i++) ...
user_189360

For history sake: You can loop in your arguments with a != null check. For instance :

function container(param1, param2, param3, param4){
    var param1, param2, param3, param4 = 0 // or other data types.
    for (var i = 0; i < arguments.length; i++){
       if(i != null) {
       console.log(i); // or put default values to your parameters if you need to.
    }
}

Now, all arguments become optional.

user_107135180 
// 1. best way
function sum1(x = 1, y = 2) {
    console.log(x + y)
}
sum1()  // x=1,y=2
sum1(4, 5)  // x=4,y=5
sum1(8)  // x=8,y=2

// 2. Ternary way
function sum2(x) {
    x = x !== undefined ? x : 1; // if x define x=x, if undefine x=1
    console.log(x)
}
sum2(1)
sum2(5)
sum2('foo')
sum2()


// logical way
function sum3(x) {
    x = x || 1;  // x = either x if x is true or 1 if x is not false
    console.log(x)
}
sum3(1)
sum3(5)
sum3('foo')
sum3()
user_168376660
Related