Le migliori pratiche nella programmazione JavaScript

Questo articolo spiega le migliori pratiche nella programmazione JavaScript.

Presenteremo le principali best practice in JavaScript insieme a esempi concreti di codice.

YouTube Video

Le migliori pratiche nella programmazione JavaScript

Nella programmazione, non è importante solo scrivere "codice che funziona", ma scrivere codice manutenibile, efficiente e affidabile. Seguendo le "buone pratiche", il tuo codice diventa più facile da comprendere per altri sviluppatori, più semplice da mantenere ed estendere e, in definitiva, porta a meno bug e a prestazioni migliori.

Con esempi di codice, vediamo le principali buone pratiche in JavaScript.

Usa nomi chiari e descrittivi per variabili e funzioni

Rendi possibile capire cosa significhi una variabile o una funzione solo leggendo il codice. Preferisci nomi descrittivi a nomi accorciati o abbreviazioni.

Esempio errato

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Nomi come x o fn offuscano l'intento del codice.

Esempio corretto

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• Usare nomi significativi come totalItems o calculateDiscount aiuta i lettori a comprendere il codice.

Usa const / let ed evita var

Poiché var è soggetto a problemi di scope e di ridefinizione, si consiglia di usare sempre const o let.

Esempio errato

1/* Bad Example */
2var count = 5;

• var ha scope di funzione e può causare ridefinizioni involontarie e hoisting.

Esempio corretto

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let e const hanno scope di blocco e sono più sicuri da usare, producendo codice più prevedibile e stabile.

Utilizza commenti appropriati

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Esempio errato

1/* Bad Example */
2let a = 100; // assign 100 to a

Esempio corretto

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Preferisci commenti che spieghino il perché di qualcosa, più che ciò che viene fatto. Questo è particolarmente utile quando la logica è complessa.

Segui il principio DRY (Don't Repeat Yourself)

Invece di ripetere la stessa logica, fattorizzala in funzioni o classi. Ridurre la duplicazione migliora la manutenibilità e aiuta a prevenire i bug.

Esempio errato

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Esempio corretto

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• Consolidando la logica duplicata in una funzione, modifiche e correzioni possono essere effettuate in un unico punto. Questo è particolarmente importante nello sviluppo su larga scala.

Mantieni le funzioni a singola responsabilità e minimizza gli effetti collaterali

Ogni funzione dovrebbe avere uno scopo chiaro e unico. Evita di modificare variabili globali o lo stato esterno per mantenere al minimo gli effetti collaterali.

Esempio errato

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Esempio corretto

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• Progettare funzioni pure—che restituiscono lo stesso risultato a parità di input—le rende più facili da testare e più affidabili. Migliora anche la riusabilità e la facilità di debug.

Esegui la gestione degli errori

Assicurati che l'app non vada in crash con input inattesi o eccezioni. Usa la sintassi try...catch per gestire gli errori in modo appropriato.

Esempio errato

1/* Bad Example */
2let data = JSON.parse(inputData);

Esempio corretto

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Poiché JSON.parse() può generare eccezioni, gestiscilo in sicurezza con try-catch. Una gestione degli errori accurata aiuta a costruire applicazioni robuste.

Produci log strutturati

Emetti log in un formato coerente per rendere più facile tracciare il comportamento del sistema. Usare log in formato JSON li rende più facili da utilizzare con strumenti di analisi e monitoraggio.

Esempio errato

1/* Bad Example */
2console.log('Error occurred!');

Esempio corretto

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• I log in semplice testo possono perdere informazioni; i log strutturati rendono più semplice l'analisi, la visualizzazione e il monitoraggio. Questo è particolarmente efficace nel JavaScript lato server (Node.js).

Migliora la leggibilità del codice

Il codice viene letto da altri (o da te stesso in futuro). Usa correttamente indentazione, interruzioni di riga e spaziatura per rendere il codice facile da leggere.

Esempio errato

1/* Bad Example */
2if(a===b){doSomething();}

Esempio corretto

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• Un codice ben formattato e leggibile è più rapido da comprendere e rende più facile individuare i bug. Non stipare tutto su una singola riga; rendi visivamente chiara la struttura.

Considera sempre la sicurezza

Poiché JavaScript gira spesso in ambienti web, la consapevolezza della sicurezza è essenziale. Convalida sempre l'input dell'utente, proteggiti da XSS e CSRF e mantieni aggiornate le dipendenze.

Esempio errato

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Esempio corretto

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• Gestire l'input dell'utente così com'è può introdurre vulnerabilità come l'iniezione di script. Usa API sicure e rendi un'abitudine la convalida e la sanificazione dei dati.

Eseguire il test del codice

Introdurre test automatizzati facilita il rilevamento e la prevenzione dei bug. In JavaScript, sono comunemente usati framework di test come Jest e Mocha.

Esempio

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• Avere test assicura che i bug non ricompaiano quando si aggiungono funzionalità o si apportano modifiche. I test sono indispensabili per garantire la qualità in modo continuo.

Conclusione

Seguire le buone pratiche può migliorare notevolmente la qualità, la manutenibilità e l'affidabilità del codice. Quando impari JavaScript, è importante sviluppare abitudini non solo sulla sintassi ma anche su "come scrivere buon codice.". Continuando a imparare, puoi rendere il tuo codice più leggibile, sicuro ed efficiente.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video