{"id":16647,"date":"2024-11-10T09:33:00","date_gmt":"2024-11-10T09:33:00","guid":{"rendered":"http:\/\/ladderwp.com\/come-scrivere-codice-javascript-pulito\/"},"modified":"2025-03-14T13:54:03","modified_gmt":"2025-03-14T13:54:03","slug":"come-scrivere-codice-javascript-pulito","status":"publish","type":"post","link":"https:\/\/ladderwp.com\/it\/come-scrivere-codice-javascript-pulito\/","title":{"rendered":"Come scrivere codice JavaScript pulito"},"content":{"rendered":"

Una delle fasi pi\u00f9 cruciali nello sviluppo di un progetto \u00e8 scrivere un codice pulito. Non solo sar\u00e0 facile da leggere, ma avr\u00e0 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 \u00e8 il principio pi\u00f9 importante perch\u00e9 ti aiuter\u00e0 a ripensare al modo in cui scrivi il codice e a risparmiare qualche riga e KB in pi\u00f9 al momento della messa in produzione. Le prestazioni sono fondamentali e vorrai risparmiare ogni briciolo di memoria disponibile. Un altro consiglio \u00e8 quello di utilizzare la sintassi ES6 per ridurre la quantit\u00e0 di codice scritto semplificando alcune sintassi. Le pi\u00f9 utilizzate sono proprio quelle di cui parleremo in questo articolo. Le funzioni freccia che ti permettono di scrivere funzioni JavaScript in modo pi\u00f9 compatto e risolvono la difficolt\u00e0 di accedere a questa propriet\u00e0 dalle callback. Una semplice funzione freccia si presenta in questo modo: const myFunction = (param1, param2) => {}<\/code> Quando si restituisce qualcosa, la parola chiave “return” \u00e8 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\u00f2 che si restituisce: const myFunction = (param1, param2) => param1 + param2<\/code> Anche le parentesi che circondano le variabili possono essere facoltative se hai un solo parametro: const myFunction = param1 => param1<\/code> C’\u00e8 poi la destrutturazione degli oggetti che ti permette di assegnare rapidamente particolari campi di un oggetto a una variabile riducendo la quantit\u00e0 di codice utilizzato per le dichiarazioni: const user = {firstName: \u201cJohn\u201d, lastName: \u201cDoe\u201d};<\/code> Destrutturazione: const {firstName, lastName} = user;<\/code> Non destrutturazione: <\/code>
\nconst firstName = user.firstName;<\/code><\/p>\n

const lastName = user.lastName;<\/code> 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 = \u201cVar\u201d;<\/code>const example = `Something ${x} something`;<\/code> Invece di const example = \u201cSomething\u201d + x + \u201csomething\u201d;<\/code> Un’altra importante sintassi di ES6 \u00e8 il metodo shorthand che elimina la sintassi if else consentendoci di scrivere meno e di rendere il codice pi\u00f9 leggibile: condition ? doThisIfTrue : doThisIfFalse<\/code> Invece di If (condition) {
\ndoThisIfTrue
\n} else {
\ndoThisIfFalse
\n}<\/code> 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\u00f9 usati. Se vuoi, puoi saperne di pi\u00f9 qui<\/a>. Un altro punto chiave da ricordare \u00e8 la scarsit\u00e0 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\u00f2 che \u00e8 necessario per la funzionalit\u00e0. Quando devi effettuare diverse chiamate API, questo \u00e8 un ottimo modo per limitare la quantit\u00e0 di dati da trasmettere. Se il tuo codice cresce di dimensioni, \u00e8 una buona idea suddividerlo in numerosi file per evitare di avere grandi quantit\u00e0 di dati difficili da comprendere e gestire. Dividere il codice in file e moduli \u00e8 una buona idea perch\u00e9 aiuta a organizzare il progetto e a migliorarne la leggibilit\u00e0. <\/p>\n","protected":false},"excerpt":{"rendered":"

Una delle fasi pi\u00f9 cruciali nello sviluppo di un progetto \u00e8 scrivere un codice pulito. Non solo sar\u00e0 facile da leggere, ma avr\u00e0 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… Continue reading Come scrivere codice JavaScript pulito<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":16379,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[176],"tags":[204,187,184,181,179,183,188,189,177,190,191,192,205,193,185,194,202,186,203,178,182,195,196,197,198,199,200,201,206,180],"class_list":["post-16647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-come","tag-agenzia-di-sviluppo-web","tag-agenzia-digitale","tag-azienda","tag-backend-it","tag-blog-it","tag-codifica","tag-digitalbranding-it","tag-digitaldesign-it","tag-javascript-it","tag-programmatore","tag-programmazione","tag-seo-it","tag-sito-web","tag-software-it","tag-sviluppatore","tag-sviluppatore-di-software","tag-sviluppatore-web","tag-sviluppo","tag-sviluppo-web","tag-tecnologia","tag-tecnologie-backend","tag-ui-it","tag-uidesign-it","tag-ux-it","tag-uxdesign-it","tag-web-it","tag-webdesign-it","tag-webdesigner-it","tag-websitedesign-it","tag-wordpress-it","entry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/posts\/16647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/comments?post=16647"}],"version-history":[{"count":0,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/posts\/16647\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/media\/16379"}],"wp:attachment":[{"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/media?parent=16647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/categories?post=16647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ladderwp.com\/it\/wp-json\/wp\/v2\/tags?post=16647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}