JavaScript Default Parameters

JavaScript default parameters allow you to initialize function parameters with default values if no arguments are passed or if `undefined` is passed, similar to how a ternary operator provides a default value based on a condition. This feature, introduced in ES6, simplifies function definitions and ensures your code is more robust and error-free.

Why Use Default Parameters?

Default parameters enhance your code by:

1. Providing Fallback Values: Ensure functions have meaningful default values.
2. Reducing Errors: Prevent `undefined` values from causing runtime errors.
3. Improving Readability: Make function behavior clear and concise.

How to Use Default Parameters

To set a default parameter, assign a value to the parameter in the function definition. If the argument is `undefined`, the default value will be used.

Basic Syntax

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!
console.log(greet("Alice")); // Output: Hello, Alice!

In this example, if no argument is passed to `greet`, `name` defaults to "Guest".

Examples of Default Parameters

Example 1: Single Default Parameter

A function with one default parameter:

function calculateArea(width, height = 10) {
  return width * height;
}

console.log(calculateArea(5)); // Output: 50
console.log(calculateArea(5, 20)); // Output: 100

If `height` is not provided, it defaults to `10`.

Example 2: Multiple Default Parameters

A function with multiple default parameters:

function createUser(name = "Anonymous", role = "User") {
  return { name, role };
}

console.log(createUser()); // Output: { name: 'Anonymous', role: 'User' }
console.log(createUser("Alice", "Admin")); // Output: { name: 'Alice', role: 'Admin' }

Both `name` and `role` have default values.

Example 3: Default Parameters and `undefined`

Default parameters are used only when the argument is `undefined`:

function multiply(a, b = 2) {
  return a * b;
}

console.log(multiply(5)); // Output: 10
console.log(multiply(5, undefined)); // Output: 10
console.log(multiply(5, null)); // Output: 0

Passing `null` does not trigger the default value.

Advanced Usage

Example 4: Default Parameters with Destructuring

Combining default parameters with object destructuring:

function configure({ host = "localhost", port = 80, secure = false } = {}) {
  return `http${secure ? "s" : ""}://${host}:${port}`;
}

console.log(configure()); // Output: http://localhost:80
console.log(configure({ host: "example.com", secure: true })); // Output: [https://example.com:80](https://example.com:80)

Here, the entire parameter has a default value of an empty object.

Example 5: Default Parameters with Functions

Using a function as a default parameter:

function randomNumber() {
  return Math.floor(Math.random() * 100);
}

function createRandomUser(name = "User", id = randomNumber()) {
  return { name, id };
}

console.log(createRandomUser()); // Output: { name: 'User', id:  }
console.log(createRandomUser("Alice")); // Output: { name: 'Alice', id:  }

A function can provide dynamic default values.

Conclusion

JavaScript default parameters offer a powerful way to handle function arguments, much like how the ternary operator simplifies conditional logic. By providing default values, you ensure your functions are robust and error-free, improving code readability and maintainability. This feature, introduced in ES6, is an essential tool for modern JavaScript development, making your code cleaner and more efficient.