{"id":23840,"date":"2023-10-13T09:00:00","date_gmt":"2023-10-13T07:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=23840"},"modified":"2023-11-10T13:02:37","modified_gmt":"2023-11-10T12:02:37","slug":"ecmascript-2023-es14-unanalisi-approfondita-delle-novita-e-degli-aggiornamenti","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/backend-it\/ecmascript-2023-es14-unanalisi-approfondita-delle-novita-e-degli-aggiornamenti\/","title":{"rendered":"ECMAScript 2023 (ES14): un’analisi approfondita delle novit\u00e0 e degli aggiornamenti"},"content":{"rendered":"\n

Il mondo del web e dello sviluppo software ha visto la crescita esponenziale e la maturazione di JavaScript come uno dei linguaggi di programmazione pi\u00f9 influenti e onnipresenti. Fin dai suoi umili inizi nei primi giorni del web, quando era usato principalmente per aggiungere interattivit\u00e0 di base alle pagine web, JavaScript ha percorso una strada lunga e tortuosa. Ora, \u00e8 al centro delle applicazioni web moderne, delle tecnologie di sviluppo Front-End e perfino degli ambienti di Back-End con piattaforme come Node.js. <\/p>\n\n\n\n

L’emergere di ogni nuova versione di ECMAScript, la specifica ufficiale dietro JavaScript, segna un ulteriore passo nella sua evoluzione. Con l’arrivo di ECMAScript 2023 (ES14), il linguaggio introduce nuovi strumenti e funzionalit\u00e0, consolidando ulteriormente la sua posizione come colonna portante della tecnologia web moderna. Anche se ES14 non ha portato una rivoluzione completa, i suoi aggiornamenti e perfezionamenti offrono nuove opportunit\u00e0 e soluzioni per gli sviluppatori di tutto il mondo.<\/p>\n\n\n\n

Proseguiamo ora con una panoramica pi\u00f9 dettagliata di ci\u00f2 che ES14 ha da offrire e di come queste novit\u00e0 influenzeranno il panorama dello sviluppo in JavaScript.<\/p>\n\n\n\n

Introduzione alle Specifiche ECMAScript<\/strong><\/h2>\n\n\n\n

Le specifiche ECMAScript fungono da bibbia per JavaScript. Forniscono una documentazione dettagliata delle funzionalit\u00e0 del linguaggio, servendo sia come riferimento educativo per gli sviluppatori sia come guida per gli implementatori di motori JavaScript.<\/p>\n\n\n\n

Per chi \u00e8 nuovo a queste specifiche, \u00e8 possibile esplorarle sul sito ufficiale tc39.es\/ecma262\/<\/a>. Le specifiche per il 2023 sono disponibili su tc39.es\/ecma262\/2023\/<\/a>. Questo documento, oltre ad essere una miniera d’oro di informazioni, riflette l’adattabilit\u00e0 e la resilienza di JavaScript come linguaggio, crescendo e evolvendosi in risposta alle esigenze reali degli sviluppatori.<\/p>\n\n\n\n

Uno degli aspetti interessanti delle specifiche ECMAScript \u00e8 la loro natura evolutiva. Non sono statiche. Cambiano, si adattano e crescono in risposta alle esigenze degli sviluppatori e ai progressi tecnologici nel campo del web e dello sviluppo software. Spesso, vediamo che una nuova funzionalit\u00e0 diventa parte delle specifiche ufficiali solo dopo essere stata accettata e adottata dalla comunit\u00e0 degli sviluppatori. Questo dimostra la natura dinamica e reattiva del processo di sviluppo delle specifiche.<\/p>\n\n\n\n

Prendiamo ad esempio la sintassi Shebang introdotta in ES14. Questa non \u00e8 una funzionalit\u00e0 completamente nuova per la comunit\u00e0 degli sviluppatori. Era gi\u00e0 utilizzata in alcuni contesti, ma ora, con la sua inclusione nelle specifiche, diventa una parte standardizzata del linguaggio. Una volta che una funzionalit\u00e0 \u00e8 stata codificata nelle specifiche, funge da base stabile per ulteriori innovazioni e adattamenti.<\/p>\n\n\n\n

Alcune delle funzionalit\u00e0 introdotte nelle specifiche ECMAScript nel corso degli anni sono state influenzate da altri linguaggi di programmazione. Ad esempio, l’introduzione della sintassi async\/await \u00e8 stata influenzata dal linguaggio C#. Questo dimostra che le specifiche ECMAScript non sono solo un set insulare di regole, ma piuttosto un documento vivo che impara e si adatta prendendo ispirazione da varie fonti.<\/p>\n\n\n\n

\n\n\n\n

Lettura consigliata: La Dev Mode di Figma: cos\u2019\u00e8 e come funziona<\/a><\/strong><\/p>\n\n\n\n

\n\n\n\n

Il ruolo delle specifiche nella crescita di JavaScript<\/strong><\/h2>\n\n\n\n

Una parte cruciale dello sviluppo di JavaScript \u00e8 il modo in cui le specifiche ECMAScript hanno accompagnato e guidato la sua evoluzione. Da semplici script per creare effetti hover su immagini a potenti applicazioni web a singola pagina (SPA), JavaScript<\/a> si \u00e8 evoluto a passi da gigante. E le specifiche ECMAScript hanno avuto un ruolo fondamentale in questa trasformazione.<\/p>\n\n\n\n

Uno dei principi cardine delle specifiche ECMAScript \u00e8 la loro capacit\u00e0 di riflettere la realt\u00e0 pratica. Molte volte, una funzionalit\u00e0 viene integrata nelle specifiche ufficiali solo dopo essere stata ampiamente adottata e accettata dalla comunit\u00e0. Questo approccio bottom-up garantisce che le nuove aggiunte siano realmente utili e rispondano alle esigenze attuali.<\/p>\n\n\n\n

Ora diamo un’occhiata alle nuove funzionalit\u00e0 introdotte in JavaScript nel 2023.<\/p>\n\n\n\n

Cambiare gli array “per copia”: immutabilit\u00e0, funzioni pure ed effetti collaterali<\/strong><\/h2>\n\n\n\n

La manipolazione degli array \u00e8 un aspetto fondamentale della programmazione JavaScript. ECMAScript 2023 introduce metodi di array avanzati che ci consentono di apportare modifiche a un array mantenendo invariato l’array originale. Invece di modificare direttamente l’array (tramite le cosiddette funzioni “in-place” o “in loco”), questi metodi creano una nuova copia dell’array con le modifiche desiderate. Queste funzioni vengono chiamate “pure”, dato che non modificano lo stato dei loro parametri, ma restituiscono un nuovo oggetto che rappresenta il risultato della chiamata alla funzione. Nelle funzioni pure possiamo manipolare con sicurezza i valori dell’array senza preoccuparci degli “effetti collaterali” indesiderati sull’array originale, che mantiene la sua immutabilit\u00e0.<\/p>\n\n\n\n

Questa strategia \u00e8 molto utile nelle applicazioni moderne basate sulla programmazione funzionale e dichiarativa.<\/p>\n\n\n\n

Questa caratteristica \u00e8 molto importante, perch\u00e9 aiuta a mantenere l’integrit\u00e0 dell’array originale consentendoci comunque di lavorare con versioni modificate quando necessario.<\/p>\n\n\n\n

Andiamo ad analizzare questi nuovi metodi che vengono aggiunti a Array.prototype e TypedArray.prototype.<\/p>\n\n\n\n

\n\n\n\n

Lettura consigliata: React, tutto sulla libreria Javascript<\/a><\/strong><\/p>\n\n\n\n

\n\n\n\n

toSorted()<\/strong><\/h2>\n\n\n\n

toSorted ha la stessa firma di Array.prototype.sort(), ma crea un nuovo array invece di operare sull’array stesso. <\/p>\n\n\n

const<\/span> numbers = [5<\/span>,4<\/span>,2<\/span>,3<\/span>,1<\/span>]\n\nnumbers === numbers.sort()      \/\/ true - [1, 2, 3, 4, 5]<\/span>\nnumbers === numbers.toSorted()  \/\/ false - [1, 2, 3, 4, 5]<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
La prima chiamata a sort modifica l’array numbers.<\/p>\n\n\n\n
La seconda chiamata a toSorted genera un nuovo array e lo restituisce.<\/p>\n\n\n\n
toSorted(), come sort(), accetta anche un singolo argomento opzionale, una funzione comparatrice. Ad esempio, potremmo utilizzare toSorted() per creare un nuovo array in ordine decrescente:<\/p>\n\n\n
const<\/span> numbers = [10<\/span>, 5<\/span>, 2<\/span>, 7<\/span>, 3<\/span>, 9<\/span>, 1<\/span>, 6<\/span>, 4<\/span>]\nconst<\/span> sortedNumbers = numbers.toSorted((n1, n2<\/span>) =><\/span> { \n  return<\/span> n2 - n1; \n})\n\/\/ [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]<\/span>\nconsole<\/span>.log(sortedNumbers)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Anche toSorted() pu\u00f2 essere applicato ad array di oggetti. In questo caso devi fornire una funzione comparatrice che utilizzi direttamente i dati degli oggetti, dato che non esiste un ordinamento naturale per gli oggetti:<\/p>\n\n\n
const<\/span> objs = [{ name<\/span>: \"Anna\"<\/span>, age<\/span>: 30<\/span> }, { name<\/span>: \"Mario\"<\/span>, age<\/span>: 25<\/span> }, { name<\/span>: \"Luigi\"<\/span>, age<\/span>: 40<\/span> }, { name<\/span>: \"Lisa\"<\/span>, age<\/span>: 20<\/span> }];\nconst<\/span> sortedObjs = objects.toSorted((o1, o2<\/span>) =><\/span> {\n  return<\/span> o1.name.localeCompare(02.n<\/span>ame) \n})\n\n\/\/[{\"name\":\"Luigi\",\"age\":40},{\"name\":\"Mario\",\"age\":25},{\"name\":\"Anna\",\"age\":30},{\"name\":\"Lisa\",\"age\":20}]<\/span>\nconsole<\/span>.log(sortedObjs)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
toReversed()<\/strong><\/h2>\n\n\n\n
Come toSorted() per sort(), toReversed() \u00e8 il cugino di reverse().<\/p>\n\n\n
const<\/span> months = ['January'<\/span>, 'February'<\/span>, 'March'<\/span>, 'April'<\/span>, 'May'<\/span>]\n\n\/\/ reverse(), l'array originale viene alterato<\/span>\nconst<\/span> reversedMonths = months.reverse()\nconsole<\/span>.log(months) => ['May'<\/span>, 'April'<\/span>, 'March'<\/span>, 'February'<\/span>, 'January'<\/span>]\nconsole<\/span>.log(reversedMonths) => ['May'<\/span>, 'April'<\/span>, 'March'<\/span>, 'February'<\/span>, 'January'<\/span>]\n\n\/\/ toReversed(), l'array originale rimane inalterato<\/span>\nconst<\/span> reversedMonths = months.toReversed()\nconsole<\/span>.log(months) => ['January'<\/span>, 'February'<\/span>, 'March'<\/span>, 'April'<\/span>, 'May'<\/span>]\nconsole<\/span>.log(reversedMonths) => ['May'<\/span>, 'April'<\/span>, 'March'<\/span>, 'February'<\/span>, 'January'<\/span>]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
toSpliced()<\/strong><\/h2>\n\n\n\n
Come toSorted() per sort(), e toReversed() per reverese(). toSpliced() \u00e8 il cugino di splice().<\/p>\n\n\n\n
Quando si utilizza toSpliced, viene restituito un nuovo array, che riflette le modifiche desiderate, mentre splice restituisce un array contenente i valori rimossi.<\/p>\n\n\n\n
Questa distinzione rende toSpliced una scelta utile quando \u00e8 importante preservare l’array originale e quando si preferisce un approccio non distruttivo.<\/p>\n\n\n\n
Utilizzando toSpliced possiamo manipolare in modo sicuro gli array senza preoccuparci di modifiche involontarie ai dati originali, migliorando l’affidabilit\u00e0 e la manutenibilit\u00e0 del codice.<\/p>\n\n\n
const<\/span> colors = [\"red\"<\/span>, \"orange\"<\/span>, \"yellow\"<\/span>, \"green\"<\/span>, \"blue\"<\/span>, \"purple\"<\/span>]\n\/\/ [\"red\", \"orange\", \"pink\", \"cyan\", \"green\", \"blue\", \"purple\"]<\/span>\nconst<\/span> newColors = arr.toSpliced(2<\/span>, 1<\/span>, \"pink\"<\/span>, \"cyan\"<\/span>) \n\n\/\/ \u2018green\u2019<\/span>\nconsole<\/span>.log(colors[3<\/span>])\n\/\/ 'cyan'<\/span>\nconsole<\/span>.log(newColors[3<\/span>])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
A differenza dei metodi precedenti, toSpliced() esiste unicamente per Array.prototype. <\/p>\n\n\n\n
with()<\/strong><\/h2>\n\n\n\n
L’aggiornamento degli elementi all’interno di un array \u00e8 un’operazione comune in JavaScript. Tuttavia, la modifica diretta degli elementi dell’array pu\u00f2 portare a effetti collaterali indesiderati. Il metodo with(), introdotto in ECMAScript 2023, offre un modo sicuro per aggiornare gli elementi in un array senza alterare l’array originale.<\/p>\n\n\n\n
Immaginiamo di avere un array di nomi utente e di voler aggiornare un nome utente specifico senza alterare l’array originale:<\/p>\n\n\n
const<\/span> usernames = ['Mario'<\/span>, 'Luigi'<\/span>, 'Anna'<\/span>]\n\n\/\/ vecchia modalit\u00e0 di aggiornamento<\/span>\nusernames[1<\/span>] = 'Peach'<\/span>\nconsole<\/span>.log(usernames) \/\/ ['Mario', 'Peaach', 'Anna']<\/span>\n\n\/\/ using with(), l'array originale rimane inalterato<\/span>\nconst<\/span> updatedUsernames = usernames.with(1<\/span>, 'Peach'<\/span>)\nconsole<\/span>.log(usernames) => ['Mario'<\/span>, 'Luigi'<\/span>, 'Anna'<\/span>]\nconsole<\/span>.log(updatedUsernames) \/\/ ['Mario', 'Peach', 'Anna']<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Array e ricerche<\/strong><\/h2>\n\n\n\n
Lavorare con gli array spesso implica la ricerca di elementi specifici. Il metodo find \u00e8 stato introdotto per semplificare questo processo, ma restituisce solo il primo elemento corrispondente ad un criterio di ricerca. Tuttavia, alcuni scenari richiedono di cercare dalla fine dell’array per trovare l’ultimo elemento corrispondente. \u00c8 qui che entrano in gioco i nuovi metodi findLast e findLastIndex.<\/p>\n\n\n\n
Esistono scenari in cui la ricerca dall’ultimo elemento \u00e8 pi\u00f9 pratica:<\/p>\n\n\n\n
Registri basati sul tempo: immagina una serie di voci di registro ordinate per timestamp. Se vogliamo trovare l’ultima voce di registro di un utente specifico, la ricerca dalla fine garantisce di ottenere la voce pi\u00f9 recente.<\/p>\n\n\n\n
Coda con priorit\u00e0 inversa: in alcuni casi, potremmo mantenere una coda con priorit\u00e0 in cui gli elementi pi\u00f9 recenti hanno una priorit\u00e0 pi\u00f9 alta. Quando si recuperano elementi con la massima priorit\u00e0, la ricerca dall’ultimo elemento garantisce di ottenere l’ultimo elemento con alta priorit\u00e0.<\/p>\n\n\n\n
findLast()<\/strong><\/h2>\n\n\n\n
Il metodo findLast() ti consente di ottenere l’istanza finale di un elemento corrispondente da un array. Se non viene trovato alcun elemento corrispondente, restituisce undefined. Nell’esempio seguente vediamo come trovare l’ultimo numero pari dell’array:<\/p>\n\n\n
const<\/span> numbers = [17<\/span>, 5<\/span>, 87<\/span>, 14<\/span>, 100<\/span>, 11<\/span>];\n\nconst<\/span> lastEven = numbers.findLast((number<\/span>) =><\/span> {\n  return<\/span> number % 2<\/span> === 0<\/span>\n})\n\nconsole<\/span>.log(lastEven) \/\/ 100<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
findLast() supporta anche il passaggio di un “thisArg” per impostare il contesto del this nella funzione.<\/p>\n\n\n\n
findLastIndex()<\/strong><\/h2>\n\n\n\n
Allo stesso modo, il metodo findLastIndex() pu\u00f2 essere utile quando dobbiamo trovare l’indice dell’ultimo elemento che soddisfa una condizione. Nell’esempio seguente vediamo come trovare l’ultimo numero dell’array divisibile per 10:<\/p>\n\n\n
const<\/span> numbers = [17<\/span>, 5<\/span>, 87<\/span>, 14<\/span>, 100<\/span>, 11<\/span>];\nnumbers.findLastIndex(number<\/span> =><\/span> number % 10<\/span> === 0<\/span>); \/\/ 100<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Supporto per lo la grammatica Hashbang (notazione shebang)<\/strong><\/h2>\n\n\n\n
L’introduzione della Hashbang Grammar in ECMAScript 2023 ci consente di utilizzare la notazione shebang (#!) nel codice sorgente. Questa funzionalit\u00e0 semplifica la distinzione tra script e moduli e fornisce una migliore compatibilit\u00e0 con gli strumenti di creazione e rende Javascript coerente con altri linguaggi.<\/p>\n\n\n\n
Uno shebang \u00e8 una notazione Unix vecchia scuola costituito un hashtag seguito da un punto esclamativo: #! (dove “bang” \u00e8 slang per “!”). Da tempo immemorabile, un commento all’inizio di un file che inizia con #! dice alla shell che si tratta di uno script eseguibile e quale motore usare per eseguirlo.<\/p>\n\n\n
#!\/usr\/bin\/env node<\/span>\nconsole<\/span>.log(\"Hello, world!\"<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Questo script dice al sistema operativo di utilizzare Node per eseguire questo script. Ora puoi semplicemente digitare .\/hello.js per eseguirlo. <\/p>\n\n\n\n
Simboli come chiavi delle WeakMap: un passo avanti nella gestione della memoria<\/strong><\/h2>\n\n\n\n
Una delle caratteristiche principali introdotte in ES14 \u00e8 l’espansione di ci\u00f2 che pu\u00f2 essere utilizzato come chiavi nelle WeakMap. Ma prima di addentrarci nelle novit\u00e0, facciamo un passo indietro e comprendiamo cosa sono le WeakMap.<\/p>\n\n\n\n
In programmazione, un riferimento debole \u00e8 un tipo di riferimento che pu\u00f2 essere eliminato dalla garbage collection, al contrario di un riferimento forte. Questa caratteristica \u00e8 particolarmente utile in certi scenari per prevenire perdite di memoria.<\/p>\n\n\n\n
Prima di ES14, solo gli oggetti potevano essere utilizzati come chiavi in raccolte come WeakMap. Tuttavia, con l’introduzione delle nuove specifiche, ora \u00e8 possibile utilizzare la maggior parte dei simboli come chiavi.<\/p>\n\n\n
const<\/span> weakMap = new<\/span> WeakMap<\/span>();\nconst<\/span> keySymbol = Symbol<\/span>('key'<\/span>);\n\nweakMap.set(keySymbol, 'value'<\/span>);\n\n\/\/ Da qualche parte nel codice, perdiamo il riferimento a keySymbol<\/span>\n\/\/ La garbage collection riconoscer\u00e0 che non ci sono pi\u00f9 riferimenti a keySymbol<\/span>\n\/\/ e pulir\u00e0 automaticamente la voce corrispondente nel WeakMap.<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Questa nuance sembra minore, ma ha profonde implicazioni sulla gestione della memoria e sulla prevenzione delle perdite di memoria. La capacit\u00e0 di utilizzare simboli come chiavi amplia le possibilit\u00e0 per gli sviluppatori e offre una flessibilit\u00e0 senza precedenti nella gestione delle WeakMap.<\/p>\n\n\n\n
Conclusione e sguardo al futuro<\/strong><\/h2>\n\n\n\n
Sebbene il 2023 non abbia portato cambiamenti rivoluzionari in JavaScript, ECMAScript 2023 (ES14) ha consolidato ulteriormente il linguaggio, rendendolo ancora pi\u00f9 potente, flessibile e adattabile alle esigenze contemporanee. Con l’evoluzione continua del web e l’importanza sempre maggiore di JavaScript nel panorama della programmazione, possiamo aspettarci che le future versioni del linguaggio portino ancora pi\u00f9 innovazioni e miglioramenti. E con l’attesa di nuove funzionalit\u00e0, come l’API temporale per la gestione dei datetime (Temporal), il futuro di JavaScript sembra pi\u00f9 luminoso che mai.<\/p>\n\n\n