Is there a better way to do optional function parameters in JavaScript?

javascript

function-overloading

default-parameters

javascript-features

byAlex Kataev·Dec 18, 2024

To manage optional parameters in JavaScript, leverage default values or destructuring with defaults. Here's an example with a function greet:

function greet(name, message = 'Hi') {
  console.log(`${message} ${name}`);
}

Call greet with just name, and message defaults to 'Hi'. Managing several optional arguments is done with an options object:

function greet({ name, message = 'Hi' } = {}) {
  console.log(`${message} ${name}`);
}

You can call greet() without arguments but also customize the parameters with any combination of values.

Default parameters VS logical OR (||)

When you 'default' with ||, you might encounter some "gotchas" with falsy values:

function greet(name, tone) {
  tone = tone || 'neutral';  // Neutral like Switzerland 🇨🇭
  console.log(`Greetings, ${name}, I am in a ${tone} tone.`);
}

The problem? If tone is falsy (like 0 or ""), it defaults to 'neutral'. A solution: use default parameters - they only apply if no value is passed.

function greet(name, tone = 'neutral') { // Neutral, like my ex's texts! 😅
  console.log(`Greetings, ${name}, I am in a ${tone} tone.`);
}

Power-up with rest parameters and destructuring

For more flexibility, destructuring with default values and rest parameters are your friends:

function setupEvent({ type = 'click', options = {}, ...rest }) {
  // "Click! Click! Boom!" 💥 Set up your event here
}

Undefined parameters? Use associative arrays!

When you need to provide defaults for an undefined number of parameters, associative arrays combined with square bracket notation could be the way to go:

function drawChart(options = {}) {
  // Default options: Quite like my default dance moves, 
  // they're not impressive but they get the job done!
  const chartDefaults = {
    type: 'line',
    width: 400,
    height: 300,
    // More default options here!
  };

  // Marrying user options and defaults: a royal wedding indeed! 👑
  for (let key in chartDefaults) {
    options[key] = options[key] || chartDefaults[key];
  }

  // Draw the chart here!
  // And now, let's all do the 'chart' dance! 💃🕺
}

Node.js users, rejoice with `parametric`

Node.js users can utilize the parametric npm package for function overloading, offering an elegant way to define multiple signatures for a function based on type or presence of arguments.

Stay tuned with ECMAScript proposals

Keep an eye on ECMAScript proposals, as they often introduce promising features improving parameter handling like the pipeline operator or pattern matching.

Mind the trade-offs

Remember, not all solutions fit all problems. Consider the efficiency and coding style when bespoke solutions are needed and you opt for associative arrays for defaults.