What is destructuring with default values and renaming?
Object destructuring can rename variables and supply fallback values together.
Renaming — { name: userName } pulls name into a variable called userName.
Defaults — { role = "guest" } uses a fallback when the property is missing.
Combined — { role: userRole = "guest" } does both at once.
Note: defaults apply only for undefined, not for null.
// Default values
const { name = 'Anonymous', age = 0 } = { name: 'John' };
console.log(name); // 'John' (from object)
console.log(age); // 0 (default, age not in object)
// Renaming
const { name: firstName, age: userAge } = { name: 'John', age: 30 };
console.log(firstName); // 'John'
console.log(userAge); // 30
// console.log(name); // ReferenceError (name not defined, renamed!)
// Combined
const { name: userName = 'Guest', role = 'user' } = { name: 'Alice' };
console.log(userName); // 'Alice'
console.log(role); // 'user' (default)
// In function parameters
function createUser({ name = 'Guest', email = '', role = 'user' } = {}) {
return { name, email, role };
}
createUser({ name: 'John' }); // { name: 'John', email: '', role: 'user' }
createUser(); // { name: 'Guest', email: '', role: 'user' }= provides defaults for undefined properties. : renames the variable. Combined: { prop: newName = default }.
The = {} default on the function parameter handles the case when no argument is passed at all. This pattern is extremely common in real-world JavaScript.
Show all three: default (= value), rename (: newName), and combined (: newName = value). The function parameter pattern with = {} is the most practical use case.
Defaults only apply when the value is undefined (not null, 0, or '').