Come semplificare le istruzioni if ​​in JavaScript

Le istruzioni condizionali sono una parte essenziale di JavaScript. Ti consentono di eseguire il codice in base al fatto che una determinata condizione sia vera o falsa e puoi nidificare più altrimenti affermazioni (e an altro) per valutare più di una condizione.

Ma ecco il problema: quando si scrive complesso se altro catene, le cose possono diventare rapidamente disordinate e puoi facilmente ritrovarti con un codice difficile da leggere e capire.

Impariamo come eseguire il refactoring lungo e complesso se...altrimentise...altrimenti catene condizionali in una versione più concisa, pulita e di più facile comprensione.

Complesso se... altrimenti Catene

Quando si scrivono istruzioni if...else complesse in JavaScript, è essenziale scrivere codice pulito, conciso e comprensibile. Ad esempio, dai un'occhiata al se altro catena condizionale all'interno della funzione seguente:

funzionepuò bere(persona) {





instagram viewer


Se(persona?.età!= nullo) {
Se(persona.età < 18) {
consolare.tronco d'albero("Ancora troppo giovane")
 } altroSe(persona.età < 21) {
consolare.tronco d'albero("Non negli Stati Uniti")
 } altro {
consolare.tronco d'albero("Permesso di bere")
 }
 } altro {
consolare.tronco d'albero("Non sei una persona")
 }
}
cost persona = {
 età: 22
}
può bere (persona)

La logica qui è semplice. Il primo Se dichiarazione assicura che il persona oggetto ha un età proprietà (altrimenti lui o lei non è una persona). Dentro quello Se blocco, hai aggiunto un se...altrimenti...se catena che sostanzialmente dice:

Se la persona ha meno di 18 anni, è troppo giovane per bere qualcosa. Se hanno meno di 21 anni, sono ancora al di sotto dell'età legale per bere alcolici negli Stati Uniti. Altrimenti, possono legalmente ottenere un drink.

Sebbene il codice precedente sia valido, l'annidamento rende più difficile la comprensione del codice. Fortunatamente, puoi eseguire il refactoring del codice in modo che sia conciso e più facile da leggere utilizzando a clausola di guardia.

Clausole di guardia

Ogni volta che hai un Se istruzione che avvolge tutto il tuo codice, puoi usare a clausola di guardia per rimuovere tutti gli annidamenti:

funzionepuò bere meglio() {
Se(persona?.età == nullo) ritornoconsolare.tronco d'albero("Non sei una persona") 
Se(persona.età < 18) {
consolare.tronco d'albero("Ancora troppo giovane")
 } altroSe(persona.età < 21) {
consolare.tronco d'albero("Non negli Stati Uniti")
 } altro {
consolare.tronco d'albero("Permesso di bere")
 }
}

All'inizio della funzione, hai definito una clausola di guardia che afferma che se quella condizione specifica non è soddisfatta, vuoi uscire dal posso bere meglio() funziona immediatamente (e registra "Non sei una persona" sulla console).

Ma se la condizione è soddisfatta, valuti il se altro chain per vedere quale blocco è applicabile. L'esecuzione del codice ti dà lo stesso risultato del primo esempio, ma questo codice è più facile da leggere.

Non utilizzare un singolo reso

Potresti obiettare che la tecnica di cui sopra non è a buon principio di programmazione perché stiamo utilizzando più ritorni nella stessa funzione e ritieni che sia meglio avere una sola dichiarazione di ritorno (ovvero, singola politica di ritorno).

Ma questo è un modo terribile di scrivere codice perché ti costringe nelle stesse folli situazioni di annidamento che abbiamo visto nel primo esempio di codice.

Detto questo, puoi usare più ritorno istruzioni per semplificare ulteriormente il codice (ed eliminare l'annidamento):

funzionepuò bere meglio() {
Se(persona?.età == nullo) ritornoconsolare.tronco d'albero("Non sei una persona") 
Se(persona.età < 18) {
consolare.tronco d'albero("Ancora troppo giovane")
ritorno
 } 
Se(persona.età < 21) {
consolare.tronco d'albero("Non negli Stati Uniti")
ritorno
 }
consolare.tronco d'albero("Permesso di bere") 
}

Questo codice funziona allo stesso modo dei due esempi precedenti ed è anche un po' più pulito.

Funzioni di estrazione per codice più pulito

Il nostro ultimo blocco di codice era più pulito dei primi due, ma non è ancora buono come potrebbe essere.

Invece di avere un lungo se altro chain all'interno di una funzione, è possibile creare una funzione separata puòDrinkResult() che esegue il controllo per te e restituisce il risultato:

funzionecanDrinkResult(età) {
Se(età < 18) ritorno"Ancora troppo giovane"
Se(età < 21) ritorno"Non negli Stati Uniti"
ritorno"Permesso di bere"
}

Quindi all'interno della funzione principale, tutto ciò che devi fare è applicare prima la clausola guard prima di chiamare il metodo puòDrinkResult() funzione (con l'età come parametro) per ottenere il risultato:

funzionepuò bere meglio() { 
Se(persona?.età == nullo) ritornoconsolare.tronco d'albero("Non sei una persona") 
permettere risultato = canDrinkResult (persona.età)
consolare.log (risultato)
}

Quindi, in questo caso, hai delegato il compito di controllare l'età per bere a una funzione separata e l'hai chiamato solo quando necessario. Ciò rende il codice conciso e più semplice da utilizzare rispetto a tutti gli esempi precedenti.

Tieni altro lontano dalle dichiarazioni condizionali

Hai imparato come eseguire il refactoring di catene condizionali complesse e nidificate in catene condizionali più brevi e più facili da leggere utilizzando le clausole di guardia e la tecnica di estrazione delle funzioni.

Cerca di mantenere il altro istruzione lontano dai condizionali il più possibile utilizzando sia le clausole di guardia che la tecnica di estrazione della funzione.

Se sei ancora nuovo nell'utilizzo di JavaScript se altro dichiarazione, iniziare con le basi.