Invoke Function with Default Value for First Argument and Custom Value for Second Argument in JavaScript

In JavaScript, functions can be defined with default parameters. This means that if no argument is provided for a parameter when the function is called, the default value will be used instead.

Consider the following function:

function greet(name = "World", greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

In this function, name defaults to "World" and greeting defaults to "Hello". If we call greet() with no arguments, it will output "Hello, World!".

Now, what if we want to use the default value for name but provide a new value for greeting?

One way to achieve this is to pass undefined for the first argument. This will cause JavaScript to use the default value for that argument.

function greet(name = "World", greeting = "Hello") {
  console.log(`${greeting}, ${name}!`);
}

greet(undefined, "Hi"); // "Hi, World!"

However, passing undefined as an argument can be misleading as it might imply that the argument is intentionally being set to undefined.

A more elegant solution would be to use an options object as the function parameter. This allows us to pass in an object with only the properties we want to set, and it will use the default values for the rest.

Here's how we can modify the greet function to use an options object:

function greet({ name = "World", greeting = "Hello" } = {}) {
  console.log(`${greeting}, ${name}!`);
}

Now, we can call greet with a new value for greeting and it will use the default value for name:

greet({ greeting: "Hi" }); // Outputs: "Hi, World!"

This approach is more explicit and less prone to errors, as it's clear which parameters are being set and which are using their default values.