Developed By
Gautam Kumar - Full stack developer
DEEP DIVE INTO
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
:
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 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.
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.
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.
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
.
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.
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.