Strutture condizionali in JavaScript per gestire stati di un’app

Introduzione

Le strutture condizionali in JavaScript, come if, else e switch, sono strumenti fondamentali per far reagire il codice in modo diverso in base a una condizione. Un uso molto pratico, e spesso sottovalutato, è la gestione degli stati di un’applicazione.

Per “stato” intendiamo la situazione corrente di un’app: ad esempio loading, success, error, empty, disabled o ready. Questo approccio è comune in interfacce web, dashboard, form, e-commerce e applicazioni SPA. Sapere come scegliere tra if/else e switch ti aiuta a scrivere codice più leggibile, più facile da mantenere e meno soggetto a bug.

In questo tutorial vedremo un esempio concreto: una piccola funzione che decide cosa mostrare all’utente in base allo stato di caricamento dei dati. È un caso reale e molto utile, perché capita spesso di dover gestire messaggi diversi a seconda della situazione corrente.

Codice completo

// Simuliamo gli stati possibili di una schermata
const appState = "loading"; // prova anche: "success", "error", "empty", "offline"

// Dati che potrebbero arrivare da un´API
const users = ["Luca", "Giulia", "Marco"];

// Funzione che restituisce un messaggio in base allo stato
function getViewMessage(state, data) {
  switch (state) {
    case "loading":
      return "Caricamento in corso...";

    case "success":
      if (data.length > 0) {
        return `Dati caricati correttamente. Utenti trovati: ${data.join(", ")}`;
      } else {
        return "Caricamento completato, ma non ci sono utenti disponibili.";
      }

    case "empty":
      return "Nessun contenuto da mostrare.";

    case "error":
      return "Si è verificato un errore durante il caricamento dei dati.";

    case "offline":
      return "Connessione assente. Controlla la rete e riprova.";

    default:
      return "Stato non riconosciuto.";
  }
}

// Decidiamo il messaggio finale
const message = getViewMessage(appState, users);

// Simuliamo il rendering in console
console.log(message);

// Esempio aggiuntivo: controllo con if/else per abilitare un pulsante
const isLoggedIn = true;
const hasPermission = false;

if (isLoggedIn && hasPermission) {
  console.log("Pulsante ´Modifica´ attivo");
} else if (isLoggedIn && !hasPermission) {
  console.log("Pulsante ´Modifica´ visibile ma disabilitato");
} else {
  console.log("Pulsante ´Modifica´ nascosto");
}

Spiegazione

Il codice sopra mostra due modi diversi di usare le strutture condizionali:

switch per gestire uno stato principale dell’app.
if/else per controllare condizioni più specifiche all’interno di uno stato.

1. Perché usare switch per gli stati

Quando hai una variabile che può assumere diversi valori discreti, come "loading", "success" o "error", lo switch è spesso la scelta più leggibile. Ogni case rappresenta uno scenario preciso.

Nel nostro esempio, la funzione getViewMessage riceve due parametri:

state: lo stato corrente dell’app;
data: i dati eventualmente disponibili.

Se lo stato è "loading", la funzione restituisce un messaggio di attesa. Se è "error", restituisce un messaggio di errore. Se non riconosce lo stato, entra nel default, che funziona come caso di sicurezza.

2. Perché combinare switch e if

All’interno del caso "success" usiamo un if per fare un controllo aggiuntivo: se i dati sono presenti, mostriamo l’elenco degli utenti; altrimenti segnaliamo che il caricamento è andato a buon fine ma non ci sono elementi da visualizzare.

Questo è un pattern molto comune: switch per selezionare il macro-scenario, if/else per gestire i dettagli interni di quello scenario.

3. Il secondo esempio con if/else

La seconda parte del codice mostra un caso tipico di interfaccia: decidere se un pulsante deve essere attivo, visibile o nascosto. Qui usiamo isLoggedIn e hasPermission per modellare la logica di accesso.

Se l’utente è loggato e ha i permessi, il pulsante è attivo.
Se è loggato ma non ha i permessi, il pulsante è visibile ma disabilitato.
Se non è loggato, il pulsante viene nascosto.

Questo tipo di logica è molto frequente in applicazioni reali, ad esempio per gestire:

azioni su contenuti protetti;
stati di caricamento di componenti;
messaggi di feedback all’utente;
abilitazione o disabilitazione di pulsanti e menu.

Best practice

Quando usi le strutture condizionali per gestire stati di un’app, ci sono alcune buone pratiche da seguire per mantenere il codice pulito e robusto.

Usa valori di stato coerenti: preferisci stringhe ben definite come "loading", "success", "error". Evita valori ambigui o scritti in modi diversi.
Centralizza la logica: quando possibile, raggruppa la gestione degli stati in una funzione dedicata. Questo riduce duplicazioni e rende il codice più facile da testare.
Prevedi sempre un default: nello switch, il caso default è utile per intercettare stati imprevisti.
Evita if troppo annidati: se la logica diventa complessa, valuta di separare il codice in funzioni più piccole o di usare una mappa di stato.
Usa nomi chiari: variabili come appState, isLoggedIn e hasPermission aiutano a capire subito la logica.
Non abusare di switch: se hai condizioni basate su intervalli, confronti complessi o combinazioni di booleani, if/else è spesso più adatto.

Un errore comune è usare lo switch anche quando la logica dipende da espressioni come “maggiore di”, “minore di” o “compreso tra”. In questi casi, if/else è più naturale e leggibile.

Per esempio, se devi decidere un livello di accesso in base a un punteggio, meglio scrivere:

if (score >= 90) {
  // ...
} else if (score >= 70) {
  // ...
} else {
  // ...
}

Usare switch per questo tipo di logica sarebbe innaturale e meno chiaro.

Riepilogo

Le strutture condizionali sono uno degli strumenti più importanti in JavaScript. In particolare:

if/else è ideale per condizioni booleane, confronti e logiche complesse;
switch è perfetto per gestire stati o valori discreti ben definiti;
combinare entrambi permette di costruire logiche di interfaccia chiare e realistiche.

Nel nostro esempio abbiamo visto come:

usare switch per selezionare il messaggio in base allo stato dell’app;
usare if dentro uno switch per verificare se i dati sono presenti;
usare if/else per decidere il comportamento di un pulsante in base a login e permessi.

Se impari a ragionare in termini di stati, il tuo codice diventa più vicino al modo in cui funzionano davvero le applicazioni moderne. È un passo importante per passare da semplici esercizi a soluzioni professionali.

Approfondisci con risorse ufficiali

MDN Web Docs - if...else: documentazione completa e aggiornata sulle condizioni in JavaScript.
MDN Web Docs - switch: guida ufficiale al costrutto switch e ai casi d’uso corretti.
MDN Web Docs - JavaScript Guide: per approfondire la sintassi base e le logiche di controllo.
ECMAScript Language Specification: il riferimento tecnico ufficiale del linguaggio JavaScript.

Studiare queste risorse ti aiuterà a consolidare i concetti e a riconoscere quando usare ogni struttura condizionale nel modo più efficace.

Add as preferred source on Google