{"id":232447,"date":"2023-01-12T11:41:00","date_gmt":"2023-01-12T08:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232447"},"modified":"2022-11-10T09:35:43","modified_gmt":"2022-11-10T06:35:43","slug":"5-funzionalita-javascript-allavanguardia-per-migliorare-il-tuo-codice","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/5-funzionalita-javascript-allavanguardia-per-migliorare-il-tuo-codice\/","title":{"rendered":"5 funzionalit\u00e0 JavaScript all’avanguardia per migliorare il tuo codice"},"content":{"rendered":"\n

Le funzionalit\u00e0 JavaScript sono in continua crescita e ne ricevono di nuove come operatori, costruzioni di sintassi, espressioni. Molti che sono stati introdotti negli ultimi anni e alcuni di essi sono gi\u00e0 una seconda natura, come l’espressione della freccia grassa o l’ operatore =><\/code>di diffusione dell’oggetto ....<\/code><\/p>\n

Le funzionalit\u00e0 JavaScript iniziano come proposte<\/h2>\n

Tutte queste funzionalit\u00e0 JavaScript iniziano come proposte presentate al TC 39. Il Comitato tecnico 39<\/a> \u00e8 incaricato di standardizzare:<\/p>\n

\n

il linguaggio di programmazione ECMAScript (JavaScript) per scopi generici, multipiattaforma e indipendente dal fornitore. Ci\u00f2 include la sintassi del linguaggio, la semantica e le librerie e le tecnologie complementari che supportano il linguaggio.<\/p>\n<\/blockquote>\n

Ci sono molte proposte JavaScript che possiamo iniziare ad aggiungere al nostro flusso oggi, grazie a Babel, il compilatore JavaScript<\/a>. Alcuni di essi offrono maggiore chiarezza, come il separatore numerico. Altri, come le do<\/code>espressioni, introducono la possibilit\u00e0 di avere condizionali complessi mescolati con i tag React JSX.<\/p>\n

Diamo un’occhiata in questo articolo a 5 funzionalit\u00e0 JavaScript che sono ancora in fase di proposta ma che possiamo utilizzare con Babel e miglioreranno notevolmente la tua esperienza di codifica.<\/p>\n

Ognuno ha un link alla sua pagina Babel dove puoi vedere come configurare Babel per usarlo, anche se le funzionalit\u00e0 JavaScript proposte qui descritte sono gi\u00e0 incluse in Babel 7. Ogni sezione ha anche un link alla sua proposta nell’organizzazione Ecma TC39<\/a> su GitHub<\/a>.<\/p>\n

Operatore di coalescenza nullo<\/h2>\n

\"5<\/a><\/p>\n

Proposta: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

Questa proposta JavaScript descrive un operatore che consente di fornire un valore di fallback sul lato destro dell’operatore quando una variabile o una propriet\u00e0 di un oggetto non \u00e8 definita. Se non \u00e8 indefinito, utilizzer\u00e0 il lato sinistro dell’operatore:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Questo \u00e8 simile a scriverlo come operatore ternario:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Si noti che questo operatore non verifica che var non esista. Questo generer\u00e0 un errore:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Ma attenzione, questo operatore non \u00e8 al 100% come un operatore ternario che restituisce il primo lato se la condizione valutata \u00e8 vera. Non valuter\u00e0 i valori che di solito sono falsi in JavaScript<\/a> in false<\/code>. Ad esempio, una stringa vuota non verr\u00e0 considerata false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
A differenza di questo operatore di coalescenza nullo, un operatore ternario sarebbe stato lanciato fallback<\/code>come risultato di questa valutazione.<\/p>\n
Operatore di concatenamento opzionale<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-optional-chaining.html<\/a><\/p>\n
Questo operatore funziona anche su variabili e propriet\u00e0 degli oggetti: controlla se le propriet\u00e0 annidate che stiamo attraversando esistono o meno. Senza questo operatore, dobbiamo controllare ogni propriet\u00e0 nidificata:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Con il nuovo operatore di concatenamento opzionale, possiamo fare qualcosa del tipo:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Questo sembra molto pi\u00f9 chiaro ed \u00e8 pi\u00f9 breve da scrivere. Questo operatore funziona anche con gli array numerici, quindi \u00e8 utile lavorare con le raccolte:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
E possiamo impilare pi\u00f9 operatori:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
E se combiniamo questo con il precedente, una coalescenza nulla? Otteniamo una sintassi che controlla che ogni propriet\u00e0 attraversata esista e, in caso contrario, fornisce un valore di fallback:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Se uno qualsiasi dei valori non esiste, restituir\u00e0 someDefaultValue<\/code>. La combinazione di questi due operatori \u00e8 un ottimo modo per sostituire la funzione get<\/a> di lodash .<\/p>\n
Operatore di condotte<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
Questo operatore fa parte di diverse funzionalit\u00e0 JavaScript sperimentali e questo fornisce una maggiore leggibilit\u00e0 quando si concatenano pi\u00f9 funzioni insieme. Considera la seguente funzione:<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Se abbiamo bisogno di riutilizzare queste trasformazioni parziali che sono concatenate insieme, possiamo suddividerle in diverse funzioni e quindi comporre il risultato usandole:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
La cosa strana di questo \u00e8 che dobbiamo iniziare a leggere questo dal basso, dalla splitBySpace<\/code>riga, verso l’alto, per capire le trasformazioni applicate alla stringa. Questo va contro il nostro flusso di lettura naturale, dall’alto verso il basso. Finiamo anche con tutte quelle brutte parentesi penzolanti. Questo potrebbe essere scritto in una riga e non \u00e8 molto pi\u00f9 carino:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Qui, dobbiamo iniziare a leggere dalla funzione centrale verso le funzioni esterne, o da destra a sinistra, il che \u00e8 controintuitivo per la lettura occidentale da sinistra a destra.<\/p>\n
L’operatore della pipeline pu\u00f2 rendere queste costruzioni molto pi\u00f9 leggibili e simili al concatenamento che avevamo originariamente prima di spostare le trasformazioni in funzioni separate:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Ora le trasformazioni applicate sono scritte in modo simile al nostro modo di scrivere, dall’alto verso il basso, sono pi\u00f9 chiare da leggere e non abbiamo parentesi in giro. Successo!<\/p>\n
Separatore numerico<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
Questo separatore numerico \u00e8 diverso dalle altre funzionalit\u00e0 JavaScript poich\u00e9 non \u00e8 un operatore. \u00c8 una costruzione della sintassi che rende pi\u00f9 leggibili i valori letterali numerici creando una separazione visiva tra gruppi di cifre. I valori letterali numerici di grandi dimensioni sono difficili da analizzare e comprendere rapidamente, in particolare quando una cifra viene ripetuta pi\u00f9 volte. Per esempio:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
\u00c8 difficile da capire con una rapida occhiata. Questo separatore lo rende pi\u00f9 leggibile:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Ora possiamo capire rapidamente che questo \u00e8 un trilione.<\/p>\n
Fai espressioni<\/h2>\n
\"5<\/a><\/p>\n
Proposta: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
L’ultima delle nuove funzionalit\u00e0 JavaScript che esamineremo \u00e8 un’espressione che pu\u00f2 essere valutata. Il risultato di questa espressione arriva dopo l’esecuzione di un blocco che pu\u00f2 avere pi\u00f9 istruzioni all’interno. Possiamo facilmente capire le espressioni do se traduciamo un’espressione di operatore ternario come questa:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
do{}<\/code>Scriveremmo l’ espressione equivalente in questo modo:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Si noti che non \u00e8 necessario restituire il valore poich\u00e9 questa non \u00e8 una funzione. Mentre in questo caso particolare, questo pu\u00f2 essere scritto in modo pi\u00f9 succinto come ternario, le espressioni do sono molto pi\u00f9 potenti, consentendo pi\u00f9 affermazioni, ad esempio:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
Dove questo \u00e8 davvero potente \u00e8 in JSX, dove possiamo mescolarlo con i suoi tag senza dover prima calcolare il risultato esternamente. Ad esempio, potremmo fare quanto segue se usiamo React<\/a> per renderizzare questi componenti:<\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
Altre proposte JavaScript<\/h2>\n
Ogni giorno vengono discusse pi\u00f9 proposte per aggiungere funzionalit\u00e0 pi\u00f9 interessanti al linguaggio JavaScript. Un elenco sempre crescente di queste funzionalit\u00e0 JavaScript proposte pu\u00f2 essere letto su https:\/\/github.com\/tc39\/proposals#ecmascript-proposals<\/a>. Le proposte qui sono prossime al completamento e quindi prossime all’aggiunta allo standard ECMAScript come spiegato in questa tabella che descrive il processo di accettazione<\/a>.<\/p>\n
Alcune delle nuove funzionalit\u00e0 JavaScript che abbiamo esplorato in questo articolo, come le espressioni do o l’operatore della pipeline, sono proposte di fase 1<\/a>, il che significa che hanno ancora molta strada da fare prima di entrare a far parte dello standard ECMAScript.<\/p>\n
Fonte di registrazione:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Scopri 5 nuove funzionalit\u00e0, operatori ed espressioni JavaScript che miglioreranno il tuo codice, rendendolo pi\u00f9 leggibile ed efficiente.<\/p>\n","protected":false},"author":1,"featured_media":157555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,731,751,720,844],"tags":[1168],"class_list":["post-232447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-javascript-6","category-open-source-projektmanagement-3","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/232447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=232447"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/232447\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=232447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=232447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=232447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}