Understanding Default Parameters in JavaScript

Understanding Default Parameters in JavaScript

In JavaScript, default parameters allow you to specify default values for function parameters when they are not provided or are undefined. This feature makes functions more robust and flexible by reducing the need for additional checks inside the function body.

Syntax

The syntax for default parameters is straightforward. You assign a default value to a parameter directly in the function definition.

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

In this example, if name is not provided or is undefined, it will default to 'Guest'.

Examples

1. Basic Usage

function calculateArea(radius = 1) {
  return Math.PI * radius * radius;
}

console.log(calculateArea()); // Output: 3.141592653589793
console.log(calculateArea(5)); // Output: 78.53981633974483

If no argument is passed, radius defaults to 1.

2. Multiple Default Parameters

function displayName(firstName = 'John', lastName = 'Doe') {
  console.log(`${firstName} ${lastName}`);
}

displayName(); // Output: John Doe
displayName('Alice'); // Output: Alice Doe
displayName('Alice', 'Smith'); // Output: Alice Smith

Both parameters have default values, which are used if the corresponding arguments are not provided.

3. Default Parameters with Objects

function createProfile({ name = 'Anonymous', age = 25 } = {}) {
  console.log(`Name: ${name}, Age: ${age}`);
}

createProfile(); // Output: Name: Anonymous, Age: 25
createProfile({ name: 'Alice' }); // Output: Name: Alice, Age: 25
createProfile({ age: 30 }); // Output: Name: Anonymous, Age: 30

This example uses object destructuring with default values.

4. Using Default Parameters with the Rest Operator

function sum(...numbers = [0]) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum()); // Output: 0
console.log(sum(1, 2, 3)); // Output: 6

If no arguments are provided, numbers defaults to [0].

Frequently Asked Questions

1. What happens if a parameter is explicitly set to undefined?

2. If a parameter is passed as undefined, the default value will be used. For example:
   javascript
function test(a = 5) {
console.log(a);
}
test(undefined); // Output: 5

3. Can default parameters be expressions?

4. Yes, default values can be expressions. For example:
   javascript
function greeting(name = 'Hello ' + 'World') {
console.log(name);
}
greeting(); // Output: Hello World

5. Do default parameters affect function length?

6. No, the length property of the function reflects the number of parameters it expects, regardless of default values. For example:
   javascript
function test(a, b = 2) {
// ...
}
console.log(test.length); // Output: 2

7. Can default parameters be used with primitive values?

8. Yes, default parameters work with all primitive types including numbers, strings, booleans, and null/undefined.

9. Is there a difference between default parameters and using || for default values?

10. Yes. Default parameters only trigger when the argument is undefined, whereas || checks for any falsy value (e.g., 0, '', null, false, etc.). For example:
    “`javascript
    function test(a = 5) {
    console.log(a);
    }
    test(”); // Output: ”

    function testWithOr(a) {
    a = a || 5;
    console.log(a);
    }
    testWithOr(”); // Output: 5
    “`

Conclusion

Default parameters in JavaScript provide a clean and concise way to handle cases where function arguments are not provided. They simplify error checking and make the code more readable. By understanding how to use default parameters effectively, you can write more maintainable and robust JavaScript functions.

Remember, default parameters are a powerful feature, but like any tool, they should be used appropriately to enhance your code.