Snippet

Guarding Against Missing Prop Values Using Nullish Coalescing

The nullish coalescing operator (??) provides safe fallback defaults only when a value is strictly null or undefined. This is preferred over logical OR (||) because it correctly preserves valid falsy values like 0 or empty strings.

snippet.js

javascript

function ScoreDisplay({ score, defaultText }) {
  const resolvedScore = score ?? 0;
  const resolvedText = defaultText ?? 'Points';
 
  return (
    <div>
      <span>{resolvedScore}</span> {resolvedText}
    </div>
  );
}

react

Breakdown

const resolvedScore = score ?? 0;

Assigns score if defined; otherwise falls back to 0, correctly keeping an actual score of 0 intact.

const resolvedText = defaultText ?? 'Points';

Provides 'Points' as a fallback string whenever defaultText is nullish.

<span>{resolvedScore}</span> {resolvedText}

Safely renders the resolved values without risk of undefined runtime output.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Guarding Against Missing Prop Values Using Nullish Coalescing

Related