As a JavaScript developer, I’m always on the lookout for ways to make my code more flexible and efficient. One aspect that often comes up is handling optional function arguments. We’ve all been in situations where we want to pass different sets of arguments to a function, but not all of them are required. That’s where optional function arguments in JavaScript come into play. In this blog post, I’ll guide you through the ins and outs of working with optional function arguments, exploring different approaches and best practices. So, let’s dive in and unlock the power of optional function arguments in JavaScript!
Why do we need optional function arguments or optional parameters in JavaScript?
It’s to write functions that can do more stuff, and not repeating the code. Optional parameters or arguments is a great way to improve the code and simplify it. You can hide not-so-used functionality as a part of the argument. It also helps you to use a function’s customisation potential to the fullest by adding numerous optional arguments.
It is a very useful language feature available in most languages in one way or the other.
Methods to achieve optional functional arguments or parameters
Method 1 – Undefined Arguments
JavaScript fundamentally has this available – you can call functions omitting some parameters and passing other parameters. You can also optionally pass undefined or null as values to the parameters if you intend to.
function totalBill(cost, tax, surcharge) {
// values of arguments inside the function,
// cost === 100,
// tax === undefined,
// surcharge === undefined
}
totalBill(100);
totalBill(100, 0.06);
totalBill(100, 0.06, 0.03);You can have a logic which does the computation in the function by checking for undefined values by a simple if condition.
function totalBill(cost, tax, surcharge) {
if (cost === undefined) cost = 0;
if (tax === undefined) tax = 0.05 * cost;
if (surcharge === undefined) surcharge = 0.02 * cost;
console.log("Total Bill - ", cost + tax + surcharge);
}
totalBill(100);
totalBill(100, 0.06, 0.03);You can simplify the code and have a prettier way of doing the same verbose way of comparing using the logical OR || operator.
function totalBill(cost, tax, surcharge) {
cost = cost || 0;
tax = tax || 0.05 * cost;
surcharge = surcharge || 0.02 * cost;
console.log("Total Bill - ", cost + tax + surcharge);
}
totalBill(100);
totalBill(100, 0.06);
totalBill(100, 0.06, 0.03);The logical OR operator || checks if the value of cost is truthy. If not, it checks for the next argument which is 0 and it returns it.
This shortcut approach is a very common idiom, but it does have a disadvantage: You can’t use for any argument that could accept a falsy value: false, 0, null, undefined, the empty string "", and NaN.
This method only allows the arguments towards the end to be optional – you cannot make an optional first parameter, middle parameter, or combination of parameters optional, unless you explicity pass undefined in the positions you need. The next methods let you position optional arguments irrespective of the position.
Method 2 – arguments variable
JavaScript functions get an implicit arguments variable which is available in the scope of the function. arguments variable is an array of all the arguments that is passed to the function.
function allArguments() {
console.log(arguments);
}
allArguments("hello", 7.007, true, "world");
//Output - [ "hello", 7.007, true, "world" ]You can do the same with the totalBill function.
function totalBill() {
cost = arguments[0] || 0;
tax = arguments[1] || 0.05 * cost;
surcharge = arguments[2] || 0.02 * cost;
console.log("Total Bill - ", cost + tax + surcharge);
}
totalBill(100);
totalBill(100, 0.06);
totalBill(100, 0.06, 0.03);Method 3 – object literal
JavaScript, for which it is well known for Object, is the easiest way to achieve it. Pass the necessary arguments as a part of the function parameters, use an optional variable of type object which would receive key:value pair of all the optional parameters.
function totalBill(cost, options) {
var cost = cost || 0;
var tax = options.tax || 0.05 * cost;
var surcharge = options.surcharge || 0.02 * cost;
console.log("Total Bill - ", cost + tax + surcharge);
}
totalBill(100, {});
totalBill(100, { tax: 0.1 });
totalBill(100, { tax: 0.1, surcharge: 0.05 });Note: In method 3, you have to pass an empty object
{}in case you don’t have any optional arguments. If not, you will see an error –TypeError: options is undefined
Hope this article was useful where you learnt about optional arguments (optional parameters) in JavaScript.
And there you have it! We’ve reached the end of our journey exploring optional function arguments in JavaScript. I hope this deep dive into handling optional parameters has equipped you with valuable insights and techniques to write more flexible and reusable code. By utilizing default values, rest parameters, and other approaches, you can ensure your functions gracefully handle different argument scenarios. Remember, optional arguments are a powerful tool in your JavaScript toolkit, empowering you to write more elegant and adaptable code. So go forth, embrace the flexibility, and level up your JavaScript programming skills!
