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.