Getting started General
Components
Forms
Trends
Utilities
Migrate from v1
  Join us
  JavaScript Articles

Actualites JavaScript ES2026 : decorateurs, API Temporal et plus

JavaScript

On dit souvent "ES2026" pour parler du prochain lot de JavaScript standardise. La vraie source de verite, ce sont les propositions TC39 et leurs stades. Cet article resume plusieurs points a fort impact en langage simple, avec de petits exemples. Tout le code ici est ecrit de zero pour plus de clarte.

Fonctionnalites du langage JavaScript
JavaScript a venir : decorateurs, dates, ressources et aides

Une note rapide avant les extraits : le stade compte. Le stade 4 signifie "termine" pour le processus de spec ; le stade 3 signifie que les implementeurs sont confiants et que vous le verrez d'abord dans les outils et les runtimes. Verifiez toujours les tableaux de compatibilite pour votre navigateur cible ou votre version de Node.

1. Gestion explicite des ressources : using et await using

Les objets peuvent exposer un nettoyage via Symbol.dispose (synchrone) ou Symbol.asyncDispose (asynchrone). La declaration using execute ce nettoyage a la fin du bloc, meme si une erreur est levee.

class Ticket {
  #used = false;
  use() {
    if (this.#used) throw new Error('already used');
    this.#used = true;
    return 'admit one';
  }
  [Symbol.dispose]() {
    console.log('ticket disposed');
  }
}

{
  using t = new Ticket();
  console.log(t.use());
} // logs: admit one, then ticket disposed

2. Decorateurs (syntaxe standard)

Les decorateurs enveloppent les classes, les methodes ou les champs pour ajouter un comportement transversal (journalisation, validation, mise en cache) sans modifier chaque corps de methode. La forme @ est analysee comme une vraie syntaxe ; il vous faut encore une chaine d'outils (par exemple Babel ou TypeScript) tant que votre runtime ne la prend pas en charge nativement.

// When a method runs, log its name (decorator receives the original function + context)
function announce(target, context) {
  if (context.kind !== 'method') return target;
  const name = context.name;
  return function (...args) {
    console.log(`${String(name)}()`);
    return target.call(this, ...args);
  };
}

class Cat {
  @announce
  meow() {
    return 'meow!';
  }
}

const c = new Cat();
console.log(c.meow()); // logs: meow() then meow!

Meme idee qu'en enveloppant Cat.prototype.meow a la main, mais l'intention reste a cote de la declaration.

3. RegExp.escape

La saisie utilisateur contient souvent des metacaracteres d'expressions regulieres (., ?, $, etc.). RegExp.escape transforme une chaine en fragment litteral pour new RegExp(...).

const raw = '3.14';
const re = new RegExp(RegExp.escape(raw));
console.log(re.test('pi is 3.14')); // true

4. Promise.withResolvers

Parfois il vous faut une promesse et la possibilite de la resoudre depuis l'exterieur de l'executeur. Cette API renvoie { promise, resolve, reject } sur une ligne.

const { promise, resolve } = Promise.withResolvers();
setTimeout(() => resolve('done'), 10);
console.log(await promise); // 'done'

5. Object.groupBy et Map.groupBy

Regroupez les elements d'un tableau par cle sans passer par une bibliotheque. Object.groupBy utilise des cles chaine ; Map.groupBy peut utiliser n'importe quelle valeur comme cle.

const pets = [
  { name: 'Luna', kind: 'cat' },
  { name: 'Rex', kind: 'dog' },
  { name: 'Milo', kind: 'cat' },
];
const byKind = Object.groupBy(pets, p => p.kind);
console.log(byKind.cat.length); // 2

6. API Temporal

Date a des pieges bien connus (fuseaux horaires, analyse, arithmetique). Temporal separe les dates de calendrier, les heures murales, les instants et les valeurs avec fuseau pour que les operations restent previsibles.

// Plain calendar date (no timezone ambiguity)
const d = Temporal.PlainDate.from('2026-03-25');
const next = d.add({ days: 1 });
console.log(next.toString()); // 2026-03-26

// Difference as a rich object (not "milliseconds since epoch")
const birth = Temporal.PlainDate.from('2000-05-10');
const age = birth.until(Temporal.PlainDate.from('2026-03-25'));
console.log(`${age.years}y`); // e.g. 25y

Utilisez un polyfill ou une version moderne du runtime qui embarque Temporal tant que la proposition n'est pas terminee.

7. Nouvelles methodes Set

Les Set gagnent une algebre d'ensembles de premier niveau : union, intersection, difference, difference symetrique, et des tests de sous-ensemble ou sur-ensemble.

const a = new Set([1, 2, 3]);
const b = new Set([3, 4]);
console.log([...a.union(b)]);           // [1, 2, 3, 4]
console.log([...a.intersection(b)]);    // [3]
console.log([...a.difference(b)]);      // [1, 2]

8. Aides pour iterateurs

Tout iterable (pas seulement les tableaux) peut etre enchaine avec des aides paresseuses comme .map, .filter, .take, puis materialise avec .toArray() quand vous avez besoin d'un tableau.

function* nums() {
  yield 1; yield 2; yield 3; yield 4;
}
const smallEvens = nums()
  .filter(n => n % 2 === 0)
  .take(1)
  .toArray();
console.log(smallEvens); // [2]

Comment essayer cela sans risque

  • Preferez la documentation officielle et TC39 aux titres de blogs : les annees sont des etiquettes ; les stades et l'etat de deploiement sont des faits.
  • Utilisez le REPL Babel ou TypeScript pour la syntaxe qui n'est pas encore native dans votre cible (decorateurs, using dans certaines configurations).
  • Polyfill Temporal si vous prototypez de la logique de dates avant qu'elle soit partout.

Si vous voulez une seule vue d'ensemble lisible qui regroupe ces sujets, l'article Medium lie dans l'intro est une bonne lecture d'accompagnement avec les propositions officielles.

Commencez à créer avec Axentix

Prêt à créer des sites web exceptionnels ? Commencez avec le framework Axentix dès aujourd'hui.

Commencer

Articles similaires