JavaScript Default Parameters

What are Default Parameters?

Default parameters allow you to assign default values to function parameters. If an argument is not provided (or is undefined), the default value is used instead.

This feature was introduced in ES6 (2015) and provides a clean way to handle missing arguments without verbose if-checks.

// Without default parameters
function greet1(name) {
  if (name === undefined) {
    name = "Guest";
  }
  return "Hello, " + name;
}

// With default parameters (cleaner)
function greet2(name = "Guest") {
  return "Hello, " + name;
}

console.log(greet2()); // Hello, Guest
console.log(greet2("Alice")); // Hello, Alice

// With arrow functions
const greet3 = (name = "Guest") => "Hello, " + name;

console.log(greet3()); // Hello, Guest
console.log(greet3("Bob")); // Hello, Bob

Multiple Default Parameters

You can set default values for multiple parameters or just some of them. Only parameters without values passed will use defaults.

// All parameters have defaults
function createProfile(name = "Unknown", age = 0, city = "Unspecified") {
  return {
    name: name,
    age: age,
    city: city
  };
}

console.log(createProfile());
// { name: "Unknown", age: 0, city: "Unspecified" }

console.log(createProfile("Alice"));
// { name: "Alice", age: 0, city: "Unspecified" }

console.log(createProfile("Bob", 25));
// { name: "Bob", age: 25, city: "Unspecified" }

console.log(createProfile("Charlie", 30, "NYC"));
// { name: "Charlie", age: 30, city: "NYC" }

// Mix required and default parameters
function sendEmail(email, subject, body = "No content") {
  return email + ": " + subject + " - " + body;
}

console.log(sendEmail("user@email.com", "Welcome"));
// user@email.com: Welcome - No content

Dynamic Default Values

Default parameters aren't limited to literals. You can use expressions, function calls, and even values of previous parameters.

// Function call as default
function getCurrentDate() {
  return new Date().toISOString().split('T')[0];
}

function createLog(message, date = getCurrentDate()) {
  return "[" + date + "] " + message;
}

console.log(createLog("User logged in"));
// [2024-01-15] User logged in

// Using previous parameters as defaults
function calculateDimensions(width, height = width) {
  return width + " x " + height;
}

console.log(calculateDimensions(10)); // 10 x 10
console.log(calculateDimensions(10, 20)); // 10 x 20

// Object as default
function configureAPI(options = {}) {
  const { url = "localhost", port = 3000, timeout = 5000 } = options;
  return "Server: " + url + ":" + port + " (timeout: " + timeout + "ms)";
}

console.log(configureAPI());
// Server: localhost:3000 (timeout: 5000ms)

console.log(configureAPI({ url: "api.example.com", port: 8080 }));
// Server: api.example.com:8080 (timeout: 5000ms)

Passing undefined vs Not Passing Arguments

There's an important distinction: passing undefined explicitly causes the default to activate, but not passing an argument also activates the default.

function greet(name = "Guest") {
  return "Hello, " + name;
}

// Not passing an argument - uses default
console.log(greet()); // Hello, Guest

// Passing undefined explicitly - uses default
console.log(greet(undefined)); // Hello, Guest

// Passing null - does NOT use default
console.log(greet(null)); // Hello, null

// Passing empty string - does NOT use default
console.log(greet("")); // Hello, 

// Only undefined triggers the default
function test(value = "default") {
  console.log("Value: " + value);
}

test(); // Value: default
test(undefined); // Value: default
test(null); // Value: null
test(false); // Value: false
test(0); // Value: 0

Default Parameters vs Arguments Object

Default parameters are cleaner than using the arguments object or manual checks. They're the modern, recommended approach.

• Default parameters are evaluated with strict scope (don't have access to previous parameters)
• Default values are not included in arr.length for arrow/rest parameter functions
• The arguments object reflects actual arguments passed, not default values
• Default parameters work with destructuring assignment
• Parameters with defaults must come after those without defaults

Common Mistakes

• Putting required parameters after default parameters: Always put required parameters first, then parameters with defaults. This prevents 'function(x = 1, y)' issues.
• Expecting null to trigger defaults: Only undefined triggers default values. If you pass null explicitly, it uses null, not the default.
• Using complex logic in defaults excessively: Keep default parameters simple. For complex logic, use function body checks or use an options object.

FAQ

Related Topics