Tip Details

Using optional parameters in Javascript functions

Most programming languages have a mechanism which allows optional parameters to be passed to a function/method and if they are not included in the call, default values are set. This is not the case in Javascript. But thankfully, it is still possible to set up a function that take optional parameters.

Consider a function defined like so:

function myFuncName(param1, param2) {

In Javascript, it is perfectly legal to make a call to this function in any of three ways:

myFuncName(1, 2);
myFuncName(1);
myFuncName();

They will all work. The rub in javascript is that if you want the parameter to be optional, you need to add code in the function itself to deal with the cases when a parameter value is not given in the call. For example, consider the function above where we want to make the second parameter optional and if the second parameter is not given, we set a default value of '3.14'. That can be done like so:

function myFuncName(param1, param2) {
   // Set the optional parameter if needed
   if ( param2 === undefined ) {
      param2 = '3.14';
   }

   ...
}

You can do this for as many parameters as you like, but you need to be sure to order the parameters so that the "most optional" ones are further to the right since as soon as you leave off one parameter, it starts removing values from the right-hand side of the parameter list.
Rating: 98% positive – 556 total Votes
I Like this Tip I Don't Like this Tip
Categories: javascript programming
Added: on Apr 19, 2007
Added By: an anonymous user
Searches: javascript function optional programming set

Comments on this Tip

Add a Comment
brilliant!
– Added by an anonymous user on Apr 09, 2008
Great stuff - thank you! DC
– Added by an anonymous user on Apr 14, 2008
Very nice tip!
– Added by an anonymous user on May 05, 2008
just what i was looking for... just like in AS2
thanks
– Added by an anonymous user on Sep 25, 2008
Great! Thank you for this simple and helpful tip. :-)
– Added by an anonymous user on Jul 24, 2009
thanks a lot!
– Added by an anonymous user on Jul 29, 2009
Thanks, that was a very clear example.
– Added by an anonymous user on Jul 31, 2009
Thank you, normal languages have a default value you can give. To bad JS doesn't support this:

function myFuncName(param1, param2 = 3.14) {
– Added by an anonymous user on Dec 24, 2009
Love this, bookmarked !
But yeah, I'm still thinking about default value of paramaters directly assigned like above, just like php.
– Added by an anonymous user on Jan 18, 2010
Very useful tip.Thanks guy.
– Added by an anonymous user on Mar 24, 2010
yeah! that's what i need. Thanks)
– Added by an anonymous user on Mar 29, 2010
The code could be further simplified as:


function myFuncName(param1, param2) {
// Set the optional parameter if needed
// Just check for truthy
param2 = param2 || '3.14';

...
}
– Added by an anonymous user on Apr 20, 2010
No. "anonymous",
param2 = param2 || '3.14';
is not a simplification. You have condensed the code and complicated it, being "cleverer", I suppose, but this is the opposite of simplification.
– Added by an anonymous user on Apr 22, 2010
My preferred form is a ternary operator:

param2 = (param2 === undefined) ? '3.14' : param2;

The comparison in parenthesis is checked, and if it evaluates to true (no parameter was passed), the first value is set (the default value) otherwise the parameter keeps its passed value.

When you have, say, half a dozen parameters it's helpful to have them clean like this.

Note that the || shortcut is NOT more complicated, it's actually quite common, but it has some pitfalls: with loose comparison, many values evaluate to false: '', 0, null, etc, in addition to undefined, so those will all be overwritten with the default value. It's indeed best to actually write what you mean and stick to strict comparison, that way you can do funky things like intentionally pass a default value of null.

null == undefined //true
null === undefined // false

- Billy Wenge-Murphy
– Added by an anonymous user on Oct 02, 2010
Very Nice! Thanks for the tips!
– Added by an anonymous user on Feb 23, 2011
cool , very useful tip , thank you
– Added by an anonymous user on Apr 07, 2011
Your Comment:
(how to format)
Keywords:
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Telling when an iframe is done loading

96% positive, 4 comments - last added on Feb 17, 2011
– Tip added by an anonymous user on Apr 18, 2008

Detecting if a variable exists in Javascript

95% positive, 3 comments - last added on Feb 02, 2011
– Tip added by an anonymous user on Jul 22, 2008

jQuery ajax responseText empty

90% positive, 4 comments - last added on Apr 09, 2010
– Tip added by an anonymous user on Mar 27, 2009

Unable to click in text input boxes on Internet Explorer

94% positive, 3 comments - last added on Apr 13, 2010
– Tip added by Marcos84 on Dec 09, 2008

Length of associative arrays in Javascript

90% positive, 1 comment - last added on May 22, 2010
– Tip added by an anonymous user on Nov 04, 2008

Matching any character in a javascript regular expression

96% positive, 6 comments - last added on Sep 03, 2010
– Tip added by an anonymous user on Aug 18, 2008

Checking for undefined variables in Javascript

100% positive, 1 comment - last added on Jul 14, 2009
– Tip added by an anonymous user on Jan 14, 2009

Javascript Error: unterminated regular expression literal

56% positive, 0 comments
– Tip added by marty on Jun 26, 2008

reading select element values in javascript in IE7

100% positive, 0 comments
– Tip added by an anonymous user on Jul 17, 2009

Don't include a "length" attribute in a JSON Object

100% positive, 1 comment - last added on Feb 18, 2010
– Tip added by an anonymous user on Apr 10, 2009

Using onClick events for links

100% positive, 0 comments
– Tip added by an anonymous user on Apr 08, 2010

Optional parameters in javascript functions

100% positive, 0 comments
– Tip added by an anonymous user on Jul 30, 2008

Javascript variable naming

100% positive, 1 comment - last added on Jul 22, 2008
– Tip added by an anonymous user on Sep 30, 2007

Trimming whitespace in Javascript

Categories: javascript programming
100% positive, 0 comments
– Tip added by an anonymous user on Sep 13, 2007

Using optional parameter in javascript

Categories: javascript programming
100% positive, 0 comments
– Tip added by an anonymous user on Jul 17, 2008

compressing javascript

100% positive, 0 comments
– Tip added by an anonymous user on Jun 12, 2008

Debugging Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Sep 12, 2008

animating elements with jQuery

50% positive, 0 comments
– Tip added by an anonymous user on Aug 04, 2008

attaching events to nodes in Javascript

no ratings, 0 comments
– Tip added by an anonymous user on Aug 18, 2008

Javascript: How to Create a Random Number

0% positive, 0 comments
– Tip added by Walkere on Feb 23, 2008