Default Parameters in JavaScript (ES6+ Features): A Complete Guide

JavaScript has continuously evolved, and with the arrival of ECMAScript 6 (ES6), several powerful features were introduced to simplify code writing. One such feature is default parameters — a cleaner, more intuitive way to handle function arguments.

In this article, we'll explore:

• What are default parameters?

• Syntax and examples

• Use cases

• Comparisons with old JavaScript patterns

• Common mistakes

• Interview question examples
   

What Are Default Parameters?

Default parameters allow you to set default values for function arguments if no value or undefined is passed.

Syntax:

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

Example:

greet();         // Output: Hello, Guest
greet("Shubham"); // Output: Hello, Shubham

Without ES6, developers used conditional logic to achieve this:

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

This approach worked, but failed for falsy values like 0 or "".
 

Why Use Default Parameters?

1. Cleaner Syntax: Reduces boilerplate code.

2. Improves Readability: Shows the expected defaults at a glance.

3. Avoids Errors: Prevents undefined or null-related bugs.
    

Multiple Default Parameters

You can define multiple defaults:

function createUser(name = "Anonymous", age = 18) {
  return { name, age };
}

console.log(createUser()); // { name: 'Anonymous', age: 18 }

Dynamic Default Values

You can even use expressions:

function generateId(id = Date.now()) {
  return `ID_${id}`;
}

Or call another function:

function getDefaultName() {
  return "DefaultUser";
}

function greet(name = getDefaultName()) {
  console.log("Hello, " + name);
}

Common Pitfalls

1. Parameter Order Matters

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

userInfo(undefined, 25); // Guest 25

If age is not optional, default parameters should come after required ones.

2. Don’t Use Default Parameters with arguments

function sum(a = 0, b = 0) {
  console.log(arguments.length); // Might be misleading
}

arguments doesn’t reflect the values of default parameters, which can be confusing.
 

FAQ-

Question:
What is the difference between using default parameters and setting defaults manually inside the function?

Answer:
Default parameters set values during the function declaration phase and do not override falsy values like 0 or "", whereas manual checks (e.g., x = x || 10) treat falsy values as absence.

Concluion

Default parameters are a small but powerful addition to JavaScript's ES6 feature set. They help you write more robust, readable, and efficient functions. Whether you're a beginner or brushing up for interviews, mastering this feature is a must.