Object Destructuring Default Values and Aliasing

JavaScript object destructuring provides a concise syntax to extract properties from objects and bind them to distinct variables. This article covers how destructuring supports default values to handle missing properties, variable aliasing to rename extracted properties, and how to combine both features simultaneously to write resilient, readable code.

Default Values in Destructuring

When destructuring an object, a property might not exist or might be explicitly set to undefined. Default values allow you to define a fallback value that the variable will take if the property is not found.

Default values are assigned using the assignment operator (=):

const user = {
  name: 'Alex',
};

// 'role' is missing in the object, so it falls back to 'guest'
const { name, role = 'guest' } = user;

console.log(name); // "Alex"
console.log(role); // "guest"

The undefined vs. null Rule

Default values are only triggered when the property is strictly undefined. If a property contains any other falsy value—such as null, false, 0, or an empty string ""—the default value is ignored.

const settings = {
  theme: null,
};

const { theme = 'light' } = settings;

console.log(theme); // null (default value is not applied)

Aliasing (Renaming Variables)

Aliasing allows you to unpack a property from an object and assign it to a variable with a completely different name. This is useful for avoiding naming collisions or adhering to local naming conventions.

Aliasing uses a colon (:) after the object property key, followed by the new variable name:

const apiResponse = {
  user_id: 1042,
  user_email: 'alex@example.com',
};

// Rename 'user_id' to 'id' and 'user_email' to 'email'
const { user_id: id, user_email: email } = apiResponse;

console.log(id);    // 1042
console.log(email); // "alex@example.com"

// Note: 'user_id' and 'user_email' are not defined as variables

Combining Default Values and Aliasing

You can combine aliasing and default values in a single destructuring statement. The syntax places the alias first, followed by the default value assignment.

The syntax pattern is: { originalProperty: aliasName = defaultValue }

const config = {
  max_retries: undefined,
};

// Aliases 'max_retries' to 'retries' and sets a default of 3
const { max_retries: retries = 3, timeout_ms: timeout = 5000 } = config;

console.log(retries); // 3 (used default value)
console.log(timeout); // 5000 (used default value)

Function Parameter Destructuring

Both features are frequently used in function signatures to provide optional configuration options and cleaner internal variable names:

function initializeServer({ port: serverPort = 8080, host = 'localhost' } = {}) {
  console.log(`Server running at http://${host}:${serverPort}`);
}

initializeServer(); 
// Output: Server running at http://localhost:8080

initializeServer({ port: 3000 }); 
// Output: Server running at http://localhost:3000

By providing a fallback empty object = {} at the parameter level, the function can be called without any arguments without throwing a TypeError.