Monday, 13 June 2016

Optional parameters in JavaScript





Question



What is a good way of assigning a default value to an optional parameter?



Background




I'm playing around with optional parameters in JavaScript, and the idea of assigning a default value if a parameter is not specified. My method in question accepts two parameters, the latter of which I deem to be optional, and if unspecified should default to false. My method looks something like this...



// selects the item, appropriately updating any siblings
// item to select [, toggle on / off]
this.selectItem = function(item, toggle)
{
toggle = toggle && typeof toggle === 'boolean';
if (toggle)
{

// ...
}
}


Testing



After running a few tests on this jsFiddle, using the following principal for default value assigning:



function checkParamIsBoolean(param)

{
param = param && typeof param === 'boolean';
}

checkParamIsBoolean('me'); // boolean
checkParamIsBoolean([]); // boolean
checkParamIsBoolean(true); // boolean
checkParamIsBoolean(false); // boolean
checkParamIsBoolean(1 == 1); // boolean
checkParamIsBoolean(1); // boolean

checkParamIsBoolean(null); // object
checkParamIsBoolean(undefined); // undefined



As you can, the results vary, and aren't desired.



Expected



null = false
undefined = false




Actual



null = object
undefined = undefined



Summary



Are there any alternative approaches to assigning a default value to an optional parameter if it's unspecified; would it be better to use _toggle as the parameter and then assign the value to var toggle within the method?


Answer



Better solution is to use named arguments wraped in a object. It keeps your code clean and prevents errors in case of complex functions (with many default and non-default arguments). Otherwise you need to remember about the order of arguments and assign default values based on the types of arguments present (that's what you're trying to do).




That method is a primary way of passing params jQuery and jQuery's plugins.



function test(options) { 

// set up default options
var defaults = {
param1: 'test',
param2: 100
};


// combine options with default values
var options = $.extend({}, defaults, options); // If you're not using jQuery you need different function here

alert(options.param1)
alert(options.param2)

}

test({'param2': 200}) // Call the function with just the second param


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...