Gestire condizioni complesse in JavaScript

di Morgan Pizzini, in HTML5, JavaScript,

Non di rado capita di trovarsi davanti alla classica cascata di if/else come la seguente.

var name = "Morgan";
if(name.toLowerCase() === 'morgan')
    console.log("Il tuo nome inizia per M")
else if(name.toLowerCase() === 'fabio')
    console.log("Il tuo nome inizia per F")
else if(name.toLowerCase() === 'carlo')
    console.log("Il tuo nome inizia per C")
else if(name.toLowerCase() === 'alberto')
    console.log("Il tuo nome inizia per A")
else console.log("Nessun caso trovato")

Il caso in questione è molto semplice, ma aiuta a capire i principali problemi di questa scrittura: ripetiamo più e più volte la stessa istruzione toLowerCase, la quale va ad appesantire la lettura di una sequenza di operazioni già in origine difficile da analizzare.

Il nostro obiettivo è quello di permettere a ogni sviluppatore che lavorerà sul nostro codice di comprendere immediatamente ciò che vogliamo il programma esegua. Il metodo più comune di semplificazione è l'utilizzo del blocco switch/case.

function GetInfo(name){
    switch(name.toLowerCase()){
        case "morgan":
            return "Il tuo nome inizia per M";
        case "fabio":
            return "Il tuo nome inizia per F";
        case "carlo":
            return "Il tuo nome inizia per C";
        case "alberto":
            return "Il tuo nome inizia per A";
        default:
            return: "Nessun caso trovato"
    }
}

La leggibilità è decisamente migliorata, ma possiamo fare uno step ulteriore: essendo JavaScript un linguaggio non tipizzato, possiamo creare oggetti con proprietà e valori a nostra discrezione. Di conseguenza possiamo costruire un oggetto che abbia come proprietà il case dell'esempio precedente, e come valore la stringa resitutita.

function GetInfo(name){
    const values = {
        "morgan": "Il tuo nome inizia per M",
        "fabio": "Il tuo nome inizia per F",
        "carlo": "Il tuo nome inizia per C",
        "alberto": "Il tuo nome inizia per A"
    }
    return values[name.toLowerCase()] ?? "Nessun caso trovato"
}

Utilizzando la variabile in ingresso puntiamo a una prioprietà all'interno dell'oggetto per ottenerne il valore. Nel caso la proprietà non esista, sarà l'operatore di nullish coalescing (??) a restituire la stringa di errore anzichè null.

Se volessimo applicare logica più complessa, possiamo anche restituire funzioni, come mostrato nell'esempio seguente, nel quale abbiamo utilizzato l'operatore ?. per non eseguire alcuna funzione nel caso in cui non vi sia riscontro e ritornare il valore di default (0).

function DoOperation(val1,val2,ops){
    const values = {
        "somma": (a,b) => a + b,
        "sottrazione": (a,b) => a - b
    }
    return values[ops.toLowerCase()]?.(val1,val2) ?? 0
}

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi