> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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`.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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.
```javascript theme={"dark"}
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
