Introduzione
In JavaScript, ogni valore può essere valutato come true o false quando viene usato in un contesto booleano, ad esempio dentro un if, un while o un operatore logico. Questo comportamento si basa sul concetto di truthy e falsy.
Un valore truthy è un valore che JavaScript considera vero, anche se non è il booleano true. Un valore falsy, invece, è un valore che JavaScript considera falso, anche se non è il booleano false.
Questo tutorial si concentra su un aspetto molto pratico: come usare truthy e falsy per controllare la presenza di dati in oggetti e strutture annidate. È un caso reale e utile, perché in molte applicazioni non basta sapere se una variabile esiste: bisogna anche verificare se contiene davvero un valore utilizzabile.
Per esempio, quando lavori con dati provenienti da API, form o configurazioni, puoi incontrare proprietà mancanti, stringhe vuote, valori nulli o numeri pari a zero. Capire bene truthy e falsy ti aiuta a scrivere controlli più puliti, evitando errori e codice ridondante.
Codice completo
// Esempio: controllo sicuro di dati annidati usando truthy e falsy
const utenti = [
{
nome: "Luca",
profilo: {
email: "[email protected]",
preferenze: {
temaScuro: true
}
}
},
{
nome: "Sara",
profilo: {
email: "",
preferenze: {
temaScuro: false
}
}
},
{
nome: "Marco",
profilo: null
},
{
nome: "Giulia"
}
];
function mostraInfoUtente(utente) {
// Controllo della presenza del profilo
if (utente.profilo) {
console.log(`Utente: ${utente.nome}`);
// Controllo della presenza di email non vuota
if (utente.profilo.email) {
console.log(`Email: ${utente.profilo.email}`);
} else {
console.log("Email mancante o vuota");
}
// Controllo della preferenza tema scuro
if (utente.profilo.preferenze && utente.profilo.preferenze.temaScuro) {
console.log("Tema scuro attivo");
} else {
console.log("Tema scuro non attivo o preferenze assenti");
}
} else {
console.log(`Utente ${utente.nome}: profilo non disponibile`);
}
console.log("---");
}
for (const utente of utenti) {
mostraInfoUtente(utente);
}
// Esempio pratico con valore numerico
const account = {
credito: 0
};
if (account.credito) {
console.log("Hai credito disponibile");
} else {
console.log("Credito assente o pari a zero");
}
// Versione più precisa quando 0 è un valore valido
if (account.credito !== null && account.credito !== undefined) {
console.log(`Credito presente: ${account.credito}`);
} else {
console.log("Credito non impostato");
}Spiegazione
Nel codice sopra abbiamo usato i valori truthy e falsy per verificare la presenza di proprietà annidate senza scrivere controlli troppo complessi. Vediamo i punti chiave.
1. Verificare se un oggetto esiste
Quando scriviamo if (utente.profilo), JavaScript valuta il contenuto di profilo come booleano. Se il valore è un oggetto, il controllo passa perché gli oggetti sono truthy. Se invece è null, il controllo fallisce perché null è falsy.
2. Verificare una stringa non vuota
Nel caso di utente.profilo.email, una stringa vuota "" è falsy. Questo significa che il controllo if (utente.profilo.email) ci permette di distinguere facilmente tra un indirizzo presente e uno vuoto.
Attenzione però: questa tecnica funziona bene solo se una stringa vuota non è considerata un valore valido. Se invece vuoi accettarla, devi usare un controllo più esplicito.
3. Controllare proprietà annidate
La condizione utente.profilo.preferenze && utente.profilo.preferenze.temaScuro sfrutta il comportamento short-circuit di &&. JavaScript valuta la seconda parte solo se la prima è truthy. In questo modo evitiamo errori come “Cannot read properties of undefined”.
Questa tecnica è molto utile quando non sei sicuro che tutte le proprietà intermedie esistano.
4. Il caso speciale dello zero
Il valore 0 è falsy. Questo può creare confusione, perché in certi casi zero è un dato valido, non un’assenza di valore. Nel nostro esempio, account.credito vale 0, quindi il primo controllo fallisce e il messaggio dice che il credito è assente o pari a zero.
Se però vuoi distinguere tra 0 e null/undefined, devi usare un controllo più preciso:
- account.credito !== null
- account.credito !== undefined
In questo modo non confondi un valore valido pari a zero con un valore mancante.
Best practice
- Usa truthy/falsy per controlli rapidi e leggibili quando vuoi verificare la presenza di oggetti, stringhe non vuote o array non vuoti.
- Non usare truthy/falsy in modo cieco con i numeri: il valore 0 è falsy, ma spesso è un dato valido.
- Quando un valore può essere zero, fai controlli espliciti con !== null e !== undefined.
- Evita catene troppo lunghe di && se il codice diventa difficile da leggere. In questi casi valuta l’uso di variabili intermedie o dell’optional chaining.
- Considera il contesto del dato: una stringa vuota può essere un errore oppure una scelta valida, dipende dal dominio dell’applicazione.
- Usa i falsy con attenzione nei form: un campo vuoto e un campo non compilato possono sembrare uguali, ma non sempre lo sono.
Riepilogo
Truthy e falsy sono uno dei meccanismi più utili di JavaScript per scrivere condizioni concise e intelligenti. In questo tutorial abbiamo visto come sfruttarli per controllare dati annidati e verificare la presenza di proprietà in modo semplice.
Il vantaggio principale è la leggibilità: puoi scrivere controlli brevi senza dover confrontare ogni volta un valore con true o false. Tuttavia, è importante ricordare che non tutti i falsy significano “assenza di dato”. Il caso di 0 è il più classico: è falsy, ma spesso rappresenta un valore reale e significativo.
La regola pratica è questa: usa truthy e falsy quando vuoi verificare rapidamente se un valore è presente, ma passa a controlli espliciti quando il dominio dell’applicazione richiede precisione.
Approfondisci con risorse ufficiali
- MDN Web Docs - Truthy: documentazione chiara sul comportamento dei valori truthy in JavaScript.
- MDN Web Docs - Falsy: elenco e spiegazione dei valori falsy.
- MDN Web Docs - Logical AND (&&): utile per capire lo short-circuit nei controlli annidati.
- MDN Web Docs - Optional chaining (?.): alternativa moderna per accedere in modo sicuro a proprietà annidate.
- MDN Web Docs - JavaScript data types: per approfondire come i diversi tipi di dato si comportano nei contesti booleani.