Le standard ECMAScript évolue chaque année avec des fonctionnalités qui transforment la façon d’écrire du JavaScript. Cette formation de 2 jours fait le tour complet des apports de ES6 à ES16, soit ES2015 à ES2025 : classes et héritage, modules natifs, arrow functions, destructuration, Promises, async/await, optional chaining, private fields, jusqu’aux iterator helpers et nouvelles méthodes Set d’ES2025. Vous apprendrez aussi à distinguer les fonctionnalités finalisées des proposals TC39 encore en stage — Temporal, Decorators, Records and Tuples, Pipeline — et à mettre en place une chaîne d’outillage moderne — Vite, esbuild, swc, Babel, TypeScript — pour garantir la compatibilité navigateur.

Public visé

Développeurs ayant à réaliser des applications Web responsives.

Objectifs pédagogiques

À l’issue de cette formation, vous serez capable de :

Reconnaître et utiliser les apports des normes ES2015 alias ES6 à ES2025 alias ES16
Distinguer les fonctionnalités finalisées dans les normes ECMAScript des proposals encore en stage TC39
Choisir entre fonctionnalité native, polyfill et bundler selon la cible navigateur
Anticiper les évolutions à venir via le processus TC39 — Temporal, Decorators, Records and Tuples, Pipeline
Adopter ces fonctionnalités dans des projets réels avec un outillage moderne — Vite, swc, esbuild, Babel, TypeScript

Programme

Jour 1 - Matin

ES2015 alias ES6 — la révolution

Nouvelle syntaxe

déclarer des variables avec let et const, comprendre la portée de bloc
écrire des arrow functions et leurs implications sur this
composer avec les template literals et les tagged templates
déstructurer objets et tableaux
utiliser default parameters, rest et spread

Travaux pratiques :

Refondre un module legacy en exploitant let/const, arrow functions, destructuring et template literals

Classes et héritage

déclarer une classe avec ses méthodes et accesseurs
ajouter des méthodes statiques
hériter avec extends, appeler super
comprendre le sucre syntaxique vs prototypes

Travaux pratiques :

Transformer une hiérarchie basée sur prototypes en classes ES6 sans changement de comportement

Modules natifs ES

déclarer named exports et default export
consommer un module avec import
comparer aux approches AMD et CommonJS
charger dynamiquement avec import() depuis ES2020

Travaux pratiques :

Modulariser un script monolithique en ES Modules natifs avec import dynamique

Nouvelles structures de données

collectionner avec Map et Set
gérer des références faibles avec WeakMap et WeakSet
créer des clés uniques avec Symbol
intercepter avec Proxy et Reflect

Travaux pratiques :

Implémenter un cache à références faibles via WeakMap et un objet observable via Proxy

Jour 1 - Après-midi

ES2015 suite, et ES2016 à ES2018

Iterators et generators — ES2015

définir un itérateur via Symbol.iterator
itérer avec for…of
créer un generator avec function* et yield
composer des pipelines paresseux

Travaux pratiques :

Écrire un generator qui pagine une collection sur demande

Promises — ES2015

créer une promesse avec resolve et reject
chaîner avec then et catch
composer avec Promise.all et Promise.race
comprendre la propagation des erreurs

Travaux pratiques :

Implémenter une fonction de retry avec back-off basée sur Promises

ES2016 alias ES7 — petits apports

tester l’appartenance avec Array.prototype.includes
élever avec l’opérateur d’exponentiation **

Travaux pratiques :

Remplacer des Array.prototype.indexOf par includes là où c’est plus lisible

ES2017 alias ES8 — async / await

structurer du code asynchrone avec async / await
itérer avec Object.entries et Object.values
aligner du texte avec padStart et padEnd
découvrir la mémoire partagée et Atomics

Travaux pratiques :

Convertir un module .then() complexe en async/await en préservant le parallélisme

ES2018 alias ES9 — objets et async iteration

déstructurer et reconstruire des objets avec rest et spread
nettoyer après une promesse avec Promise.prototype.finally
itérer asynchroniquement avec for await…of
exploiter les expressions régulières avancées — lookbehind, named groups, dotAll

Travaux pratiques :

Implémenter un traitement de stream HTTP via for await…of et regex named groups

Jour 2 - Matin

ES2019 → ES2022

ES2019 alias ES10 — collections et nettoyage

aplatir un tableau avec Array.prototype.flat et flatMap
construire un objet à partir d’entrées avec Object.fromEntries
nettoyer une chaîne avec trimStart et trimEnd
omettre la binding du catch pour un catch sans paramètre
exposer la description d’un Symbol via Symbol.description

Travaux pratiques :

Transformer un FormData ou des query string en objet via Object.fromEntries

ES2020 alias ES11 — accès et types

naviguer en sécurité avec optional chaining ?.
valoriser une option avec nullish coalescing ??
manipuler de très grands entiers avec BigInt
attendre toutes les promesses avec Promise.allSettled
charger dynamiquement un module avec import()
accéder à l’objet global avec globalThis
énumérer toutes les correspondances regex avec String.prototype.matchAll

Travaux pratiques :

Sécuriser un accès profond à un objet de configuration avec ?. et ??

ES2021 alias ES12 — ergonomie et GC fin

séparer visuellement un nombre avec les numeric separators comme 1_000_000
remplacer toutes les occurrences avec String.prototype.replaceAll
combiner condition et affectation avec ||=, &&=, ??=
prendre la première promesse résolue avec Promise.any
accéder finement au GC avec WeakRef et FinalizationRegistry
déclarer des méthodes privées d’instance avec #

Travaux pratiques :

Remplacer une chaîne de String.replace par replaceAll et intégrer un cache à WeakRef

ES2022 alias ES13 — classes modernes et erreurs

déclarer des champs publics et privés préfixés par # dans une classe
exécuter du code à la création de la classe avec static blocks
tester la présence d’une propriété avec Object.hasOwn
chaîner les erreurs avec Error cause
attendre au top niveau avec top-level await dans un module
accéder par index négatif avec Array.prototype.at, String.prototype.at
capturer des indices regex avec le flag /d

Travaux pratiques :

Refondre une hiérarchie POO avec champs privés #, static blocks et Error cause sur les exceptions

Jour 2 - Après-midi

ES2023 → ES2025 et perspectives

ES2023 alias ES14 — immuabilité et clés faibles

transformer sans muter avec les méthodes Array immutables toSorted, toReversed, with…
chercher en arrière avec Array.prototype.findLast et findLastIndex
utiliser des Symbols comme clés de WeakMap
introduire un script avec hashbang #!

Travaux pratiques :

Refondre des opérations Array mutantes en versions immutables, intégrer un cache à clés Symbol

ES2024 alias ES15 — groupements et concurrence

regrouper avec Object.groupBy et Map.groupBy
découpler création et résolution de promesse avec Promise.withResolvers
exprimer des classes de caractères enrichies avec le regex flag /v
attendre asynchroniquement avec Atomics.waitAsync
redimensionner un buffer avec Resizable ArrayBuffer
valider l’Unicode avec String.prototype.isWellFormed et toWellFormed

Travaux pratiques :

Regrouper des données métier avec Object.groupBy, implémenter un sémaphore avec Promise.withResolvers

ES2025 alias ES16 — iterators et collections enrichies

chaîner sur un itérateur avec Iterator.prototype.map / filter / take / drop / toArray
composer des collections avec les nouvelles méthodes Set — intersection, union, difference et leurs variantes
importer des données structurées avec JSON modules et import attributes
envelopper une fonction synchrone avec Promise.try
manipuler des nombres flottants 16 bits avec Float16Array
échapper proprement avec RegExp.escape
sommer sans erreur d’arrondi avec Math.sumPrecise

Travaux pratiques :

Refondre un traitement de pipeline en iterator helpers chaînés et exploiter Set.intersection sur des données réelles

Comprendre le processus TC39

distinguer les stages 0 à 4 et leurs implications
identifier les proposals matures à suivre — Temporal API en Stage 3 avec finalisation imminente, Decorators en Stage 3, Records and Tuples en Stage 2, Pipeline operator en Stage 2 et Type Annotations en Stage 1
évaluer la maturité d’une feature avant de l’adopter en production
anticiper ES2026 prévu en juin 2026 — proposals en finalisation

Travaux pratiques :

Sélectionner trois proposals d’intérêt pour son projet, justifier l’adoption ou l’attente

Outillage moderne

transpiler avec Babel ou swc selon la cible navigateur
bundler avec Vite, esbuild ou Rollup
typer progressivement avec TypeScript et JSDoc
définir une cible de support avec browserslist

Travaux pratiques :

Projet final : configurer un projet Vite ciblant les 2 dernières versions des navigateurs evergreen, exploitant trois apports ES2024-2025 et fallback automatique pour les anciens navigateurs

Modalités d’évaluation des acquis

En cours de formation, par des études de cas ou des travaux pratiques. En fin de formation, par un questionnaire d’auto-évaluation.

Voir aussi

Vous serez peut-être intéressés par les formations suivantes :

Formation DEV-JS-300 — JavaScript - ECMAScript 6 à 16 - Les nouveautés. Domaine : Développement. Niveau : Avancé. Durée : 2 jours (14 heures). Mots-clés : javascript, ecmascript, es2015, es2025, classes, modules, async, await, optional chaining, iterator helpers, set methods, object groupby, promise withresolvers, tc39, développement, avancé. Cylian Formation, Dijon.