Always provide fallbacks when accessing properties or methods on values that could be undefined or null to prevent runtime errors. Use defensive programming patterns like logical OR operators, conditional checks, or nullish coalescing when available.
Always provide fallbacks when accessing properties or methods on values that could be undefined or null to prevent runtime errors. Use defensive programming patterns like logical OR operators, conditional checks, or nullish coalescing when available.
Examples of unsafe patterns:
// Unsafe - could throw if renderProps is undefined
const showMarkdown = computed(() => props.command.renderProps && props.command.renderProps.message)
// Unsafe - could throw if message/markdown is undefined
scaled: computed(() => (props.message || props.markdown).length > 100)
Examples of safe patterns:
// Safe - provides fallback value
const showMarkdown = computed(() => props.command.renderProps?.message ?? false)
// Or without optional chaining:
const showMarkdown = computed(() => props.command.renderProps && props.command.renderProps.message || false)
// Safe - provides empty string fallback
scaled: computed(() => (props.message || props.markdown || '').length > 100)
This prevents common runtime errors like “Cannot read property ‘x’ of undefined” and makes code more robust when dealing with optional or potentially missing data.
Enter the URL of a public GitHub repository