JS - 03.05 - Parameters & Arguments

• Parameter: A variable listed inside the () in a function declaration. This is a term at declaration time.
• Argument: The actual value passed to the function when it is called. This is a term at call time.

function showMessage(from, text) {
  from = '*' + from + '*';  // Modify local `from`
  alert(from + ": " + text);
}

let from = 'Ann';
showMessage(from, "Hello");  // *Ann*: Hello

alert(from);  // Ann (the outer `from` remains unchanged)

• from and text are parameters of the function showMessage.
• The value of from is modified locally inside the function, but the outer variable from remains unchanged after the function call.

Default Value for Parameters

If a function is called without an argument for a parameter, the parameter’s value becomes undefined.
However, you can specify a default value for a parameter, which is used when no argument is provided.

function minus(a, b) {
  if (b === undefined) return -a;  // If no second argument, return -a
  else return a - b;  // Otherwise, return a - b
}

console.log(minus(10));   // -10 (b is undefined)
console.log(minus(10, 5));  // 5 (both arguments provided)

• b defaults to undefined when not passed.
• The function checks if b is undefined to decide its behavior.

Default Parameter Values

You can assign default values directly in the function declaration using =. If the argument is not provided (or is undefined), the default value will be used.

function roundTo(n, step = 1) {
  let remainder = n % step;
  return n - remainder + (remainder < step / 2 ? 0 : step);
}

console.log(roundTo(4.5));   // 5 (step defaults to 1)
console.log(roundTo(4.5, 2));  // 4 (step explicitly set to 2)

• step defaults to 1 if not provided.

Default Value with Undefined Argument

If undefined is explicitly passed for a parameter, the default value will still be applied:

function showMessage(from, text = "No text given") {
  alert(from + ": " + text);
}

showMessage("Ann");   // Ann: No text given
showMessage("Ann", undefined); // Ann: No text given (explicitly passing `undefined`)

Even though undefined is passed explicitly, the default value "No text given" will still be used for text.

Passing a Function as a Default Value

You can also pass a function as a default value for a parameter. The function will execute if no value is provided.

function showMessage(from, text = anotherFunction()) {
  // `anotherFunction()` is called if no value is passed for `text`
  alert(from + ": " + text);
}

function anotherFunction() {
  return "Generated text";  // Return a value if no argument is passed
}

showMessage("Ann");  // Ann: Generated text

• anotherFunction() is executed only when text is not passed to showMessage.

Extra Arguments

JavaScript functions can accept more arguments than the number of parameters specified. These extra arguments are ignored, and only the specified parameters are used.

function square(x) {
  return x * x;
}

console.log(square(4, true, "hog"));  // 16 (extra arguments are ignored)

In this case, only the first argument 4 is used, and the extra arguments are ignored.

Alternative Ways to Set Default Parameters

Sometimes, you might want to set default values for parameters after the function declaration. You can achieve this using various techniques:

Using if to Set Default Values

function showMessage(text) {
  if (text === undefined) {
    text = "Empty message";  // Set default manually
  }
  alert(text);
}

showMessage(); // Empty message

Using || Operator

You can also use the logical OR (||) operator to assign default values if the parameter is falsy (e.g., undefined, null, 0, false, or "").

function showMessage(text) {
  text = text || "Empty message";  // If `text` is falsy, assign default
  alert(text);
}

showMessage(); // Empty message
showMessage(""); // Empty message ("" is falsy)

Using Nullish Coalescing Operator (??)

The nullish coalescing operator (??) is a more precise way to set defaults, as it only triggers the default if the value is null or undefined, not for other falsy values like 0 or false.

function showCount(count) {
  alert(count ?? "Unknown");  // Only replaces `null` or `undefined` with "Unknown"
}

showCount(0);  // 0 (0 is not null or undefined, so it's not replaced)
showCount(null);  // Unknown (null is replaced)

• count ?? "Unknown" ensures that the default value is used only when count is null or undefined.

Summary of Parameter Techniques

1. Default Parameters: You can set default values for parameters directly in the function declaration using =.
2. undefined as a Default: If no argument is passed or undefined is passed, a parameter can take its default value.
3. Extra Arguments: JavaScript functions can ignore extra arguments that are passed beyond the declared parameters.
4. Alternative Default Techniques:
   • Use if statements to manually check for undefined.
   • Use the || operator to provide a fallback for any falsy value.
   • Use the ?? (nullish coalescing) operator for default values only when null or undefined are encountered.