JavaScript Default Parameters

In the world of programming, functions are the building blocks that allow us to encapsulate reusable pieces of logic. One common challenge when working with functions is dealing with missing or undefined parameters. JavaScript ES6 introduced a feature called default parameters, which allows you to set default values for function parameters if they are not provided during the function call. This makes your code more robust and easier to read by avoiding unexpected undefined values.

In this tutorial, we'll explore how to use default parameters in JavaScript, understand their syntax, and see how they can improve your code. By the end of this lesson, you'll be able to write functions that handle missing arguments gracefully and make your code more maintainable.

Introduction

Default parameters are a feature introduced in ES6 that allows you to specify default values for function parameters. If a parameter is not provided or is undefined when the function is called, the default value will be used instead. This feature can help prevent errors caused by missing arguments and make your code more readable.

Setting Default Parameters

Basic Syntax

The basic syntax for setting default parameters involves assigning a default value to a parameter in the function declaration. Here's an example:

1function greet(name = 'Guest') {
2return `Hello, ${name}!`;
3}
4 
5console.log(greet()); // Output: Hello, Guest!
6console.log(greet('Alice')); // Output: Hello, Alice!

Hello, Guest!
Hello, Alice!

In this example, the greet function has a default parameter name set to 'Guest'. If no argument is provided when calling greet(), it defaults to 'Guest'.

Using Expressions as Default Values

You can also use expressions or even other functions as default values. The expression will be evaluated only if the parameter is missing or undefined.

1function multiply(a, b = a) {
2return a * b;
3}
4 
5console.log(multiply(5)); // Output: 25
6console.log(multiply(3, 4)); // Output: 12

25
12

In this example, the second parameter b defaults to the value of a if it is not provided. This allows you to create functions with flexible default behaviors.

Common Mistakes

• Order of Parameters: Default parameters must be placed after non-default parameters in the function declaration. Placing a default parameter before a non-default one will cause a syntax error.

1// This will cause a syntax error
2function greet(name = 'Guest', age) {
3return `Hello, ${name}! You are ${age} years old.`;
4}
5 
6console.log(greet(25)); // SyntaxError: Unexpected token =

• Using undefined: If you explicitly pass undefined as an argument to a function with default parameters, the default value will be used.

1function greet(name = 'Guest') {
2return `Hello, ${name}!`;
3}
4 
5console.log(greet(undefined)); // Output: Hello, Guest!

Practical Example

Let's create a practical example to demonstrate how default parameters can be used in a real-world scenario. We'll build a simple calculator function that performs basic arithmetic operations with optional parameters.

1function calculate(a, b = 0, operation = 'add') {
2switch (operation) {
3  case 'add':
4    return a + b;
5  case 'subtract':
6    return a - b;
7  case 'multiply':
8    return a * b;
9  case 'divide':
10    if (b === 0) return 'Error: Division by zero';
11    return a / b;
12  default:
13    return 'Invalid operation';
14}
15}
16 
17console.log(calculate(10)); // Output: 10
18console.log(calculate(10, 5)); // Output: 15
19console.log(calculate(10, 5, 'subtract')); // Output: 5
20console.log(calculate(10, 5, 'multiply')); // Output: 50
21console.log(calculate(10, 5, 'divide')); // Output: 2
22console.log(calculate(10, 5, 'modulus')); // Output: Invalid operation

10
15
5
50
2
Invalid operation

In this example, the calculate function takes three parameters: a, b, and operation. The parameters b and operation have default values of 0 and 'add', respectively. This allows you to perform calculations with fewer arguments, making the function more flexible.

Summary

• Default Parameters: A feature in ES6 that allows you to set default values for function parameters.
• Syntax: Assign a default value directly in the function declaration (param = defaultValue).
• Expressions: You can use expressions or other functions as default values.
• Order: Default parameters must be placed after non-default parameters.
• Use Cases: Improve code robustness and readability by handling missing arguments gracefully.

What's Next?

In the next topic, we'll explore JavaScript modules (import/export). Modules are a powerful feature that allows you to organize your code into separate files and reuse them across different parts of your application. This will help you manage larger projects more efficiently and keep your codebase clean and maintainable.

Stay tuned for our next lesson where we dive deeper into the world of JavaScript modules!