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.

Master JavaScript with Deep Grasping Methodology!

Learn More