JavaScript Default Parameter

Default parameters allow JavaScript function parameters to be initialized with default values if undefined is passed or if no argument is provided during the function invocation.

function functionName(param1 = defaultValue1, param2 = defaultValue2) {
  // function body
}

Evaluation Mechanics

Strict undefined Trigger The default value is applied strictly when the argument is omitted or explicitly passed as undefined. Other falsy values, such as null, 0, false, or "" (empty string), are considered valid arguments and will bypass the default parameter assignment.

function evaluateTrigger(val = "default") {
  return val;
}

evaluateTrigger();          // "default" (omitted)
evaluateTrigger(undefined); // "default" (explicit undefined)
evaluateTrigger(null);      // null
evaluateTrigger(0);         // 0

Call-Time Evaluation Unlike some languages where default parameters are evaluated at parse time, JavaScript evaluates default parameters at call time (execution time). If the default value is a reference type (like an Array or Object), a new instance is allocated in memory for every function invocation that triggers the default.

function appendValue(val, arr = []) {
  arr.push(val);
  return arr;
}

appendValue(1); // [1]
appendValue(2); // [2] (a new array is instantiated)

Parameter Scope and Left-to-Right Evaluation Parameters defined in the function signature form their own scope, which sits between the outer scope and the function body’s inner scope. Default parameters are evaluated sequentially from left to right. Because of this left-to-right evaluation, a default parameter can reference preceding parameters. However, attempting to reference a parameter that appears later in the signature results in a ReferenceError due to the Temporal Dead Zone (TDZ).

// Valid: 'y' references preceding parameter 'x'
function sequential(x = 10, y = x * 2) {
  return [x, y];
}
sequential(); // [10, 20]

// Invalid: 'a' references 'b' before 'b' is initialized
function tdzViolation(a = b, b = 5) {
  return [a, b];
}
tdzViolation(); // ReferenceError: Cannot access 'b' before initialization

Function Calls as Default Values Because defaults are evaluated at call time, you can assign the return value of a function execution as a default parameter. The assigned function will only execute if the default parameter is triggered.

function generateId() {
  console.log("Evaluated!");
  return Math.random();
}

function register(id = generateId()) {
  return id;
}

register(42); // generateId is not called
register();   // Logs: "Evaluated!", returns random number

Interaction with Destructuring

Default parameters are frequently combined with object or array destructuring to provide fallback values for nested properties, as well as a fallback for the destructured object itself.

// Provides defaults for properties, and an empty object fallback for the parameter
function parseConfig({ host = "localhost", port = 80 } = {}) {
  return `${host}:${port}`;
}

parseConfig({ port: 443 }); // "localhost:443"
parseConfig();              // "localhost:80"

Tired of Poor JavaScript Skills? Fix That With Deep Grasping!Learn More

Functions

Methods

Constructors

Classes

Destructuring

Decorators

Modules

Accessors

Variables

Fields

Parameters

Error Handling

Control Flow

Statement Forms

Loops

Primitive Types

Comments

Access Operators

Spread Operators

Call Operators

Conditional Operators

Logical Operators

Equality Operators

Relational Operators

Arithmetic Operators

Assignment Operators

Update Operators

Unary Operators

Yield Operators

Bitwise Operators

Shift Operators

JavaScript Default Parameter

Evaluation Mechanics

Interaction with Destructuring

​Evaluation Mechanics

​Interaction with Destructuring

Evaluation Mechanics

Interaction with Destructuring