Le novità di ECMAScript 15 (2024): guida completa con esempi di codice

Nell'ultimo articolo abbiamo parlato di come intraprendere la carriera da web developer, analizzando la carriera universitaria o un coding bootcamp. Tuttavia, mentre noi apprendiamo le basi dello sviluppo Frontend, JavaScript continua ad evolversi, ed è giunto il momento quindi di scoprire le novità di ECMAScript 15 (o ES2024 o ES15). ES15 introduce funzionalità ancora più interessanti per rendere il tuo codice più pulito, veloce e manutenibile, quindi ho deciso di illustrare le novità di ECMAScript 15 che devi conoscere, insieme a esempi pratici per aiutarti ad applicarle nella programmazione reale. Sei pronto a diventare un Frontend Developer migliore?

Le novità di ECMAScript 15: l'Operatore Pipeline

L'operatore pipeline è una delle funzionalità più attese di ECMAScript 15. Permette di creare catene di chiamate di funzioni più leggibili, specialmente quando le funzioni devono essere applicate in sequenza.

Invece di annidare multiple funzioni, l'operatore pipeline rende il tuo codice più facile da seguire concatenando le chiamate delle funzioni in modo più naturale.

const double = (x) => x * 2;
const increment = (x) => x + 1;

let result = 5
  |> increment
  |> double;

console.log(result); // Output: 12

Qui, 5 viene passato prima attraverso la funzione increment e poi attraverso la funzione double, tutto in una sequenza chiara e leggibile. Questo operatore riduce la necessità di chiamate di funzioni profondamente annidate, rendendo il codice molto più gestibile.

Le novità di ECMAScript 15: le espressioni do

L'espressione do permette di eseguire blocchi di codice come espressioni e restituire un valore da essi. Questo è utile quando hai bisogno di logica condizionale o calcoli in linea.

let value = do {
  if (someCondition) {
    'Success';
  } else {
    'Failure';
  }
};

console.log(value); // Output: 'Success' or 'Failure'

In questo modo, invece dei tradizionali condizionali, le espressioni do permettono espressioni flessibili basate su blocchi con un valore restituito.

Le novità di ECMAScript 15: async context manager

Un'altra grande novità introdotta in ECMAScript 15 è il gestore di contesto asincrono, o async context manager. Semplifica la gestione delle risorse nelle operazioni asincrone. È ispirato allo statement with di Python e aiuta a gestire risorse come file handle, connessioni database e stream di rete, garantendo una corretta pulizia.

async with (const db = await connectToDatabase()) {
  await db.query('SELECT * FROM users');
}
// Chiude automaticamente la connessione al database dopo il blocco

Questo rende più semplice la gestione delle risorse in un ambiente asincrono, riducendo il codice boilerplate come la chiusura manuale delle connessioni.

Le novità di ECMAScript 15: metodi array immutabili

ECMAScript 15 introduce metodi non mutanti per gli array: toSorted, toReversed, e toSpliced. Questi metodi restituiscono un nuovo array senza alterare l'array originale, supportando l'immutabilità, che è cruciale nella programmazione funzionale.

let numbers = [4, 2, 7, 1];

// Non-mutating methods
let sorted = numbers.toSorted();
let reversed = numbers.toReversed();
let spliced = numbers.toSpliced(1, 2);

console.log(sorted); // Output: [1, 2, 4, 7]
console.log(reversed); // Output: [1, 7, 2, 4]
console.log(spliced); // Output: [4, 1]
console.log(numbers); // Array originale immutato: [4, 2, 7, 1]

Le novità di ECMAScript 15: symbol metadata per il Metaprogramming

Con Symbol.metadata, ECMAScript 15 migliora il metaprogramming permettendo agli sviluppatori di allegare e recuperare metadati da/verso membri e metodi delle classi.

class MyClass {
  @Reflect.metadata('role', 'admin')
  doSomething() {}
}

const metadata = Reflect.getMetadata('role', MyClass.prototype, 'doSomething');
console.log(metadata); // Output: 'admin'

Questa nuova funzionalità permette una riflessione dinamica e capacità di metaprogramming più sofisticate.

Le novità di ECMAScript 15: Promise.withResolvers()

Infine, abbiamo una novità davvero interessante riguardo le Promise: Promise.withResolvers(). Questo metodo semplifica la gestione delle promise restituendo sia la promise che le sue funzioni resolve e reject.

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('Data loaded!'), 2000);

promise.then((message) => {
  console.log(message); // Output: 'Data loaded!'
});

Questo elimina la necessità di definire resolve e reject separatamente, rendendo più pulito il codice basato su promise.

Le novità di ECMAScript 15: raggruppamento array

Grandi miglioramenti anche sul fronte degli array con nuovi metodi di raggruppamento: groupBy e groupByToMap.

Con il nuovo metodo groupBy, puoi raggruppare elementi dell'array basandoti su un criterio, creando un modo più intuitivo per lavorare con grandi set di dati.

const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];

const grouped = Array.groupBy(items, item => item.type);
console.log(grouped);
// Output: { fruit: [{...}, {...}], vegetable: [{...}] }

Questa funzionalità semplifica le operazioni di raggruppamento senza dover ciclare manualmente attraverso i dati.

Le novità di ECMAScript 15: i Decoratori

Finalmente abbiamo i Decoratori in JavaScript grazie a ECMAScript 15, che permettono di aggiungere comportamenti o modificare classi/metodi in modo dichiarativo. Sarà un vero cambiamento nel tuo codice.

function logMethod(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Called ${key} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Car {
  @logMethod
  drive(speed) {
    console.log(`Driving at ${speed} km/h`);
  }
}

const myCar = new Car();
myCar.drive(100);
// Output: "Called drive with arguments: 100"
//         "Driving at 100 km/h"

Nel caso in cui ti abbia colpito il lavoro di un Front End Developer e sei interessato/a a iniziare una nuova carriera come Front End developer, posso aiutarti. Ho creato un corso per realizzare il tuo desiderio di diventare Front End Developer o per approfondire il linguaggio di programmazione JavaScript con maggiori dettagli. Acquista il corso completo qui adesso con il 40% di sconto. Sarà un viaggio dalle basi di JavaScript fino ad un livello più avanzato. Parleremo di testing, del protocollo HTTP, delle diverse versioni di ECMAScript e tante altre cose che puoi consultare sulla web. Nella versione completa avrai la mia assistenza a disposizione, tanti quiz, il materiale in PDF e un meeting finale. Se non fossi interessato/a alla versione completa, avrai la possibilità di acquistare la versione più economica che non comprende questi ultimi citati vantaggi. Acquista la versione Basic qui.

Riepilogo delle novità di ECMAScript 15

ECMAScript 15 è ricco di novità come l'operatore pipeline, le espressioni do, la gestione delle risorse asincrone, i metodi array immutabili e molto altro. Queste funzionalità migliorano JavaScript riducendo la complessità, migliorando la leggibilità e supportando l'immutabilità e il metaprogramming.

Che tu stia lavorando con le promise, gestendo operazioni asincrone o raggruppando dati, questi nuovi strumenti offrono soluzioni più pulite ed efficienti. Rimani aggiornato, inizia a incorporare queste funzionalità nei tuoi progetti e sorprendi i tuoi colleghi!

Se pensi che l'articolo abbia un buon contenuto e abbia raggiunto l'obiettivo di spiegare le differenze tra il debounce e il throttle di una funzione in JavaScript, e vuoi supportarmi, puoi seguire questi semplici passaggi facili e gratuiti:

1. Lascia un mi piace cliccando sull'icona del cuore qui sotto;
2. Condividi questo post sui tuoi account social o con i tuoi amici;
3. Seguimi su Instagram, Facebook, Twitter e su Github;
4. Iscriviti alla newsletter qui sotto per non perderti nessun articolo, sconto o gossip (ce ne saranno tanti).

Ti auguro tante altre buone letture!