Truthy e Falsy in JavaScript: evitare errori nel rendering condizionale dell’interfaccia

by Anastasia P.
Add as preferred source on Google
SHARE
Truthy e Falsy in JavaScript: evitare errori nel rendering condizionale dell’interfaccia
© Guida-HTML5.it

Introduzione

In JavaScript ogni valore può essere valutato in un contesto booleano, ad esempio all’interno di un’istruzione if, di un operatore ternario o di un’espressione con && e ||. Un valore viene considerato truthy quando si comporta come true, mentre è falsy quando si comporta come false.

Questo comportamento è particolarmente utile quando si costruiscono interfacce dinamiche. Possiamo, per esempio, mostrare un messaggio solo se esiste, visualizzare un badge quando un contatore è maggiore di zero oppure decidere quale testo inserire nel DOM in base allo stato di un oggetto.

Tuttavia, usare la truthiness senza considerare il significato reale dei dati può produrre bug difficili da individuare. Il caso più comune riguarda il numero 0: è falsy, ma spesso rappresenta un valore valido, come una quantità, un punteggio o il numero di notifiche non lette.

Codice completo

const prodotto = {
  nome: "Tastiera meccanica",
  prezzo: 0,
  recensioni: 0,
  descrizione: "",
  disponibile: true
};

function renderProdotto(prodotto) {
  const prezzo = prodotto.prezzo === 0
    ? "Gratuito"
    : `${prodotto.prezzo.toFixed(2)} €`;

  const recensioni = prodotto.recensioni === 0
    ? "Nessuna recensione"
    : `${prodotto.recensioni} recensioni`;

  const descrizione = prodotto.descrizione
    ? prodotto.descrizione
    : "Descrizione non disponibile.";

  const stato = prodotto.disponibile
    ? "Disponibile"
    : "Non disponibile";

  return `
    <article class="prodotto">
      <h2>${prodotto.nome}</h2>
      <p>Prezzo: ${prezzo}</p>
      <p>Recensioni: ${recensioni}</p>
      <p>${descrizione}</p>
      <strong>${stato}</strong>
    </article>
  `;
}

const contenitore = document.querySelector("#app");

if (contenitore) {
  contenitore.innerHTML = renderProdotto(prodotto);
}

Spiegazione

Controllare l’esistenza di un testo

Nel codice, prodotto.descrizione è una stringa vuota. Una stringa vuota è falsy, quindi questa condizione:

const descrizione = prodotto.descrizione
  ? prodotto.descrizione
  : "Descrizione non disponibile.";

sceglie il testo alternativo. La stessa logica gestisce anche valori come null o undefined, purché la proprietà venga letta in sicurezza.

Questa tecnica è utile per testi opzionali, etichette, messaggi di errore e contenuti provenienti da un’API. È però importante ricordare che una stringa composta solo da spazi, ad esempio " ", è truthy. Se deve essere considerata vuota, occorre usare trim():

const testo = "   ";

const messaggio = testo.trim()
  ? testo
  : "Nessun contenuto disponibile";

Non confondere zero con un dato assente

Il prezzo e il numero di recensioni valgono 0. Poiché zero è falsy, una condizione generica come questa sarebbe rischiosa:

// Da evitare quando 0 è un valore valido
const recensioni = prodotto.recensioni
  ? `${prodotto.recensioni} recensioni`
  : "Dato non disponibile";

In questo caso JavaScript considererebbe lo zero come assente, anche se il dato è presente e corretto. Per distinguere esplicitamente il valore zero da null o undefined, è preferibile usare un controllo più preciso:

const recensioni = prodotto.recensioni == null
  ? "Dato non disponibile"
  : `${prodotto.recensioni} recensioni`;

L’operatore == null è una delle poche forme di uguaglianza non stretta utili: intercetta sia null sia undefined, ma non considera uguali valori come 0, false o una stringa vuota.

Usare l’operatore ternario per il rendering

L’operatore ternario permette di scegliere rapidamente tra due rappresentazioni:

const stato = prodotto.disponibile
  ? "Disponibile"
  : "Non disponibile";

Qui la proprietà è un booleano reale, quindi la valutazione implicita è chiara. Per condizioni più articolate è meglio evitare ternari annidati e creare variabili con nomi descrittivi, così il template rimane leggibile.

Attenzione all’operatore && nel markup

Una tecnica frequente consiste nel mostrare un elemento solo quando una condizione è truthy:

const badge = prodotto.recensioni && `
  <span>${prodotto.recensioni} recensioni</span>
`;

Se recensioni vale zero, l’espressione restituisce proprio 0, non una stringa vuota. Inserendo il risultato nel template si potrebbe quindi visualizzare accidentalmente uno zero. Per evitarlo, rendiamo esplicita la condizione:

const badge = prodotto.recensioni > 0
  ? `<span>${prodotto.recensioni} recensioni</span>`
  : "";

Best practice

  • Usa la truthiness per condizioni semplici, come verificare se un testo opzionale esiste.
  • Non usare un controllo generico per numeri in cui 0 è un valore valido.
  • Per distinguere dati assenti da dati falsy, valuta l’uso di value == null, value === null oppure value === undefined.
  • Confronta esplicitamente i numeri quando esprimi una regola di business: quantita > 0 è più chiaro di quantita.
  • Normalizza i testi con trim() se una stringa contenente solo spazi deve essere considerata vuota.
  • Evita ternari annidati nei template: estrai la logica in variabili o funzioni dedicate.
  • Quando inserisci dati forniti dall’utente nel DOM, preferisci textContent o strumenti di sanitizzazione per ridurre i rischi XSS. innerHTML va usato con dati considerati sicuri.

Riepilogo

I valori truthy e falsy semplificano il rendering condizionale e permettono di scrivere codice compatto. Un testo vuoto, null, undefined, false, NaN e 0 sono falsy; quasi tutti gli altri valori sono truthy, inclusi array e oggetti vuoti.

La regola più importante è distinguere la verità logica dal significato del dato. Zero può indicare “nessuna recensione”, ma non necessariamente “dato mancante”. Scrivere condizioni esplicite nei punti critici rende l’interfaccia più affidabile, leggibile e semplice da mantenere.

Approfondisci con risorse ufficiali

Add as preferred source on Google
SHARE