Optional chaining (?.) provides a safe way to access nested object properties without checking each level.
Basic Syntax
Loading code block...
Property Access
Loading code block...
Method Calls
Loading code block...
Array Access
Loading code block...
With Nullish Coalescing
Loading code block...
Function Parameters
Loading code block...
Object Methods
Loading code block...
Delete Operator
Loading code block...
Short-Circuiting
Loading code block...
Class Properties
Loading code block...
API Response Handling
Loading code block...
Event Handling
Loading code block...
Common Patterns
Loading code block...
When NOT to Use
Loading code block...
TypeScript Integration
Loading code block...
Best Practices
Use Optional Chaining When:
✓ Property might not exist
✓ Object might be null/undefined
✓ Accessing API response data
✓ Working with optional config
Combine With:
✓ Nullish coalescing (??) for defaults
✓ Try-catch for actual errors
✓ Type guards for type narrowing
Avoid:
✗ Hiding genuine errors
✗ Overusing on required properties
✗ Using || instead of ?? for defaults
✗ Excessive chaining depth
Performance:
✓ No significant overhead
✓ Short-circuits efficiently
✓ Same as manual null checks
Conclusion
Optional chaining (?.) simplifies safe property access and eliminates verbose null checks. Use it with nullish coalescing (??) for default values, but don't overuse it to hide errors or on properties that should always exist. It's perfect for API responses, configuration objects, and any data where properties might be missing.