Snippet

Unterscheidung von Nullish Coalescing und logischem ODER beim bedingten JSX-Rendering

In JavaScript sind `0`, `""` und `false` falsy Werte. Die Verwendung des logischen ODER-Operators (`||`) in JSX führt dazu, dass der Zähler 0 fälschlicherweise durch Fallback-Text ersetzt wird. Der Nullish-Coalescing-Operator (`??`) prüft gezielt nur auf `null` und `undefined`.

snippet.js

javascript

import React from 'react';
 
export function UserMetricBadge({ count, label, unreadCount }) {
  // Logical OR (||) treats 0 as falsy, triggering the fallback incorrectly
  const faultyCountDisplay = count || 'No data';
 
  // Nullish coalescing (??) only triggers on null or undefined, preserving 0
  const safeCountDisplay = count ?? 'N/A';
 
  // Optional chaining (?.) paired with ?? handles deeply nested fallbacks safely
  const badgeText = unreadCount?.badge ?? 0;
 
  return (
    <div className="metric-badge">
      <span className="label">{label}:</span>
      <span className="value">{safeCountDisplay}</span>
      <span className="unread">Unread: {badgeText}</span>
    </div>
  );
}

react

Erklärung

const faultyCountDisplay = count || 'No data';

Wertet zu 'No data' aus, wenn count 0 ist, da 0 bei der JavaScript-Typumwandlung falsy ist.

const safeCountDisplay = count ?? 'N/A';

Wertet zu 0 aus, wenn count 0 ist, und greift nur bei null oder undefined auf 'N/A' zurück.

const badgeText = unreadCount?.badge ?? 0;

Liest eine verschachtelte Eigenschaft sicher über Optional Chaining aus und setzt einen Standardwert.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Unterscheidung von Nullish Coalescing und logischem ODER beim bedingten JSX-Rendering

Verwandt