JavaScript moderne : ES2024 et fonctionnalités avancées

Top-level await

// Modules ESM uniquement
const config = await fetch("/config.json").then(r => r.json());
export const db = await connectDB(config.db);

Optional chaining et nullish coalescing

const user = await getUser();
const ville = user?.adresse?.ville ?? "Inconnue";
const theme = localStorage.getItem("theme") ?? "dark";
// ?. s'arrête au premier null/undefined sans lever d'erreur

Destructuring avancé

const { nom, prenom, adresse: { ville = "Dakar" } = {} } = user;
const [tete, ...reste] = ["Pierre","Marie","Jean","Amina"];
const { id, ...rest } = payload;   // enlève id, garde le reste

Array.prototype.findLast / findLastIndex

const ventes = [...]; // triées par date asc
const derniere = ventes.findLast(v => v.statut === "payee");
const idx = ventes.findLastIndex(v => v.montant > 500_000);

Array.prototype.at (index négatif)

const items = [10, 20, 30, 40];
items.at(-1);  // 40
items.at(-2);  // 30
"Bonjour".at(-1); // "r"

Object.hasOwn (remplace hasOwnProperty)

if (Object.hasOwn(obj, "email")) { /* ... */ }
// Plus sûr que obj.hasOwnProperty("email") qui peut être écrasé

Structured clone (copie profonde native)

const copie = structuredClone(original);  // profonde, gère Date, Map, Set
// Remplace JSON.parse(JSON.stringify(x)) qui perd les types

Array.prototype.group (ES2024 stage 4)

const ventes = [...];
const parRegion = Object.groupBy(ventes, v => v.region);
// { "Dakar": [...], "Thies": [...] }

const parMois = Map.groupBy(ventes, v => v.date.slice(0,7));
// Map { "2026-01" => [...], ... }

Promise.any et Promise.allSettled

// Premier OK gagne (ignore les rejects)
const resultat = await Promise.any([
  fetch("https://api1.com/data"),
  fetch("https://api2.com/data"),
  fetch("https://api3.com/data"),
]);

// Attend tout, retourne {status, value|reason}
const results = await Promise.allSettled(tasks);
const ok = results.filter(r => r.status === "fulfilled").map(r => r.value);

AbortController pour annuler fetch

const ctrl = new AbortController();
setTimeout(() => ctrl.abort(), 5000);

try {
  const res = await fetch("/lourd", { signal: ctrl.signal });
} catch (e) {
  if (e.name === "AbortError") console.log("Timeout dépassé");
}

Generators pour flux paginé

async function* pages(url) {
  let next = url;
  while (next) {
    const r = await fetch(next).then(r => r.json());
    yield* r.data;
    next = r.next_url;
  }
}

for await (const item of pages("/api/clients?page=1")) {
  console.log(item.nom);
}

Records et Tuples (Stage 2, expérimental)

// Structures immuables comparables par valeur
const point = #{ x: 10, y: 20 };
const paire = #[1, 2];
#{a:1,b:2} === #{b:2,a:1};   // true