JavaScript moderno con ES6-ES13 (tutorial JavaScript)

Questo è ciò che ti aspetta in questo corso di JavaScript ES6.

JavaScript esiste da molti anni nei browser. Quasi ogni sito web contiene più o meno codice JS. Anche se le prime versioni erano ancora molto rudimentali, finora è stato possibile lavorare abbastanza bene con lo standard ES5, almeno se si sapeva superare abilmente gli ostacoli e le incertezze. Quindi perché imparare qualcosa di nuovo e non rimanere fedeli a ciò che è testato? In questa lezione mostro i vantaggi del nuovo standard ES6 e le ragioni per cui non si può proprio fare a meno di esso.

Fino e compreso ES5 la parola chiave var era l'unico modo per dichiarare variabili, e spesso causava comportamenti indesiderati o addirittura errori, a causa delle sue peculiarità. ES6 introduce le due nuove parole chiave let e const, che correggono alcune limitazioni di var.

Ogni sviluppatore web conosce il ciclo For. Viene spesso utilizzato anche per attraversare gli array. Con ES6 esiste una variante del ciclo For che consente di farlo in modo molto più breve e compatto.

Le funzioni sono essenziali in JS e finora sono state dichiarate e definite solo tramite la parola chiave function. ES6 introduce un modo molto elegante e conciso che non solo rende il codice più leggibile, ma offre anche una soluzione a un fastidioso problema con this.

I parametri opzionali possono essere realizzati in modo un po' macchinoso in ES5 e non sono visibili a chi chiama la funzione. Con ES6, i parametri opzionali con i loro valori predefiniti possono essere scritti direttamente nella firma della funzione.

La destructurazione consente di estrarre specificamente elementi da oggetti e array. Guardando attentamente, emergono molte possibilità di utilizzo che rendono il codice JS più elegante e compatto.

Manipolare la variabile arguments era necessario fino a ES6 per consentire un numero variabile di parametri nelle funzioni. Questo è molto più semplice in ES6 con i cosiddetti parametri restanti.

Non solo nelle definizioni di funzioni, l'operatore ... viene utilizzato per i parametri rest, ma può anche essere utilizzato nello smistamento dell'array per catturare proprio il "resto" degli elementi e fornirli come array.

Non solo negli array è possibile utilizzare l'operatore di resto, ma anche negli oggetti può raccogliere le restanti proprietà e renderle disponibili come oggetto.

L'opposto dell'operatore di resto è l'operatore di spread. Appare allo stesso modo (…), ma si trova dal lato opposto di un'assegnazione e espande l'array nei suoi singoli elementi.

Il "trucco" dell'operatore di spread funziona molto bene anche con gli oggetti. Questo consente di "mescolare" gli oggetti tra loro. Tuttavia, c'è anche un'alternativa molto buona con Object.assign().

Le funzioni negli oggetti letterali sono molto macchinose da scrivere con la parola chiave function-. Con ES6 possono essere scritte in modo molto più breve e intuitivo.

Non c'è modo di evitarlo: i letterali di stringa multiriga con valori variabili integrati erano una vera sofferenza fino a ES6 e anche molto spiacevoli da leggere. I nuovi letterali di modello di ES6, d'altra parte, sono un piacere sintattico.

Gli oggetti sono stati da sempre usati come un Key-Value-Store o dizionario, ma con alcuni svantaggi. La nuova struttura dati Map si libera di questi svantaggi e offre una solida funzionalità di dizionario, come è noto in altri linguaggi di programmazione.

Dopo che con le Promises è possibile evitare l'inferno dei callback, la costruzione di async/await aggiunge ancora di più al "zucchero sintattico". Si basa sulle Promises e consente di programmare operazioni asincrone quasi come se fossero sincrone. Chi ha programmato almeno una volta con async/await, eviterà in futuro l'uso diretto del metodo then delle Promises (e ancora di più l'uso dei callback).

Oltre all'importazione statica dei moduli con la parola chiave import, ES6 supporta anche l'importazione dinamica con la funzione import-. Poiché tutto funziona in modo asincrono, viene restituito un Promise, su cui è possibile attendere con await. Questo permette il caricamento dinamico dei moduli durante l'esecuzione in qualsiasi momento.

Anche l'ereditarietà si basa ancora su prototipi, si scrive in ES6 con la parola chiave extends,anche se è molto più semplice e chiaro. Quando lo si utilizza, è necessario chiamare il costruttore della classe base al momento giusto con super. Come fare, viene naturalmente spiegato in questa lezione.

Anche i campi privati ​​possono essere dichiarati ora e sicuramente non sono accessibili dall'esterno. Un po' insolita è la dichiarazione, che si differenzia notevolmente da altri linguaggi di programmazione.

Con la nuova parola chiave class e le funzionalità associate come l'ereditarietà e l'incapsulamento dei dati (campi privati), in teoria dovrebbero essere soddisfatti tutti i programmatori OO, o no? In questa lezione vorrei presentare un'alternativa alla creazione di oggetti che non fa uso di classi, prototipi e this, ma consente piuttosto un tipo più flessibile di “ereditarietà” o meglio “composizione”.

Le caratteristiche più importanti della versione ES6 e successive dovrebbero essere ora trattate. Tuttavia, continuano ad essere introdotte nuove novità. Alcune funzioni meno frequentemente usate non sono ancora state menzionate. In questa lezione verrà spiegato cosa aspettarsi ancora in futuro e quali funzioni potrebbero ancora essere interessanti in determinate circostanze.