Introduction
Depuis l'adoption du processus annuel de specification en 2015 (ES6/ES2015), JavaScript recoit chaque annee de nouvelles fonctionnalites approuvees par le comite TC39. La specification ECMAScript 2024 (ES15), finalisee en juin 2024, apporte des ajouts pratiques qui simplifient le code au quotidien.
Les ajouts majeurs d'ES2024
Array Grouping : `Object.groupBy()` et `Map.groupBy()`
Enfin une methode native pour grouper des elements de tableau :
const produits = [
{ nom: "Chemise", categorie: "Vetements", prix: 45 },
{ nom: "Pantalon", categorie: "Vetements", prix: 65 },
{ nom: "Casquette", categorie: "Accessoires", prix: 25 },
{ nom: "Ceinture", categorie: "Accessoires", prix: 35 },
];
const parCategorie = Object.groupBy(produits, (p) => p.categorie);
// { Vetements: [...], Accessoires: [...] }Avant ES2024, il fallait utiliser reduce() ou une bibliotheque comme Lodash. Object.groupBy() retourne un objet simple, Map.groupBy() retourne une Map (utile quand les cles ne sont pas des strings).
`Promise.withResolvers()`
Simplifie la creation de Promises ou le resolve/reject doit etre appele depuis l'exterieur :
// Avant
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
// Apres (ES2024)
const { promise, resolve, reject } = Promise.withResolvers();
// Usage : timer avec annulation
function createTimer(ms) {
const { promise, resolve } = Promise.withResolvers();
const id = setTimeout(() => resolve(), ms);
return { promise, cancel: () => clearTimeout(id) };
}`String.isWellFormed()` et `String.toWellFormed()`
Ces methodes gerent les surrogate pairs malformes en UTF-16, un probleme courant lors du traitement de texte contenant des emojis ou des caracteres speciaux :
const malformed = "abc\uD800def"; // surrogate solitaire
malformed.isWellFormed(); // false
malformed.toWellFormed(); // "abc�def" (remplace par U+FFFD)`Atomics.waitAsync()`
Pour le multithreading avec les Web Workers et les SharedArrayBuffers. Permet d'attendre un changement de valeur sans bloquer le thread principal :
const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);
// Dans un Worker
const result = Atomics.waitAsync(view, 0, 0);
result.value.then(() => {
console.log("La valeur a change !");
});Les fonctionnalites recentes les plus utiles (ES2020-2023)
L'optional chaining `?.` (ES2020)
// Au lieu de
const ville = user && user.adresse && user.adresse.ville;
// Ecrivez
const ville = user?.adresse?.ville;Le nullish coalescing `??` (ES2020)
// ?? ne remplace que null/undefined (pas 0, false ou "")
const port = config.port ?? 3000;
// Si config.port est 0, port = 0 (contrairement a || qui donnerait 3000)`structuredClone()` (ES2022)
Clone profondement un objet, supportant les types complexes (Date, Map, Set, ArrayBuffer) :
const original = { date: new Date(), items: [1, 2, { nested: true }] };
const copie = structuredClone(original);
copie.items[2].nested = false;
console.log(original.items[2].nested); // true (pas affecte)Les methodes de tableau non-mutantes (ES2023)
toSorted(), toReversed(), toSpliced() et with() retournent un nouveau tableau au lieu de modifier l'original :
const nombres = [3, 1, 4, 1, 5];
// Avant : sort() modifie l'original
const trie = [...nombres].sort();
// ES2023 : toSorted() ne modifie pas l'original
const trieES2023 = nombres.toSorted();
console.log(nombres); // [3, 1, 4, 1, 5] (inchange)
console.log(trieES2023); // [1, 1, 3, 4, 5]
// with() : remplacer un element par index
const modifie = nombres.with(2, 99); // [3, 1, 99, 1, 5]Les propositions en cours (Stage 3)
Le pattern matching
Inspire des langages fonctionnels, le pattern matching pourrait transformer la facon dont on ecrit des conditions complexes :
// Proposition (pas encore finale)
match (response) {
when ({ status: 200, body }) -> processBody(body),
when ({ status: 404 }) -> notFound(),
when ({ status: 500 }) -> serverError(),
default -> unknownStatus(),
}Les Decorators
Les decorateurs permettent d'ajouter des comportements aux classes et methodes de maniere declarative :
class API {
@logged
@cached(60)
async fetchUsers() {
return await fetch('/api/users');
}
}Conclusion
JavaScript continue d'evoluer vers un langage plus expressif et plus sur. Les ajouts d'ES2024 — groupement de tableaux, Promise.withResolvers() — simplifient des operations courantes. Gardez un oeil sur les propositions Stage 3 pour anticiper les prochaines evolutions.