Default Values

ES6 Default Values Overview

ES6 introduced several ways to provide default values in JavaScript. Default values help write safer, cleaner, and more predictable code by supplying fallback values whenever data is missing or undefined.

Default values are commonly used with function parameters, object destructuring, array destructuring, variables, logical operators, configuration objects, React components, API responses, and application settings.

Default Function Parameters

function greet(

  name = "Guest"

) {

  return "Hello " + name;

}

console.log(
  greet()
);

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

The default value is used only when the argument is omitted or undefined.

Multiple Default Parameters

function createUser(

  name = "Guest",

  role = "User",

  active = true

) {

  return
    {
      name,
      role,
      active
    };

}

Default Values Using Earlier Parameters

function rectangle(

  width,

  height = width

) {

  return width * height;

}

console.log(
  rectangle(10)
);

Default Values from Expressions

function calculate(

  amount,

  tax = amount * 0.08

) {

  return amount + tax;

}

Default values may contain expressions that use previous parameters.

Function Call as Default Value

function createId() {

  return Date.now();

}

function createUser(

  id = createId()

) {

  return id;

}

Default Object Values

const settings =
  {
    theme: "dark"
  };

const
{
  theme = "light",
  language = "en"
}
=
settings;

console.log(theme);
console.log(language);

Missing object properties receive their default values.

Default Array Values

const colors =
[
  "Red"
];

const
[
  primary,
  secondary = "Blue"
]
=
colors;

console.log(primary);
console.log(secondary);

Nested Object Defaults

const user =
  {
    profile:
      {
        name: "Alice"
      }
  };

const
{
  profile:
  {
    name,
    city = "Dallas"
  }
}
=
user;

Default Empty Object

function display(

  {
    name = "Guest"
  } = {}

) {

  console.log(name);

}

display();

Providing an empty object prevents runtime errors when no argument is supplied.

Default Empty Array

function process(

  items = []

) {

  console.log(
    items.length
  );

}

process();

Default Class Constructor Values

class User {

  constructor(

    name = "Guest",

    role = "User"

  ) {

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

  }

}

const user =
  new User();

Arrow Function Default Values

const multiply = (

  value,

  factor = 2

) =>

  value * factor;

Using Nullish Coalescing

const pageSize =
  settings.pageSize
  ??
  20;

The ?? operator only replaces null or undefined.

Using Logical OR

const username =
  input ||
  "Guest";

Logical OR replaces every falsy value including 0, false, and an empty string.

Difference Between || and ??

const value1 =
  0 || 100;

const value2 =
  0 ?? 100;

console.log(value1);

console.log(value2);

Real-World Example - Configuration

function initialize(

  options =
    {
      theme: "light",
      timeout: 5000
    }

) {

  console.log(options);

}

Real-World Example - API Response

const response =
  {
    users: []
  };

const
{
  users = [],
  total = 0
}
=
response;

Real-World Example - React Component

function Button(

  {

    color = "blue",

    size = "medium"

  }

) {

  return color;

}

Real-World Example - Pagination

function loadUsers(

  page = 1,

  limit = 20

) {

  console.log(page);
  console.log(limit);

}

Common Use Cases

• Function parameters.
• Configuration objects.
• API requests.
• React component props.
• Application settings.
• Object destructuring.
• Array destructuring.
• Database query options.
• Pagination.
• Validation helpers.

Common Mistakes

• Passing null expecting the default value.
• Using || instead of ??.
• Forgetting to supply an empty object during destructuring.
• Writing expensive expressions as default values.
• Placing required parameters after optional ones.
• Using mutable default objects carelessly.
• Confusing missing values with empty values.
• Ignoring parameter order.

Best Practices

• Prefer ES6 default parameters over manual fallback logic.
• Use ?? when preserving valid falsy values.
• Use options objects for many optional parameters.
• Keep default values simple and readable.
• Use destructuring defaults for configuration objects.
• Validate incoming values when necessary.
• Avoid unnecessary calculations in parameter lists.
• Document optional values clearly.
• Use meaningful defaults.
• Keep functions predictable.

Interview Questions

• What are default values in ES6?
• When are default parameters applied?
• What is the difference between || and ???
• Can default values use expressions?
• Can one parameter depend on another?
• How do destructuring defaults work?
• What happens when null is passed?
• Why is an empty object used during destructuring?
• Can constructors use default values?
• What are common production use cases?