Default Parameters

ES6 Default Parameters Overview

ES6 introduced default parameters, allowing function parameters to have predefined values when an argument is not supplied or is undefined. This eliminates the need for manual checks and makes functions cleaner and easier to maintain.

Default parameters are commonly used in utility functions, API helpers, configuration objects, React components, Node.js applications, and reusable libraries.

Basic Default Parameter

function greet(
  name = "Guest"
) {

  return "Hello " + name;

}

console.log(
  greet()
);

console.log(
  greet("John")
);

When no argument is passed, the default value is used.

Before ES6

function greet(name) {

  name =
    name || "Guest";

  return "Hello " + name;

}

Before ES6, developers often used the logical OR operator to provide fallback values. Default parameters make this unnecessary.

Multiple Default Parameters

function createUser(

  name = "Guest",

  role = "User",

  active = true

) {

  return
    {
      name,
      role,
      active
    };

}

console.log(
  createUser()
);

Passing undefined

function calculate(

  tax = 10

) {

  return tax;

}

console.log(
  calculate(undefined)
);

// 10

Passing undefined triggers the default value.

Passing null

function calculate(

  tax = 10

) {

  return tax;

}

console.log(
  calculate(null)
);

// null

null is considered a valid value, so the default parameter is not applied.

Using Expressions as Default Values

function calculate(

  amount,

  tax = amount * 0.10

) {

  return amount + tax;

}

console.log(
  calculate(100)
);

Default values can use previously declared parameters.

Using Function Calls as Default Values

function generateId() {

  return Date.now();

}

function createOrder(

  id = generateId()

) {

  return id;

}

The function executes only when the parameter value is missing.

Default Array Parameter

function addItems(

  items = []

) {

  items.push("Laptop");

  return items;

}

Default Object Parameter

function createConfig(

  options = {
    theme: "light",
    language: "en"
  }

) {

  return options;

}

Destructuring with Default Parameters

function displayUser(

  {

    name = "Guest",

    age = 18

  } = {}

) {

  console.log(name);
  console.log(age);

}

displayUser();

This is a common pattern when working with configuration objects.

Default Parameters with Rest Parameters

function multiply(

  multiplier = 2,

  ...numbers

) {

  return numbers.map(
    number =>
      number * multiplier
  );

}

Arrow Functions with Default Parameters

const greet = (

  name = "Guest"

) =>

  "Hello " + name;

Constructor Default Parameters

class User {

  constructor(

    name = "Guest",

    role = "User"

  ) {

    this.name = name;
    this.role = role;

  }

}

const user =
  new User();

Real World Example - API Request

function fetchUsers(

  page = 1,

  limit = 20

) {

  return fetch(

    "/users?page=" +
    page +
    "&limit=" +
    limit

  );

}

Pagination Example

function loadProducts(

  page = 1,

  size = 25

) {

  console.log(page);
  console.log(size);

}

loadProducts();

Configuration Example

function initializeApp(

  options = {

    darkMode: false,

    language: "en"

  }

) {

  console.log(options);

}

React Style Example

function Button(

  {

    color = "blue",

    size = "medium"

  }

) {

  return color;

}

Dependent Default Parameters

function createRectangle(

  width,

  height = width

) {

  return width * height;

}

console.log(
  createRectangle(10)
);

Default Values Are Evaluated at Call Time

function randomNumber() {

  return Math.random();

}

function generate(

  value = randomNumber()

) {

  return value;

}

The default function executes each time the parameter is omitted.

Parameter Order

function register(

  name,

  role = "User",

  active = true

) {

}

Required parameters should appear before optional parameters.

ES5 vs ES6

Common Use Cases

• API requests.
• Configuration objects.
• Pagination.
• Reusable utility functions.
• Class constructors.
• React components.
• Node.js services.
• Validation helpers.
• Formatting functions.
• Application initialization.

Common Mistakes

• Passing null expecting the default value.
• Using mutable objects carelessly as defaults.
• Using expensive computations unnecessarily.
• Placing required parameters after optional ones.
• Ignoring parameter order.
• Using logical OR instead of default parameters.
• Writing complex expressions inside parameter lists.
• Confusing undefined and null.

Best Practices

• Use default parameters instead of manual fallback logic.
• Keep default values simple.
• Place required parameters first.
• Use options objects for many optional values.
• Use destructuring with defaults.
• Validate incoming data when needed.
• Avoid unnecessary computations in defaults.
• Write self-documenting parameter names.
• Prefer readability over clever syntax.
• Document optional parameters clearly.

Interview Questions

• What are default parameters?
• When are default values applied?
• What is the difference between null and undefined?
• Can default values depend on earlier parameters?
• Can functions be used as default values?
• Can constructors use default parameters?
• What happens when passing undefined?
• Why are default parameters preferred over the || operator?
• Can default values use destructuring?
• What are common mistakes with default parameters?