Migliori pratiche per le istruzioni condizionali in JavaScript
Questo articolo spiega le migliori pratiche per le istruzioni condizionali in JavaScript.
YouTube Video
Migliori pratiche per le istruzioni condizionali in JavaScript
Le istruzioni if sono una struttura di controllo fondamentale nei programmi JavaScript. Tuttavia, con l'aumentare della complessità del codice, il numero di istruzioni if può crescere, rendendo il codice più difficile da leggere. Questa volta approfondiremo le migliori pratiche per progettare correttamente le istruzioni if in JavaScript al fine di migliorare la leggibilità e la manutenibilità.
Semplifica il codice utilizzando flag.
Semplifica condizioni che coinvolgono criteri multipli utilizzando valori booleani.
Esempi da Evitare
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}Esempi Migliorati
Usa i flag per chiarire le condizioni.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}Mantieni semplici le istruzioni condizionali
Quando un'espressione condizionale diventa complessa, la leggibilità del codice diminuisce, quindi è necessario mantenere la condizione semplice.
Esempi da Evitare
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}Esempi Migliorati
Scomponendo la condizione in variabili con significati specifici, puoi chiarire il suo intento.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}Chiarire la precedenza degli operatori logici
Nelle dichiarazioni if di JavaScript, una comprensione errata della precedenza degli operatori logici può portare a comportamenti non voluti.
Esempi da Evitare
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}Esempi Migliorati
Quando la precedenza degli operatori non è chiara, puoi usare le parentesi in modo appropriato per chiarire.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}Utilizzare la valutazione a circuito corto
JavaScript supporta la valutazione a corto circuito sia per l'operatore && (AND) che per l'operatore || (OR). La valutazione a corto circuito significa che quando il risultato di una condizione è determinato durante la valutazione, la parte rimanente non viene valutata.
AND(&&): Se la parte sinistra è valutata come falsa, la parte destra non viene valutata e il suo valore viene restituito.OR(||): Se la parte sinistra è valutata come vera, la parte destra non viene valutata e il suo valore viene restituito.
Esempi da Evitare
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}Esempi Migliorati
In questo codice, la funzione user?.someComplexFunction() viene chiamata anche se user?.isLoggedIn è false.
Comprendere la valutazione a corto circuito può aiutarti a evitare calcoli non necessari e a scrivere codice efficiente.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}Minimizza l'uso delle istruzioni else
Le istruzioni else possono aumentare il carico cognitivo durante il tracciamento del codice. Invece, considera di utilizzare i ritorni anticipati.
Esempi da Evitare
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}Esempi Migliorati
Chiarisci le condizioni con i ritorni anticipati.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}Uso corretto dell'operatore ternario
Per condizioni semplici, l'utilizzo di un operatore ternario può accorciare il tuo codice. Tuttavia, evita nidificazioni o logiche complesse.
Esempi da Evitare
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';Esempi Migliorati
Dai priorità alla leggibilità separando le condizioni.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}Utilizzare valori predefiniti e valutazione a circuito corto
Usa valori di default e valutazioni con corto circuito per ridurre i rami e semplificare il codice.
Esempi da Evitare
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}Esempi Migliorati
In questo caso, l'uso degli operatori logici lo rende più conciso.
1// Good Example
2displayName = user?.name || 'Guest';Distingui correttamente quando utilizzare le istruzioni switch.
Quando sono necessarie più condizioni, le istruzioni switch possono rendere più chiare le intenzioni.
Esempi da Evitare
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}Esempi Migliorati
L'uso delle istruzioni switch può aiutare a organizzare il codice.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}Utilizzare clausole di guardia con condizioni di uscita anticipata
Una clausola di guardia è una tecnica che utilizza istruzioni if per uscire anticipatamente da una funzione.
Esempi da Evitare
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}Esempi Migliorati
Usa clausole di guardia per ridurre la nidificazione.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}Scrivi commenti per chiarire le intenzioni.
Per condizioni complesse o rami critici, aggiungi commenti brevi e chiari per trasmettere l'intento del codice.
Esempi da Evitare
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}Esempi Migliorati
Aggiungi commenti per rendere chiare le intenzioni.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}Conclusione
Un utilizzo efficace delle istruzioni if di JavaScript può migliorare notevolmente la leggibilità e la manutenibilità del codice.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.