CONTATTACI

Blog

Developer che ha tra le mani il logo di javascript con robottino sulla spalla

7 cattive abitudini da evitare in Javascript

Per ritagliarsi un ruolo come web developer nel mondo del lavoro, è richiesta la conoscenza del linguaggio JavaScript. Imparare JavaScript costituisce uno dei primi fondamentali passi per un aspirante sviluppatore web.

JavaScript, cos’è?

Si tratta di linguaggio di programmazione multi-paradigma orientato agli eventi. È cruciale per lo sviluppo lato client e permette di rendere la propria pagina web dinamica. Si tratta di un linguaggio molto utilizzato, in quanto viene eseguito direttamente sul browser.

Programmare in JavaScript richiede tanta pratica e tanto codice scritto “male”. Per male si intendono righe di codice, magari anche funzionanti, ma stilisticamente e sintatticamente brutte da vedere o poco congeniali al task che si vuole compiere. Quando si utilizza un linguaggio di programmazione è importante tenere a mente che esistono dei good habit che semplificano la vita di ogni sviluppatore.

In questo articolo vedremo 7 bad habit che bisogna evitare quando si programma in JavaScript, approfondendo anche le regola della sintassi JavaScript.

  1. Scrivere codice su una riga il più possibile – un programmatore inesperto potrebbe pensare che scrivere un’istruzione molto lunga su un’unica riga, sia utile per salvare spazio e scrivere meno righe. Non paghi per scrivere più righe di codice! Sono gratis! Per rendere il codice molto più leggibile è importante sfruttare lo spazio a tua disposizione quando scrivi un comando in JavaScript. Guardiamo un esempio.
document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

  

Sarebbe meglio scriverlo in questo modo…

 

const cookies = document.cookie.split(';')

cookies.forEach(cookie => {
    cookie = cookie.replace(/^ +/, '') //
    cookie = cookie.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
    document.cookie = cookie
})

 

  1. Abusare delle funzioni callback – JavaScript mette a disposizione questo metodo, utile ma troppo invasivo. Usare troppo il callback rende il tuo codice brutto da vedere e poco professionale. Invece di scrivere questo:
fetch('/a')
.then((a) => {
    fetch('/b', { a })
    .then((b) => {
        fetch('/c', { b })
        .then((c) => {
            console.log(c)
        })
    })
})

Utilizza la keyword await per semplificare questo pezzo di codice.

const a = await fetch('/a')
const b = await fetch('/b', { a })
const c = await fetch('/c', { b })

console.log(c)

Molto più leggibile, no?

 

  1. Convertire una stringa in un numero usando il segno ‘+’ – JavaScript mette a disposizione operatori di parsing o di tipizzazione delle variabili, perché non sfruttarli? Il codice semanticamente (e sintatticamente) corretto per convertire una stringa in un numero dovrebbe essere questo:
const str = '123456'
const num1 = Number(str)
const num3 = parseInt(str)

console.log({ num1, num2 }) // { "num1": 123456, "num2": 123456 }

 

  1. Stampare gli errori sulla console di JS – per debuggare il codice può sembrare normale e corretto stampare il messaggio di errore sulla console, per verificare l’esecuzione del codice. Un good habit della programmazione JavaScript può essere quello di fornire un messaggio amichevole ed esplicativo all’utente per informarlo dell’errore.
try {
    fetch(url, {
        method: 'post',
        ...
    })
} catch (err) {
    Toast(err.message)
}

 

  1. Modificare direttamente il codice in node_modulesla cartella node_modules fornisce un modo per riutilizzare il codice della tua applicazione. Sono completamente diversi da una classe. Immagina la cartella node_modules come una cache per i moduli esterni da cui dipende il tuo progetto. Quando li installi npm, vengono scaricati dal Web e copiati nella cartella node_modules e Node.js è addestrato a cercarli lì quando li importi. Modificare il codice direttamente dentro questa directory per risolvere eventuali problemi con un terzo pacchetto npm è una pratica sbagliata. Se il progetto viene trasferito ad un altro dipartimento tramite git, quel problema, apparentemente risolto, ricomparirà, in quanto la modifica è puramente locale.
  2. Impostare troppi parametri per una funzione – può sembrare un’esagerazione, ma una funzione non nasce con l’idea di essere poco leggibile o molto “facoltosa”. Troppi parametri in ingresso per una funzione, ne snaturano il funzionamento e la comprensione. Diventerebbe difficile anche capire cosa la funzione dovrebbe fare.
const getUser = (name, weight, mobile, gender, address, hobby, ...) => {
    // ...
    return ...
}

getUser('Roberto', 100, 183, ....)

Sarebbe meglio ristrutturare questa funzione in questo modo:

 

const getUser = (options) => {
    const { name, weight, mobile, gender, address, hobby, ... } = options
    // ...
    return ...
}
getUser({
    name: 'Roberto',
    weight: 100,
    mobile: 183
    ...
})
  1. Omettere l’utilizzo delle costanti/variabili numeriche – Sul web e tra i programmatori è chiamato “magic number”. Assume questa terminologia poiché all’interno delle righe di codice corrisponde proprio ad un numero, inserito in una condizione o in un ciclo…

 

// index1.js
if (status === 1 || status === 2) {
    // ...
} else if (status === 3) {
    // ...
}
// index2.js
if (status === 1 || status === 2) {
    // ...
}

Piuttosto che inserire numeri poco significativi, un good habit della programmazione JavaScript (ma anche della programmazione in generale) è quella di inserire delle costanti numeriche o delle variabili. 

const STATUS = {
    // It is an adult and has real-name authentication
    adultRealName: 1,
    // It is a minor and has real-name authentication
    minorRealName: 2,
    // Not real-name authentication
    notRealName: 3,
    // ...
}
// index1.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
    // ...
} else if (status === STATUS.notRealName) {
    // ...
}
// index2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
    // ...
}

 

Rispettare queste semplici ma efficaci pratiche migliora di molto la qualità del tuo codice. In JavaScript spesso è facile trascurare determinati approcci, specialmente se si è alle prime armi e si pensa solo a “far funzionare” il codice. Se vuoi saperne di più su questo linguaggio, consulta la nostra guida Javascript in italiano!!

Ti aspettiamo!

 

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.