JavaScript Default Parameters

Introduction

Functions are one of the core building blocks of JavaScript. They allow you to write reusable and modular code. However, one common challenge developers face is handling cases when function arguments are missing or undefined.

Before ES6 (ECMAScript 2015), developers had to manually assign default values inside functions, which often made code longer and less readable. To solve this problem, JavaScript introduced Default Parameters.

Default parameters allow you to set default values for function arguments directly in the function definition. This makes your code cleaner, safer, and easier to maintain.

In this article, we will explore what default parameters are, why they are useful, and how to use them effectively with real-world examples.

What are JavaScript Default Parameters?

Default parameters allow you to initialize function parameters with default values if no value or undefined is passed.

Default parameters = Predefined values for function arguments

Basic Example

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

greet();        // Hello, Guest
greet("John");  // Hello, John

Why is the default parameter used in JavaScript?

Default parameters make functions more flexible.

1. Avoid Undefined Errors

Prevents errors when arguments are missing.

2. Cleaner Code

No need for manual checks inside functions.

3. Better Readability

Defaults are visible in the function definition.

4. Flexible Function Calls

You can call functions with fewer arguments.

5. Used in Real Applications

Common in APIs, utilities, and frameworks.

Syntax

The syntax for default parameters is very simple.

function functionName(param1 = defaultValue, param2 = defaultValue) {
 // code
}

Example 1: sum method

In this example, we will use default parameters, one parameter, and two parameters.

function sum(a = 0, b = 0) {
 return a + b;
}

1. Call the sum method without passing any parameters.

console.log(sum());      // 0

Output:

2. Call the sum method passing one parameter.

console.log(sum(5));      // 5

Output:

3. Call the sum method passing both parameters.

console.log(sum(5, 10));      // 15

Output:

Example 2: Without Default Parameters (Old Way)

In this example, you will see how to use a method without default parameters.

function greet(name) {
 name = name || "Guest";
 console.log("Hello " + name);
}

Note: Problem: Fails for falsy values like 0, “”, or false.

1. Call the method without passing any parameters.

 greet();

Output:

2. Call the method passing a parameter.

 greet("John");

Output:

Example 3: Default Parameters with Objects

In this example, you will see a default parameter passed as an object.

function displayUser({ name = "Guest", age = 18 } = {}) {
 console.log(name, age);
}

1. Call the method without parameters

displayUser();

Output:

2. Call the method with object parameters

displayUser("John", 35);

Output:

Real-Life Example: Online Order System

In this example, you will see the placeOrder function.

function placeOrder(item, quantity = 1, price = 0) {
 let total = quantity * price;
 console.log(`Order: ${item}, Quantity: ${quantity}, Total: ${total}`);
}

placeOrder("Laptop", 2, 50000);
placeOrder("Mouse", undefined, 500);

Output:

Beginners make Common Mistakes

You will see some common mistakes which happend by Beginners.

1. Passing null Instead of undefined

function test(value = 10) {
 console.log(value);
}

test(null); // null (default not applied)

Output:

Note: Default works only for undefined.

2. Wrong Order of Parameters

Default parameters should be at the end.

function test(a = 1, b) 
{ 
console.log(a, b);
}

test(5);

Output:

Correct way:

function test(b, a=1) 
{ 
console.log(b, a);
}

test(5);

Output:

3. Overwriting Defaults value

function greet(name = "Guest") {
 name = "Admin"; // overrides default
}

Output:

Interview Questions

Conclusion

JavaScript Default Parameters are a powerful feature that makes your functions more flexible, readable, and error-resistant. They eliminate the need for manual checks and simplify your code significantly.