Jeff Bruchado
Retour au blog

ECMAScript 2025 : Le Guide Complet des Nouvelles Features JavaScript

Salut HaWkers, en juin 2025, la 129e Assemblée Générale a officiellement approuvé la spécification ECMAScript 2025, apportant certaines des features les plus attendues par la communauté JavaScript.

Utilisez-vous déjà ces nouveautés ? Explorons chacune en détail, avec des exemples pratiques que vous pouvez appliquer dès aujourd'hui.

Iterator Helpers : La Feature Principale

L'ajout le plus significatif d'ES2025 sont les Iterator Helpers - un nouvel objet built-in Iterator avec des opérateurs fonctionnels qui transforment notre façon de travailler avec les collections.

Pourquoi Cela Importe

Contrairement aux Arrays qui évaluent immédiatement et produisent des arrays intermédiaires à chaque étape, Iterator fonctionne comme d'autres APIs de style fonctionnel où chaque opérateur est traité élément par élément.

// Avant (Arrays) : Crée des arrays intermédiaires
const result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  .filter(n => n % 2 === 0)  // Crée array [2, 4, 6, 8, 10]
  .map(n => n * 2)            // Crée array [4, 8, 12, 16, 20]
  .slice(0, 3);               // Crée array [4, 8, 12]

// Maintenant (Iterator) : Traite à la demande
const iterator = Iterator.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .filter(n => n % 2 === 0)
  .map(n => n * 2)
  .take(3);

// Ne traite que quand consommé
const result = [...iterator]; // [4, 8, 12]

Méthodes Disponibles

// Iterator.from() - Convertit les itérables en Iterator
const iter = Iterator.from([1, 2, 3]);
const mapIter = Iterator.from(new Map([['a', 1], ['b', 2]]));

// .map() - Transforme chaque élément
const doubled = Iterator.from([1, 2, 3])
  .map(x => x * 2)
  .toArray(); // [2, 4, 6]

// .filter() - Filtre les éléments
const evens = Iterator.from([1, 2, 3, 4, 5])
  .filter(x => x % 2 === 0)
  .toArray(); // [2, 4]

// .take() - Prend les N premiers éléments
const first3 = Iterator.from([1, 2, 3, 4, 5])
  .take(3)
  .toArray(); // [1, 2, 3]

// .drop() - Ignore les N premiers éléments
const after2 = Iterator.from([1, 2, 3, 4, 5])
  .drop(2)
  .toArray(); // [3, 4, 5]

// .flatMap() - Map + flatten
const flattened = Iterator.from([[1, 2], [3, 4]])
  .flatMap(arr => arr)
  .toArray(); // [1, 2, 3, 4]

Exemple Pratique : Traitement de Données

// Traitement d'un fichier CSV volumineux ligne par ligne
async function* readCSVLines(filePath) {
  const file = await Deno.open(filePath);
  const decoder = new TextDecoder();

  for await (const chunk of file.readable) {
    const lines = decoder.decode(chunk).split('\n');
    for (const line of lines) {
      yield line;
    }
  }
}

// Utilisation des Iterator Helpers pour traiter
const processedData = Iterator.from(readCSVLines('donnees.csv'))
  .filter(line => line.trim().length > 0)     // Supprime lignes vides
  .drop(1)                                      // Ignore l'en-tête
  .map(line => line.split(','))                 // Parse CSV
  .filter(([id, name]) => name.startsWith('A')) // Filtre par nom
  .take(100)                                    // Seulement les 100 premiers
  .map(([id, name, value]) => ({               // Transforme en objet
    id: parseInt(id),
    name,
    value: parseFloat(value)
  }));

// Consomme seulement le nécessaire
for (const record of processedData) {
  console.log(record);
}

Nouvelles Méthodes de Set

ES2025 ajoute des méthodes mathématiques au Set, le rendant beaucoup plus versatile.

Opérations d'Ensemble

const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([4, 5, 6, 7, 8]);

// .union() - Tous les éléments des deux
const union = setA.union(setB);
// Set {1, 2, 3, 4, 5, 6, 7, 8}

// .intersection() - Éléments en commun
const intersection = setA.intersection(setB);
// Set {4, 5}

// .difference() - Éléments dans A qui ne sont pas dans B
const difference = setA.difference(setB);
// Set {1, 2, 3}

// .symmetricDifference() - Éléments dans A ou B, mais pas les deux
const symDiff = setA.symmetricDifference(setB);
// Set {1, 2, 3, 6, 7, 8}

// .isSubsetOf() - A est-il contenu dans B ?
const isSubset = new Set([1, 2]).isSubsetOf(setA);
// true

// .isSupersetOf() - A contient-il B ?
const isSuperset = setA.isSupersetOf(new Set([1, 2]));
// true

// .isDisjointFrom() - A et B n'ont pas d'éléments en commun ?
const isDisjoint = setA.isDisjointFrom(new Set([10, 11]));
// true

Cas d'Usage : Système de Permissions

class PermissionManager {
  constructor() {
    this.rolePermissions = new Map();
  }

  defineRole(role, permissions) {
    this.rolePermissions.set(role, new Set(permissions));
  }

  getUserPermissions(roles) {
    // Unit toutes les permissions de tous les rôles
    return roles.reduce(
      (allPerms, role) => allPerms.union(
        this.rolePermissions.get(role) ?? new Set()
      ),
      new Set()
    );
  }

  hasAccess(userRoles, requiredPermissions) {
    const userPerms = this.getUserPermissions(userRoles);
    const required = new Set(requiredPermissions);

    // Vérifie si l'utilisateur a toutes les permissions nécessaires
    return required.isSubsetOf(userPerms);
  }

  getMissingPermissions(userRoles, requiredPermissions) {
    const userPerms = this.getUserPermissions(userRoles);
    const required = new Set(requiredPermissions);

    // Retourne les permissions manquantes
    return required.difference(userPerms);
  }
}

// Usage
const pm = new PermissionManager();

pm.defineRole('admin', ['read', 'write', 'delete', 'manage']);
pm.defineRole('editor', ['read', 'write']);
pm.defineRole('viewer', ['read']);

const userRoles = ['editor', 'viewer'];
const required = ['read', 'write', 'delete'];

console.log(pm.hasAccess(userRoles, required)); // false
console.log([...pm.getMissingPermissions(userRoles, required)]); // ['delete']

Promise.try()

Le nouveau Promise.try() reflète comment une fonction async se comporte, permettant d'exécuter des fonctions de manière synchrone quand possible, tout en capturant les erreurs de manière sécurisée.

// Problème : Gestion inconsistante des erreurs
function processSyncOrAsync(data) {
  if (typeof data === 'string') {
    // Synchrone - erreur non capturée par .catch()
    return JSON.parse(data);
  } else {
    // Asynchrone
    return fetch(data.url).then(r => r.json());
  }
}

// Solution ancienne (verbose)
function processSafe(data) {
  return new Promise(resolve => {
    resolve(processSyncOrAsync(data));
  });
}

// Solution ES2025 (élégante)
function processModern(data) {
  return Promise.try(() => {
    if (typeof data === 'string') {
      return JSON.parse(data);
    } else {
      return fetch(data.url).then(r => r.json());
    }
  });
}

// Usage uniforme
processModern('{"name": "test"}')
  .then(data => console.log(data))
  .catch(err => console.error('Erreur capturée :', err));

RegExp.escape()

La nouvelle méthode statique RegExp.escape() prévient les attaques par injection dans les chaînes d'expression régulière.

// Problème : L'input utilisateur peut casser la regex
const userInput = "prix : 100,00€ (remise)";

// Dangereux - les caractères spéciaux cassent la regex
// const unsafeRegex = new RegExp(userInput); // Erreur !

// Solution ES2025
const safePattern = RegExp.escape(userInput);
// "prix : 100,00€ \\(remise\\)"

const safeRegex = new RegExp(safePattern);
const text = "Le prix : 100,00€ (remise) est excellent !";

console.log(safeRegex.test(text)); // true

Usage en Recherche de Texte

function highlightText(text, searchTerm) {
  // Échappe les caractères spéciaux du terme de recherche
  const escapedTerm = RegExp.escape(searchTerm);
  const regex = new RegExp(`(${escapedTerm})`, 'gi');

  return text.replace(regex, '<mark>$1</mark>');
}

// Sécurisé même avec des caractères spéciaux
const result = highlightText(
  "Le prix est 50,00€ (ou 250€)",
  "50,00€ (ou"
);
// "Le prix est <mark>50,00€ (ou</mark> 250€)"

Float16Array

ES2025 ajoute Float16Array pour travailler avec des nombres à virgule flottante demi-précision.

// Utile pour les opérations GPU où la précision totale n'est pas nécessaire
const float16Data = new Float16Array([1.5, 2.5, 3.5, 4.5]);

// DataView gagne aussi des méthodes
const buffer = new ArrayBuffer(8);
const view = new DataView(buffer);

view.setFloat16(0, 3.14159, true);  // little-endian
const value = view.getFloat16(0, true);

console.log(value); // ~3.14 (précision réduite)

Pourquoi Float16 Importe

// Comparaison d'utilisation mémoire
const count = 1000000;

const float64 = new Float64Array(count); // 8MB
const float32 = new Float32Array(count); // 4MB
const float16 = new Float16Array(count); // 2MB

// Pour le machine learning et les graphiques, Float16 offre :
// - 75% moins de mémoire que Float64
// - 50% moins de mémoire que Float32
// - Traitement plus rapide sur les GPUs modernes

JSON Module Import

ES2025 standardise l'importation directe de JSON comme module.

// Importe JSON directement (fichiers locaux uniquement)
import appConfig from './config.json' with { type: 'json' };

// Fonctionne avec l'import dynamique aussi
const translations = await import('./i18n/fr-FR.json', {
  with: { type: 'json' }
});

// Usage
console.log(appConfig.apiUrl);
console.log(translations.default.welcome);

Duplicate Named Capture Groups

Maintenant vous pouvez utiliser le même nom dans deux parties d'une regex si une seule d'entre elles peut correspondre.

// Avant : Les noms devaient être uniques
const oldRegex = /(?<year>\d{4})-(?<month>\d{2})|(?<month2>\d{2})\/(?<year2>\d{4})/;

// ES2025 : Même nom dans les alternatives
const dateRegex = /(?<year>\d{4})-(?<month>\d{2})|(?<month>\d{2})\/(?<year>\d{4})/;

const match1 = "2025-12".match(dateRegex);
console.log(match1.groups.year);  // "2025"
console.log(match1.groups.month); // "12"

const match2 = "12/2025".match(dateRegex);
console.log(match2.groups.year);  // "2025"
console.log(match2.groups.month); // "12"

RegExp v Flag (Unicode Sets)

Le flag v est une mise à jour du flag u, activant plus de fonctionnalités liées à Unicode.

// Intersection de classes de caractères
const greekVowels = /[\p{Script=Greek}&&\p{Letter}&&[αεηιουω]]/v;

// Soustraction de classes
const nonDigitLetters = /[\p{Letter}--\p{Number}]/v;

// Union explicite
const alphanumericPlus = /[[\p{Letter}][\p{Number}][_-]]/v;

Compatibilité et Adoption

Support Navigateurs (Décembre 2025)

Feature Chrome Firefox Safari Node.js
Iterator Helpers 122+ 131+ 17.4+ 22+
Set Methods 122+ 127+ 17+ 22+
Promise.try 128+ 132+ 18+ 23+
RegExp.escape 136+ 134+ 18.2+ 23+
Float16Array 127+ 129+ 18+ 22+

Comment Utiliser Aujourd'hui

// Vérification de support
const supportsIteratorHelpers = typeof Iterator !== 'undefined';
const supportsSetMethods = typeof Set.prototype.union === 'function';
const supportsPromiseTry = typeof Promise.try === 'function';

// Polyfills disponibles
// npm install core-js
import 'core-js/actual/iterator';
import 'core-js/actual/set';
import 'core-js/actual/promise';

Conclusion

ECMAScript 2025 apporte des features attendues depuis des années par la communauté JavaScript. Iterator Helpers et Set Methods en particulier changent fondamentalement notre façon de travailler avec les collections, offrant un code plus propre et plus performant.

Le meilleur, c'est que beaucoup de ces features sont déjà disponibles dans les navigateurs modernes. Commencez à les utiliser dès aujourd'hui et améliorez la qualité de votre code JavaScript.

Si vous voulez approfondir vos connaissances en JavaScript moderne, je recommande de jeter un œil à un autre article : Passkeys et WebAuthn : Le Guide Complet où vous découvrirez comment implémenter l'authentification moderne dans vos applications.

C'est parti ! 🦅

📚 Vous Voulez Approfondir Vos Connaissances en JavaScript ?

Cet article a couvert les nouvelles features d'ES2025, mais il y a bien plus à explorer dans le monde du développement moderne.

Les développeurs qui investissent dans des connaissances solides et structurées ont tendance à avoir plus d'opportunités sur le marché.

Matériel d'Étude Complet

Si vous voulez maîtriser JavaScript du débutant à l'avancé, j'ai préparé un guide complet :

Options d'investissement :

  • 1x de 9,90€ par carte
  • ou 9,90€ comptant

👉 Découvrir le Guide JavaScript

💡 Matériel mis à jour avec les meilleures pratiques du marché

Commentaires (0)

Cet article n'a pas encore de commentaires. Soyez le premier!

Ajouter des commentaires