Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
JavaScript provides multiple ways to access object properties: dot notation, bracket notation, and optional chaining. Each has its use cases!
const user = {
name: 'Alice',
age: 25,
email: 'alice@example.com'
};
// Clean and readable
console.log(user.name); // 'Alice'
console.log(user.age); // 25
console.log(user.email); // 'alice@example.com'
// ✅ Use when:
// - Property name is valid identifier
// - Property name is known at code time
// - Want clean, readable codeconst user = {
'name': 'Alice',
'user-age': 25,
'first name': 'Alice'
};
// Access with any string
console.log(user['name']); // 'Alice'
console.log(user['user-age']); // 25
console.log(user['first name']); // 'Alice'
// ✅ Use when:
// - Property has special characters
// - Property name is dynamic/computed
// - Property name is a numberDot and bracket notation comparison
Using variables to access properties
Dynamic property names in object literals
const user = {
name: 'Alice'
// No address property!
};
// Unsafe access
console.log(user.address.street);
// ❌ TypeError: Cannot read property
// 'street' of undefined
// Must check manually
if (user.address &&
user.address.street) {
console.log(user.address.street);
}
// Verbose and tedious!const user = {
name: 'Alice'
// No address property!
};
// Safe access with ?.
console.log(user.address?.street);
// undefined (no error!)
// Short-circuits at first nullish
console.log(user?.address?.street?.zip);
// undefined (safe!)
// Clean and concise!Safe access to nested properties
Safe method calls with ?.()
Safe access to array elements and methods
const count = 0; const name = ''; const enabled = false; // OR treats all falsy as missing console.log(count || 10); // 10 ❌ console.log(name || 'User'); // 'User' ❌ console.log(enabled || true); // true ❌ // Loses valid 0, '', false values!
const count = 0; const name = ''; const enabled = false; // ?? only for null/undefined console.log(count ?? 10); // 0 ✅ console.log(name ?? 'User'); // '' ✅ console.log(enabled ?? true); // false ✅ // Preserves valid falsy values!
Perfect combination for safe defaults
Real-world usage patterns
Clean syntax: obj.prop
Use for known, valid identifiers
Dynamic access: obj[key]
Use for computed/special properties
Safe access: obj?.prop
Returns undefined if null/undefined
Default values: value ?? default
Only for null/undefined (not falsy)
user?.name ?? 'Guest'