JavaScript Default Value Destructuring

Default value destructuring is a syntax mechanism in JavaScript that assigns a fallback expression to a variable during object or array destructuring. This fallback is evaluated and assigned exclusively when the targeted property or element in the source structure is strictly undefined or does not exist.

Trigger Condition

The default value is only applied if the extracted value is strictly equal to undefined (value === undefined). Falsy values such as null, 0, false, or "" (empty string) are considered valid values and will bypass the default assignment.

Object Destructuring

In object destructuring, the default value is assigned using the assignment operator (=) immediately following the property identifier.

const source = { a: 1, b: undefined, c: null };

const { 
  a = 10, 
  b = 20, 
  c = 30, 
  d = 40 
} = source;

// a: 1  (exists, bypasses default)
// b: 20 (strictly undefined, triggers default)
// c: null (is not undefined, bypasses default)
// d: 40 (does not exist, implicitly undefined, triggers default)

Array Destructuring

In array destructuring, defaults are applied based on the iterable’s positional indices. Out-of-bounds indices yield undefined, thereby triggering the default value.

const sequence = [100, undefined, null];

const [
  first = 0, 
  second = 0, 
  third = 0, 
  fourth = 0
] = sequence;

// first: 100
// second: 0 (strictly undefined)
// third: null (is not undefined)
// fourth: 0 (out of bounds, implicitly undefined)

Aliasing with Default Values

When renaming a variable during object destructuring (aliasing), the default value assignment must follow the new identifier. The syntax pattern is sourceProperty: targetVariable = defaultValue.

const record = { identifier: undefined };

const { identifier: id = 'default-id' } = record;

// id: 'default-id'

Lazy Evaluation

Default value expressions are evaluated lazily. The expression on the right side of the = is only executed if the default value is actually required.

const computeFallback = () => {
  console.log("Evaluated!");
  return 99;
};

// computeFallback() is NOT called because 'value' is defined
const { value = computeFallback() } = { value: 42 }; 

// computeFallback() IS called because 'missing' is undefined
const { missing = computeFallback() } = {}; 

Nested Destructuring with Defaults

Default values can be applied at multiple levels of a nested destructuring assignment. To prevent a TypeError when attempting to destructure properties from an undefined parent, a default empty object ({}) is often assigned to the parent level.

const payload = { data: undefined };

const { 
  data: { 
    status = 'inactive' 
  } = {} 
} = payload;

// status: 'inactive'
// The parent 'data' defaults to {}, allowing 'status' to be safely destructured and defaulted.

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 Value Destructuring

Trigger Condition

Object Destructuring

Array Destructuring

Aliasing with Default Values

Lazy Evaluation

Nested Destructuring with Defaults

​Trigger Condition

​Object Destructuring

​Array Destructuring

​Aliasing with Default Values

​Lazy Evaluation

​Nested Destructuring with Defaults

Trigger Condition

Object Destructuring

Array Destructuring

Aliasing with Default Values

Lazy Evaluation

Nested Destructuring with Defaults