ECMAScript et les versions de JavaScript (ES5, ES6 et suivantes)

1. Objectifs

   • Comprendre ce qu'est ECMAScript et qui fait évoluer le langage.
   • Connaître le processus d'ajout d'une nouveauté (les stages du TC39).
   • Identifier les principales versions (ES5, ES2015/ES6 jusqu'à ES2026) et leurs apports.
   • Savoir vérifier si une fonctionnalité est utilisable dans les navigateurs.

2. ECMAScript : la norme de JavaScript

   • ECMAScript (abrégé ES) est la spécification officielle du langage : un document qui décrit précisément la syntaxe et le comportement de JavaScript. JavaScript est le langage concret qui applique cette norme.
   • Une comparaison simple : ECMAScript est la recette, chaque navigateur est un cuisinier qui la suit. Grâce à la norme, un même script donne le même résultat dans Chrome, Firefox, Safari ou Edge.
   • La norme est publiée par Ecma International, un organisme de normalisation basé à Genève, sous deux références principales :
     • ECMA-262: le langage lui-même (syntaxe, types, objets Array, Math, Promise…) ;
     • ECMA-402: l'API d'internationalisation Intl (formatage des dates, nombres et devises selon la langue).
   • Le langage est géré par le comité technique TC39. Il réunit les éditeurs de navigateurs (Google, Mozilla, Apple, Microsoft), des entreprises et des experts. Ses travaux sont publics sur GitHub (github.com/tc39).
   À ne pas confondre : le DOM, fetch, localStorage ou alert() ne font pas partie d'ECMAScript. Ce sont des API du navigateur, normalisées par le W3C et le WHATWG. C'est pour cela qu'elles n'existent pas dans Node.js (sauf exceptions comme fetch, ajouté ensuite).

3. Comment une nouveauté entre dans le langage : les stages du TC39

   • Chaque nouvelle fonctionnalité commence par une proposition (proposal) qui franchit plusieurs étapes :

   Stage	Nom	Signification
   0	Idée	Une idée présentée au comité, pas encore étudiée.
   1	Proposition	Le problème est jugé intéressant ; le comité accepte d'y travailler.
   2	Brouillon	La solution est choisie ; la syntaxe et le fonctionnement sont décrits.
   2.7	Approuvée en principe	La spécification est terminée ; on écrit les tests (étape ajoutée en 2024).
   3	Candidate	Les navigateurs l'implémentent et donnent leurs retours.
   4	Terminée	Au moins deux moteurs l'ont livrée : elle entre dans la prochaine version de la norme.

   • Chaque année, en mars, le TC39 fige la liste des propositions au stage 4. L'Assemblée générale d'Ecma approuve ensuite la nouvelle édition en juin.
   • Une proposition peut prendre de quelques mois à plusieurs années : l'API Temporal (dates et heures) a mis 9 ans, de 2017 à mars 2026, pour atteindre le stage 4.

   

4. Les noms des versions : ES6 ou ES2015 ?

   • Jusqu'en 2015, les versions portaient un numéro: ES1 (1997), ES2 (1998), ES3 (1999), ES5 (2009). ES4 a été abandonné.
   • Depuis 2015, une version sort chaque année et porte le nom de l'année: ES2015, ES2016… ES2026.
   • Les deux noms coexistent : ES6 = ES2015, ES7 = ES2016, etc. Dans la pratique, on dit souvent « ES6+ » ou « JavaScript moderne » pour désigner tout ce qui est arrivé depuis 2015.
   • Chaque version contient les précédentes : un code écrit en ES5 fonctionne toujours aujourd'hui. Le langage ne casse jamais le web existant.

5. ES5 (2009) : la base historique

   • Le mode strict, qui interdit certaines erreurs silencieuses.
   • Le support natif de JSON: JSON.parse() et JSON.stringify().
   • Les méthodes de tableaux : forEach, map, filter, reduce, indexOf…

   "use strict";
   var notes = [12, 15, 9];
   var doubles = notes.map(function (n) {
     return n * 2;
   });
   console.log(JSON.stringify(doubles)); // "[24,30,18]"

6. ES2015 (ES6) : la grande révolution

   • C'est la plus grosse mise à jour de l'histoire du langage. Elle a donné naissance au « JavaScript moderne » :
     • let et const (variables limitées au bloc) ;
     • les fonctions fléchées =>;
     • les template literals (gabarits de chaînes) avec `...${variable}...`;
     • la déstructuration, les paramètres par défaut, l'opérateur spread / rest ...;
     • les classes (class, extends) ;
     • les modules (import / export) ;
     • les promesses (Promise), les collections Map et Set, la boucle for...of.

   const notes = [12, 15, 9];
   const doubles = notes.map(n => n * 2);
   
   const stagiaire = { nom: "Sami", groupe: "DEV101" };
   const { nom, groupe } = stagiaire;               // déstructuration
   console.log(`${nom} est dans le groupe ${groupe}`);
   
   class Personne {
     constructor(nom) { this.nom = nom; }
     saluer() { return `Bonjour, je suis ${this.nom}`; }
   }
   console.log(new Personne("Amal").saluer());

7. Les versions annuelles de 2016 à 2024

Version	Principales nouveautés	Exemple
ES2016	Array.includes(), opérateur puissance	[1, 2, 3].includes(2) → true; 2 ** 10 → 1024
ES2017	async / await, Object.entries(), Object.values(), padStart()	"7".padStart(3, "0") → "007"
ES2018	spread / rest sur les objets, Promise.finally(), for await...of	const copie = { ...stagiaire, note: 15 }
ES2019	flat(), flatMap(), Object.fromEntries()	[1, [2, [3]]].flat(2) → [1, 2, 3]
ES2020	chaînage optionnel ?., opérateur ??, BigInt, Promise.allSettled(), globalThis	user?.adresse?.ville ?? "inconnue"
ES2021	replaceAll(), &&=, ||=, ??=, séparateurs numériques, Promise.any()	const prix = 1_000_000;
ES2022	champs et méthodes privés #, await au niveau supérieur des modules, at(), Object.hasOwn()	[10, 20, 30].at(-1) → 30
ES2023	toSorted(), toReversed(), with(), findLast() (copies sans modifier l'original)	[3, 1, 2].toSorted() → [1, 2, 3]
ES2024	Object.groupBy(), Map.groupBy(), Promise.withResolvers()	Object.groupBy(stagiaires, s => s.groupe)

8. ES2025 et ES2026 : les dernières versions

ECMAScript 2025 (16^e édition, approuvée le 25 juin 2025)

• Méthodes d'itérateurs: map, filter, take, drop, toArray… directement sur un itérateur.
• Opérations d'ensembles sur Set: union(), intersection(), difference(), isSubsetOf()…
• Modules JSON: import config from "./config.json" with { type: "json" };
• RegExp.escape(), Promise.try(), le type Float16Array.

const groupeA = new Set(["Ali", "Sami", "Rim"]);
const groupeB = new Set(["Rim", "Nour"]);
console.log(groupeA.union(groupeB));        // Set {"Ali", "Sami", "Rim", "Nour"}
console.log(groupeA.intersection(groupeB)); // Set {"Rim"}

ECMAScript 2026 (17^e édition, approuvée le 30 juin 2026)

• Sept ajouts à la bibliothèque standard, sans nouvelle syntaxe :
  • Math.sumPrecise(): une somme de nombres décimaux plus précise ;
  • Array.fromAsync(): crée un tableau à partir d'une source asynchrone ;
  • Error.isError(): vérifie de façon fiable qu'une valeur est une erreur ;
  • Map.prototype.getOrInsert(): lit une clé ou l'ajoute si elle n'existe pas ;
  • conversion Base64 et hexadécimal sur Uint8Array;
  • Iterator.concat(): enchaîne plusieurs itérateurs ;
  • l'accès au texte source dans JSON.parse().

// Regrouper des produits par catégorie avec getOrInsert (ES2026, navigateur récent)
const parCategorie = new Map();
for (const p of [{ nom: "Clavier", cat: "Info" }, { nom: "Stylo", cat: "Bureau" }, { nom: "Souris", cat: "Info" }]) {
  parCategorie.getOrInsert(p.cat, []).push(p.nom);
}
console.log(parCategorie); // Map { "Info" => ["Clavier", "Souris"], "Bureau" => ["Stylo"] }

// Temporal (prévu pour ES2027) : à tester dans un navigateur récent
const aujourdhui = Temporal.Now.plainDateISO();
const examen = Temporal.PlainDate.from("2027-06-15");
console.log(aujourdhui.until(examen).days, "jours avant l'examen");

if (typeof Math.sumPrecise === "function") {
  console.log(Math.sumPrecise([0.1, 0.2, 0.3]));
} else {
  console.log("Math.sumPrecise n'est pas encore disponible dans ce navigateur");
}

Activité 1 : associer chaque nouveauté à sa version

• Associez : async/await — let et const — ?. — toSorted() — Set.union() — Math.sumPrecise() — JSON.parse()
• aux versions : ES5 — ES2015 — ES2017 — ES2020 — ES2023 — ES2025 — ES2026.

Activité 2 : moderniser un code ES5

• Réécrivez ce code avec const, une fonction fléchée, un template literal et la déstructuration :

var stagiaire = { nom: "Rim", moyenne: 14.5 };
var nom = stagiaire.nom;
var moyenne = stagiaire.moyenne;
var notes = [12, 15, 18];
var total = notes.reduce(function (a, b) { return a + b; }, 0);
console.log(nom + " a une moyenne de " + moyenne + " et un total de " + total);

Activité 3 : enquête de compatibilité

• Sur MDN, cherchez les pages de Array.prototype.at(), Object.groupBy(), Set.prototype.union() et Math.sumPrecise().
• Pour chacune, notez son statut Baseline et la première version de Chrome et de Firefox qui la supporte. Présentez le résultat dans un tableau.
• Testez chaque fonction dans la console de votre navigateur avec une détection de fonctionnalité.

Activité 4 : explorer le TC39

• Ouvrez github.com/tc39/proposals. Choisissez une proposition au stage 3 et une au stage 2.
• Pour chacune, expliquez en deux phrases le problème qu'elle résout et donnez un exemple de code tiré de son dépôt.

Activité 5 : vrai ou faux ?

1. ES6 et ES2015 désignent la même version.
2. Le DOM fait partie de la norme ECMAScript.
3. Une proposition au stage 3 fait déjà partie de la norme.
4. Un code écrit en ES5 fonctionne encore dans les navigateurs actuels.
5. Une nouvelle version d'ECMAScript paraît chaque année en juin.

Travail à rendre: créez un dépôt GitHub js-versions-ecmascript contenant un fichier activite2.js (code modernisé) et un fichier README.md avec le tableau de l'activité 3.

const stagiaire = { nom: "Rim", moyenne: 14.5 };
const { nom, moyenne } = stagiaire;
const notes = [12, 15, 18];
const total = notes.reduce((a, b) => a + b, 0);
console.log(`${nom} a une moyenne de ${moyenne} et un total de ${total}`);