5 funzionalità JavaScript all’avanguardia per migliorare il tuo codice

Le funzionalità 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à una seconda natura, come l’espressione della freccia grassa o l’ operatore =>di diffusione dell’oggetto ....

Le funzionalità JavaScript iniziano come proposte

Tutte queste funzionalità JavaScript iniziano come proposte presentate al TC 39. Il Comitato tecnico 39 è incaricato di standardizzare:

il linguaggio di programmazione ECMAScript (JavaScript) per scopi generici, multipiattaforma e indipendente dal fornitore. Ciò include la sintassi del linguaggio, la semantica e le librerie e le tecnologie complementari che supportano il linguaggio.

Ci sono molte proposte JavaScript che possiamo iniziare ad aggiungere al nostro flusso oggi, grazie a Babel, il compilatore JavaScript. Alcuni di essi offrono maggiore chiarezza, come il separatore numerico. Altri, come le doespressioni, introducono la possibilità di avere condizionali complessi mescolati con i tag React JSX.

Diamo un’occhiata in questo articolo a 5 funzionalità JavaScript che sono ancora in fase di proposta ma che possiamo utilizzare con Babel e miglioreranno notevolmente la tua esperienza di codifica.

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

Operatore di coalescenza nullo

Proposta: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

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à di un oggetto non è definita. Se non è indefinito, utilizzerà il lato sinistro dell’operatore:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Questo è simile a scriverlo come operatore ternario:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Si noti che questo operatore non verifica che var non esista. Questo genererà un errore:

const val = maybeUndef ?? 2021;  

Ma attenzione, questo operatore non è al 100% come un operatore ternario che restituisce il primo lato se la condizione valutata è vera. Non valuterà i valori che di solito sono falsi in JavaScript in false. Ad esempio, una stringa vuota non verrà considerata false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

A differenza di questo operatore di coalescenza nullo, un operatore ternario sarebbe stato lanciato fallbackcome risultato di questa valutazione.

Operatore di concatenamento opzionale

Proposta: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Questo operatore funziona anche su variabili e proprietà degli oggetti: controlla se le proprietà annidate che stiamo attraversando esistono o meno. Senza questo operatore, dobbiamo controllare ogni proprietà nidificata:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Con il nuovo operatore di concatenamento opzionale, possiamo fare qualcosa del tipo:

const val = anObj.aProp?.aNestedProp

Questo sembra molto più chiaro ed è più breve da scrivere. Questo operatore funziona anche con gli array numerici, quindi è utile lavorare con le raccolte:

const val = anObj.anArray[0]?.someProp

E possiamo impilare più operatori:

const val = anObj.anArray[0]?.someProp?.aNestedProp

E se combiniamo questo con il precedente, una coalescenza nulla? Otteniamo una sintassi che controlla che ogni proprietà attraversata esista e, in caso contrario, fornisce un valore di fallback:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Se uno qualsiasi dei valori non esiste, restituirà someDefaultValue. La combinazione di questi due operatori è un ottimo modo per sostituire la funzione get di lodash .

Operatore di condotte

Proposta: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Questo operatore fa parte di diverse funzionalità JavaScript sperimentali e questo fornisce una maggiore leggibilità quando si concatenano più funzioni insieme. Considera la seguente funzione:

Se abbiamo bisogno di riutilizzare queste trasformazioni parziali che sono concatenate insieme, possiamo suddividerle in diverse funzioni e quindi comporre il risultato usandole:

La cosa strana di questo è che dobbiamo iniziare a leggere questo dal basso, dalla splitBySpaceriga, 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 è molto più carino:

Qui, dobbiamo iniziare a leggere dalla funzione centrale verso le funzioni esterne, o da destra a sinistra, il che è controintuitivo per la lettura occidentale da sinistra a destra.

L’operatore della pipeline può rendere queste costruzioni molto più leggibili e simili al concatenamento che avevamo originariamente prima di spostare le trasformazioni in funzioni separate:

Ora le trasformazioni applicate sono scritte in modo simile al nostro modo di scrivere, dall’alto verso il basso, sono più chiare da leggere e non abbiamo parentesi in giro. Successo!

Separatore numerico

Proposta: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Questo separatore numerico è diverso dalle altre funzionalità JavaScript poiché non è un operatore. È una costruzione della sintassi che rende più 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ù volte. Per esempio:

const longNum = 1000000000000;

È difficile da capire con una rapida occhiata. Questo separatore lo rende più leggibile:

const longNum = 1_000_000_000_000;

Ora possiamo capire rapidamente che questo è un trilione.

Fai espressioni

Proposta: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

L’ultima delle nuove funzionalità JavaScript che esamineremo è un’espressione che può essere valutata. Il risultato di questa espressione arriva dopo l’esecuzione di un blocco che può avere più istruzioni all’interno. Possiamo facilmente capire le espressioni do se traduciamo un’espressione di operatore ternario come questa:

const res = isCold( color )? 'light-blue': 'orange';

do{}Scriveremmo l’ espressione equivalente in questo modo:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Si noti che non è necessario restituire il valore poiché questa non è una funzione. Mentre in questo caso particolare, questo può essere scritto in modo più succinto come ternario, le espressioni do sono molto più potenti, consentendo più affermazioni, ad esempio:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Dove questo è davvero potente è 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 per renderizzare questi componenti:

Altre proposte JavaScript

Ogni giorno vengono discusse più proposte per aggiungere funzionalità più interessanti al linguaggio JavaScript. Un elenco sempre crescente di queste funzionalità JavaScript proposte può essere letto su https://github.com/tc39/proposals#ecmascript-proposals. 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.

Alcune delle nuove funzionalità JavaScript che abbiamo esplorato in questo articolo, come le espressioni do o l’operatore della pipeline, sono proposte di fase 1, il che significa che hanno ancora molta strada da fare prima di entrare a far parte dello standard ECMAScript.