How to Set Defaults When Destructuring Array or Object in JavaScript?

Setting a default value when using the destructuring assignment syntax can be done simply by assigning a value, using the equals sign (=), to the variables we're unpacking (whether from an object or an array). For example:

const coordinates = { x: 100, y: 200 };
const { x = 0, y = 0 } = coordinates;

console.log(x); // 100
console.log(y); // 200

Or, using an array:

const coordinates = [100, 200];
const [x = 0, y = 0] = coordinates;

console.log(x); // 100
console.log(y); // 200

However, you must remember that the default value is only used when:

1. An object property or array value is explicitly set to undefined, or;
2. The expected object property or array value does not exist.

Except for the two cases mentioned above, all other values (including falsy values such as null, false, 0, etc.) will prevent the default initializer from being run (i.e. the default value won't be applied).

Let's consider the following examples to demonstrate some of these rules:

Destructuring Non-Existent Property/Values With Defaults

const coordinates = { x: 100 };
const { x = 0, y = 0 } = coordinates;

console.log(x); // 100
console.log(y); // 0

const coordinates = [100];
const [x = 0, y = 0] = coordinates;

console.log(x); // 100
console.log(y); // 0

Destructuring Explicitly undefined Property/Values With Defaults

const coordinates = { x: 100, y: undefined };
const { x = 0, y = 0 } = coordinates;

console.log(x); // 100
console.log(y); // 0

const coordinates = [100, undefined];
const [x = 0, y = 0] = coordinates;

console.log(x); // 100
console.log(y); // 0

Destructuring Assignment When Using Falsy Values

As explained earlier, falsy values (except undefined) prevent the default initializer from being run. For example:

const { x = 100 } = {};
console.log(x) // 100

const { x = 100 } = { x: undefined }
console.log(x) // 100

const { x = 100 } = { x: null }
console.log(x) // null

const { x = 100 } = { x: false }
console.log(x) // false

const { x = 100 } = { x: 0 }
console.log(x) // 0

const [x = 100] = [];
console.log(x); // 100

const [x = 100] = [undefined];
console.log(x); // 100

const [x = 100] = [null];
console.log(x) // null

const [x = 100] = [false];
console.log(x) // false

const [x = 100] = [0];
console.log(x) // 0

Destructuring Falsy Values With Defaults

Using the Logical OR Operator:

You could use the logical OR operator (||) to specify default values for falsy values (except undefined), for example:

const { x = 100 } = { x: null }
console.log(x || 33) // 33

const { x = 100 } = { x: undefined }
console.log(x || 33) // 100

const [x = 100] = [null];
console.log(x || 33) // 33

const [x = 100] = [undefined];
console.log(x || 33) // 100

Using Optional Chaining With Logical OR Operator:

Although, it's a little out of the scope of this article, still an alternative (and perhaps a better approach) would be to use optional chaining (?.) if possible. For example:

const coordinates = { x: 100, y: null };
const y = coordinates?.y || 33;

console.log(y); // 33

const coordinates = { x: 100, y: undefined };
const y = coordinates?.y || 33;

console.log(y); // 33

const coordinates = [100, null];
const y = coordinates?.[1] || 33;

console.log(y); // 33

const coordinates = [100, undefined];
const y = coordinates?.[1] || 33;

console.log(y); // 33

As you can see in the optional chaining examples, undefined values also fallback to the default value. This is because we don't need to use the destructuring assignment syntax with optional chaining.