menu

JavaScript/Typescript - 16 Topics

DEEP DIVE INTO

JavaScript/Typescript

Topic:Renaming and default values

menu

In JavaScript, you can rename variables and provide default values during destructuring. These features make object destructuring even more powerful and flexible. Let's dive deep into renaming and default values in JavaScript object destructuring:

Renaming Variables:

You can rename variables during object destructuring by using the : (colon) notation. This is helpful when the variable names you want to use differ from the property names in the object. Here's how you can rename variables:

javascriptconst person = { firstName: 'Alice', lastName: 'Johnson' };

const { firstName: first, lastName: last } = person;

console.log(first); // 'Alice'
console.log(last);  // 'Johnson'

In this example, we rename the properties firstName and lastName to first and last, respectively.

Default Values:

Default values allow you to specify a fallback value in case a property is undefined or absent in the object being destructured. You can set default values using the = (equals) operator. Here's how you can use default values:

javascriptconst person = { name: 'Bob', age: undefined };

const { name, age = 25 } = person;

console.log(name); // 'Bob'
console.log(age);  // 25

In this example, if the age property is undefined or not present in the person object, it defaults to 25.

Combined Renaming and Default Values:

You can use both renaming and default values together in the same destructuring assignment:

javascriptconst person = { first: 'Charlie', last: 'Brown' };

const { first: firstName, last: lastName, age = 30 } = person;

console.log(firstName); // 'Charlie'
console.log(lastName);  // 'Brown'
console.log(age);       // 30

In this example, we rename the first and last properties to firstName and lastName, and we provide a default value of 30 for the age property.

Nested Objects:

Renaming and default values can also be applied to nested objects within the destructuring pattern:

javascriptconst user = {
    info: {
        name: 'David',
        age: 25,
    },
};

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

console.log(userName); // 'David'
console.log(userAge);  // 25

Here, we rename and provide a default value for the nested properties name and age.

Dynamic Property Names:

You can use computed property names within the destructuring pattern, which can be helpful in various scenarios:

javascriptconst propertyName = 'age';
const person = { name: 'Eve', age: 40 };

const { name, [propertyName]: userAge } = person;

console.log(name);   // 'Eve'
console.log(userAge); // 40

In this example, the property name to destructure is computed dynamically based on the value of propertyName.

Object Destructuring in Function Parameters:

You can use renaming and default values in function parameters to simplify the extraction of values from objects:

javascriptfunction printUserInfo({ name, age = 30 }) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Frank' };
printUserInfo(person);

In this case, the printUserInfo function expects an object with a name property, and if age is not provided, it defaults to 30.

Caveat: Avoid Using undefined Properties:

Be cautious when using default values with properties that might be explicitly set to undefined. Default values only apply when a property is undefined or not present. If a property is explicitly set to undefined, the default value won't take effect.

javascriptconst person = { name: 'Grace', age: undefined };

const { name, age = 30 } = person;

console.log(name); // 'Grace'
console.log(age);  // undefined (not the default value 30)

In this example, even though age is explicitly set to undefined, it won't use the default value because the property exists.

Renaming and default values in object destructuring make your code more flexible and readable by allowing you to assign variables with customized names and handle missing or undefined properties gracefully. These features are especially useful when working with configuration objects or handling optional properties in function parameters.

1280 x 720 px