JavaScript Destructuring: Default Values and Renaming Variables

JavaScript destructuring is an ES6 feature that allows you to extract values from arrays and properties from objects and assign them to variables. Two useful destructuring features are default values and variable renaming.

Default values let you provide fallback values when an extracted value is undefined. Renaming variables allows you to assign an object’s property value to a variable with a different name.

These features make JavaScript code more flexible and readable, especially when working with objects, arrays, function parameters, and API responses.

What Are Default Values in JavaScript Destructuring?

Default values allow you to specify a fallback value for a variable when the corresponding value being destructured is undefined.

If the value exists, JavaScript uses that value. If the value is missing or undefined, JavaScript uses the specified default.

Default values work with both array destructuring and object destructuring.

Default Values in Array Destructuring

In array destructuring, you can assign default values to individual variables using the assignment operator (=).

Example of Array Default Values

const colors = ["Red"];

const [first, second = "Blue"] = colors;

console.log(first);
console.log(second);

Output:

Red
Blue

In this example, the array contains only one element. The variable first receives "Red", while second receives the default value "Blue" because the second array element is missing.

Default Values When an Element Is Undefined

Default values are also used when an array element explicitly contains undefined.

const numbers = [10, undefined, 30];

const [first, second = 20, third] = numbers;

console.log(first);
console.log(second);
console.log(third);

Output:

10
20
30

The second array element is undefined, so JavaScript assigns 20 to second.

However, a default value is not used when the element is null.

const [value = 100] = [null];

console.log(value);

Output:

null

The value remains null because destructuring defaults apply only when the extracted value is undefined.

Default Values in Object Destructuring

Object destructuring allows you to provide default values for properties that are missing or contain undefined.

Example of Object Default Values

const user = {
    name: "Alex"
};

const { name, age = 25 } = user;

console.log(name);
console.log(age);

Output:

Alex
25

The object contains the name property but does not contain the age property. Therefore, JavaScript assigns the default value 25 to age.

Default Values for Undefined Properties

const product = {
    name: "Laptop",
    price: undefined
};

const { name, price = 45000 } = product;

console.log(name);
console.log(price);

Output:

Laptop
45000

Because price is explicitly set to undefined, JavaScript uses the default value 45000.

Default Values Do Not Replace Null

A default value does not replace null, 0, false, or an empty string.

const settings = {
    username: null,
    notifications: false,
    limit: 0,
    theme: ""
};

const {
    username = "Guest",
    notifications = true,
    limit = 10,
    theme = "light"
} = settings;

console.log(username);
console.log(notifications);
console.log(limit);
console.log(theme);

Output:

null
false
0

The empty final line represents the empty string.

All four values are preserved because none is undefined. This behavior is important when working with user settings and application data.

Default Values in Function Parameters with Destructuring

You can combine default values with destructured function parameters. This is useful when a function accepts an object that may contain optional properties.

function displayUser({ name = "Guest", city = "Unknown" } = {}) {
    console.log(`Name: ${name}`);
    console.log(`City: ${city}`);
}

displayUser({ name: "Alex" });
displayUser();

Output:

Name: Alex
City: Unknown
Name: Guest
City: Unknown

Here, name and city have their own default values. The outer = {} also allows the function to be called without an argument.

Without that outer default, calling displayUser() would cause an error because JavaScript could not destructure properties from undefined.

What Is Variable Renaming in JavaScript Destructuring?

Variable renaming allows you to assign an object property’s value to a variable with a different name.

In object destructuring, you use a colon (:) to specify the new variable name.

The syntax is:

const { propertyName: newVariableName } = object;

Here, propertyName identifies the property in the object, while newVariableName is the variable that receives its value.

Renaming Variables in Object Destructuring

Basic Example

const user = {
    name: "Sarah",
    age: 24
};

const { name: userName, age: userAge } = user;

console.log(userName);
console.log(userAge);

Output:

Sarah
24

In this example:

name is the original property name.
userName is the new variable name.
age is the original property name.
userAge is the new variable name.

The original object remains unchanged.

Why Is Variable Renaming Useful?

Variable renaming is useful when a property name is too generic, conflicts with another variable, or needs a more descriptive name in the current context.

const employee = {
    name: "John",
    department: "IT"
};

const { name: employeeName, department: employeeDepartment } = employee;

console.log(employeeName);
console.log(employeeDepartment);

Output:

John
IT

The variable names make it clear that the values belong to an employee.

Combining Default Values and Variable Renaming

You can use both features in the same destructuring statement. This allows you to rename a variable and provide a fallback value simultaneously.

Example

const user = {
    name: "Alex"
};

const {
    name: userName,
    age: userAge = 25
} = user;

console.log(userName);
console.log(userAge);

Output:

Alex
25

The name property is assigned to userName. The age property is assigned to userAge, but because age is missing, the default value 25 is used.

This approach is useful when working with objects that contain optional properties.

Renaming Variables in Nested Destructuring

Variable renaming also works with nested objects.

const user = {
    name: "Alex",
    address: {
        city: "Hyderabad",
        country: "India"
    }
};

const {
    address: {
        city: userCity,
        country: userCountry
    }
} = user;

console.log(userCity);
console.log(userCountry);

Output:

Hyderabad
India

The nested city property is assigned to userCity, and the country property is assigned to userCountry.

Notice that address is used to identify the nested object, while userCity and userCountry are the variables created to store the extracted values.

Renaming Variables in Array Destructuring

Array destructuring does not use property names, so it does not have the same colon-based renaming syntax as object destructuring.

Instead, you choose the variable names directly according to the positions of the array elements.

const userDetails = ["Alex", 25, "Hyderabad"];

const [userName, userAge, userCity] = userDetails;

console.log(userName);
console.log(userAge);
console.log(userCity);

Output:

Alex
25
Hyderabad

Here, the array positions determine which values are assigned to the variables. You can choose descriptive variable names without needing to rename any properties.

Default Values vs Variable Renaming

Feature	Default Values	Variable Renaming
Purpose	Provides a fallback for `undefined`	Assigns a property value to a differently named variable
Syntax	`property = defaultValue`	`property: newName`
Mainly used with	Arrays and objects	Object destructuring
Changes the original object	No	No
Can be combined with the other feature	Yes	Yes

Both features help make destructuring more flexible and easier to understand.

Common Mistakes to Avoid

Assuming Defaults Replace Null

const { age = 18 } = { age: null };

console.log(age);

Output:

null

The default value is used only when the value is undefined, not when it is null.

Using the Original Property Name as the New Variable

const user = {
    name: "Alex"
};

const { name: userName } = user;

console.log(userName);

Output:

Alex

After this declaration, userName is the variable created by the destructuring assignment. The statement does not create a separate variable named name.

Confusing Property Renaming with Object Property Renaming

const user = {
    name: "Alex"
};

const { name: fullName } = user;

console.log(fullName);
console.log(user.name);

Output:

Alex
Alex

The destructuring syntax renames the local variable, not the property in the original object.

Frequently Asked Questions

What are default values in JavaScript destructuring?

Default values provide fallback values when a destructured array element or object property is undefined.

Can I use default values with both arrays and objects?

Yes. Default values work with both array and object destructuring.

How do I rename a variable in object destructuring?

Use the syntax const { name: userName } = user;. The name property value is assigned to the variable userName.

Can I combine default values and variable renaming?

Yes. For example, const { age: userAge = 25 } = user; renames age to userAge and uses 25 when the property value is undefined.

Do default values replace null values?

No. Destructuring defaults apply when the value is undefined or missing, not when it is null.

Does variable renaming change the original object?

No. Renaming only changes the local variable name used to receive the property value.

What to Learn Next

Continue learning JavaScript ES6 features with these tutorials: