Una delle fasi più cruciali nello sviluppo di un progetto è scrivere un codice pulito. Non solo sarà facile da leggere, ma avrà anche una buona struttura, rendendo il tuo codice comprensibile a chiunque lo guardi. Come si fa a raggiungere questo obiettivo? Esistono diverse linee guida e sintassi che ti aiuteranno a scrivere meno codice, come ad esempio la regola D.R.Y., che significa sviluppare codice riutilizzabile e non duplicare blocchi di codice che non sono essenziali. Questo è il principio più importante perché ti aiuterà a ripensare al modo in cui scrivi il codice e a risparmiare qualche riga e KB in più al momento della messa in produzione. Le prestazioni sono fondamentali e vorrai risparmiare ogni briciolo di memoria disponibile. Un altro consiglio è quello di utilizzare la sintassi ES6 per ridurre la quantità di codice scritto semplificando alcune sintassi. Le più utilizzate sono proprio quelle di cui parleremo in questo articolo. Le funzioni freccia che ti permettono di scrivere funzioni JavaScript in modo più compatto e risolvono la difficoltà di accedere a questa proprietà dalle callback. Una semplice funzione freccia si presenta in questo modo: const myFunction = (param1, param2) => {} Quando si restituisce qualcosa, la parola chiave “return” è facoltativa e le parentesi graffe possono diventare parentesi se si restituiscono molte righe, oppure possono scomparire se si restituisce un solo valore, a seconda di ciò che si restituisce: const myFunction = (param1, param2) => param1 + param2 Anche le parentesi che circondano le variabili possono essere facoltative se hai un solo parametro: const myFunction = param1 => param1 C’è poi la destrutturazione degli oggetti che ti permette di assegnare rapidamente particolari campi di un oggetto a una variabile riducendo la quantità di codice utilizzato per le dichiarazioni: const user = {firstName: “John”, lastName: “Doe”}; Destrutturazione: const {firstName, lastName} = user; Non destrutturazione:
const firstName = user.firstName;
const lastName = user.lastName; Un altro trucco consiste nell’utilizzare i backtick (‘) per separare i template letterali quando si creano stringhe multilinea e si esegue l’interpolazione delle stringhe: const x = “Var”;const example = `Something ${x} something`; Invece di const example = “Something” + x + “something”; Un’altra importante sintassi di ES6 è il metodo shorthand che elimina la sintassi if else consentendoci di scrivere meno e di rendere il codice più leggibile: condition ? doThisIfTrue : doThisIfFalse Invece di If (condition) { Cerca di evitare le callback e le callback annidate, se possibile, e usa invece le promesse e gli async / await per gestire le funzioni asincrone. Naturalmente, ci sono molti metodi ES6 che possono essere utilizzati, ma questi sono i più usati. Se vuoi, puoi saperne di più qui. Un altro punto chiave da ricordare è la scarsità di dati, che implica che non devi trasferire dati che non ti servono. Invece di passare un intero oggetto quando ti serve solo una variabile, riorganizza i dati e invia solo ciò che è necessario per la funzionalità. Quando devi effettuare diverse chiamate API, questo è un ottimo modo per limitare la quantità di dati da trasmettere. Se il tuo codice cresce di dimensioni, è una buona idea suddividerlo in numerosi file per evitare di avere grandi quantità di dati difficili da comprendere e gestire. Dividere il codice in file e moduli è una buona idea perché aiuta a organizzare il progetto e a migliorarne la leggibilità.
doThisIfTrue
} else {
doThisIfFalse
}