JavaScript ES6+ — Guide pratique

Syntaxe moderne de JavaScript (ES2015 et au-delà) — let/const, flèches, déstructuration, spread/rest, modules ES, Promises, async/await, optional chaining et nullish coalescing.

Cette page est un complément à Frontend. Elle se concentre sur les mécanismes de langage ES6+.

`let` et `const` — remplacement de `var`

var déclare une variable portée au bloc le plus proche fonction, pas au bloc if/for/while. let et const sont portés au bloc { ... }.


// var — portée fonction, pas de bloc
function demoVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 ← visible hors du bloc
}
 
// let / const — portée bloc
function demoBlock() {
  if (true) {
    let y = 10;
    const z = 20;
  }
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}

Pitfall : var dans une boucle for crée un seul binding partagé — les closures captent la même variable. Utiliser let pour la boucle dans ce cas.

Dead zone (TDZ)

Une variable let/const existe avant son initialisation, mais son accès lève ReferenceError jusqu’à la déclaration.


console.log(a); // ReferenceError (TDZ)
let a = 10;
console.log(a); // 10
 
// Fonctionne — const est initialisé AVANT d'être utilisé
const b = 42;
console.log(b); // 42

Pitfall : const signifie « liaison constante », pas « valeur constante ». L’objet lié peut être muté.


const tab = [];
tab.push(1); // OK — la référence ne change pas
tab = [];    // TypeError : Assignment to constant variable

Fonctions fléchées

Syntaxe courte pour les fonctions. Deux différences fondamentales avec function classique :

Pas de this propre — elles héritent du this du contexte lexical (celui du parent).
Pas de arguments — le mot-clé arguments n’existe pas dans une fléchée.


// Fonction classique — this lié à l'objet appelant
const obj = {
  nom: 'Arthur',
  saluer: function() {
    return `Bonjour, je suis ${this.nom}`;
  },
  // Fonction fléchée — this hérité (globale ici, undefined en mode strict)
  saluerFléchée: () => {
    return `Bonjour, je suis ${this.nom}`; // undefined
  }
};
 
// Usage pratique : callback avec `this` préservé
class Compteur {
  constructor() {
    this.valeur = 0;
    // setInterval avec fléchée : `this` reste le compteur
    setInterval(() => { this.valeur++; }, 1000);
  }
}

Règle simple : utiliser une fléchée pour les callbacks et les méthodes sans besoin de this. Réserver function classique pour les méthodes d’objet et les constructeurs.

Pitfall : les fléchées ne peuvent PAS être utilisées comme constructeurs. new (() => {}) lève TypeError.

Déstructuring

Extraire des valeurs d’objets et de tableaux avec une syntaxe expressive.

Objets


const config = { host: 'localhost', port: 3000, debug: true };
 
// Extraire avec renommage
const { host: h, port: p, debug } = config;
// h = 'localhost', p = 3000, debug = true
 
// Valeurs par défaut (uniquement pour `undefined`)
const { timeout = 5000, retries = 3 } = config;
// timeout = 5000, retries = 3 (config n'a pas ces clés)
 
// Capturer le reste avec spread
const { debug, ...sansDebug } = config;
// sansDebug = { host: 'localhost', port: 3000 }

Tableaux


const couleurs = ['rouge', 'vert', 'bleu'];
 
// Extraire des positions spécifiques
const [, milieu, fin] = couleurs;
// milieu = 'vert', fin = 'bleu'
 
// Capturer le reste
const [premier, ...lesAutres] = couleurs;
// premier = 'rouge', lesAutres = ['vert', 'bleu']
 
// Échanger deux variables (sans variable temporaire)
let a = 1, b = 2;
[a, b] = [b, a];
// a = 2, b = 1

Imbriquée


const réponse = {
  données: {
    utilisateurs: [
      { nom: 'Alice', âge: 30 },
      { nom: 'Bob', âge: 25 }
    ],
    meta: { page: 1, total: 42 }
  }
};
 
const {
  données: { utilisateurs: list, meta: { page } }
} = réponse;
 
list[0].nom; // 'Alice'
page;          // 1

Pitfall : déstructurer une valeur null ou undefined lève TypeError. Toujours protéger : const { x } = obj ?? {}; ou const { x } = (obj || {});.

Spread (`...`) et opérateurs `rest`

Le même syntaxe ... a deux usages distincts selon le contexte.

Spread — « étendre » un itérable


// Tableaux
const combiné = [...tableauA, ...tableauB];
const copié = [...original];
 
// Objets (shallow merge, dernières clés écrasent)
const combinéObj = { ...cible, ...origine };
// Si les deux ont la même clé, origine gagne.
 
// Passer un tableau comme arguments
const max = Math.max(...[3, 1, 4, 1, 5]);

Rest — « capturer le reste » dans une déclaration


// Déstructuring objet
const { password, ...user } = donnéesUtilisateur;
// user = tout sauf password
 
// Déstructuring tableau
const [premier, ...reste] = [1, 2, 3, 4];
// reste = [2, 3, 4]
 
// Paramètres variadiques
function somme(...nombres) {
  return nombres.reduce((acc, n) => acc + n, 0);
}
somme(1, 2, 3); // 6

Différence clé : le spread « démonte » un tableau/objet en éléments individuels ; le rest « monte » des éléments en un tableau/objet unique.

Template literals

Chaînes multi-lignes et interpolation de expressions avec le backtick `.


const nom = 'Arthur';
const âge = 30;
 
// Interpolation
const salutation = `Bonjour, je suis ${nom}, ${âge} ans.`;
 
// Multi-lignes (sans `\n` explicites)
const message = `
  Ligne 1
  Ligne 2
  Ligne 3
`;
 
// Expression complète dans ${ }
const arr = [1, 2, 3];
const résumé = `Le tableau contient ${arr.length} éléments : ${arr.join(', ')}.`;
// 'Le tableau contient 3 éléments : 1, 2, 3.'

Tagged templates

Appeler une fonction personnalisée pour traiter le template. Utile pour le formatage ou la sécurité (échappement HTML).


// Fonction tag : reçoit les parties de chaîne et les expressions
function escapeHTML(strings, ...valeurs) {
  return strings.reduce((resultat, partie, i) => {
    const val = i < valeurs.length
      ? String(valeurs[i]).replace(/</g, '&lt;').replace(/>/g, '&gt;')
      : '';
    return résultat + partie + val;
  }, '');
}
 
const user = '<script>alert("xss")</script>';
const sécurisé = escapeHTML`Bienvenue, ${user} !`;
// 'Bienvenue, &lt;script&gt;alert("xss")&lt;/script&gt; !'

Modules ES (`import` / `export`)

Remplacement de require() (CommonJS) et module.exports. Syntaxe déclarative, analyse statique possible, support natif dans tous les navigateurs modernes.


// module.js — Exportations
export const PI = 3.14159;
 
export function aire(rayon) {
  return PI * rayon * rayon;
}
 
// Export nommé par défaut
export default function Racine(r) {
  return Math.sqrt(r);
}


// autre-module.js — Importations
// Importation spécifique
import { PI, aire } from './module.js';
 
// Renommer à l'import
import { PI as Pi } from './module.js';
 
// Import par défaut
import Racine from './module.js';
 
// Importer les deux en même temps
import Racine, { PI, aire } from './module.js';
 
// Importer TOUT dans un namespace
import * as maths from './module.js';
maths.PI;
maths.aire(5);
 
// Import dynamique (chargement tardif)
import('./module.js').then(m => {
  m.aire(10);
});

Import dynamique vs statique : les import statiques sont résolus au chargement du module. Les imports dynamiques (import()) retournent une Promise — utiles pour le code lazy-loaded (routes, plugins).

Pitfall : les exports default ne sont pas verrouillés par le linter. Un même module ne peut avoir qu’un seul export default.

Promises et `async`/`await`

Promise — pattern asynchrone

Une Promise représente une opération asynchrone en trois états : pending, fulfilled, rejected.


// Création manuelle (rare)
const p = new Promise((résoudre, rejetter) => {
  if (donnéesValides) {
    résoudre(données);
  } else {
    rejetter(new Error('Données invalides'));
  }
});
 
// Chaînage `.then()` / `.catch()`
chargerDonnées()
  .then(traiter)
  .then(afficher)
  .catch(erreur => console.error(erreur));

`async`/`await` — syntaxe synchronisée

async déclare une fonction qui retourne implicitement une Promise. await suspend l’exécution jusqu’à ce que la Promise soit résolue.


async function chargerEtAfficher() {
  try {
    const users = await fetch('/api/users').then(r => r.json());
    const posts = await fetch('/api/posts').then(r => r.json());
    console.log(users, posts);
  } catch (erreur) {
    console.error('Erreur:', erreur.message);
  }
}
 
chargerEtAfficher();

Parallélisation

await séquentiel = somme des durées. Promise.all() = durée du plus long.


// Séquentiel (lent)
const a = await fetch('/api/a'); // 200ms
const b = await fetch('/api/b'); // 300ms
// Total : ~500ms
 
// Parallèle (rapide)
const [a, b] = await Promise.all([
  fetch('/api/a'),
  fetch('/api/b')
]);
// Total : ~300ms (le plus long des deux)
 
// Si un seul échoue, toute la chaîne échoue
const résultat = await Promise.allSettled([
  fetch('/api/a'),
  fetch('/api/échec')
]);
// Pour inspecter chaque résultat sans échouer brutalement

Pitfall : await ne fait pas planter la fonction — il rejette la Promise retour. Capturer avec try/catch ou .catch() pour éviter un Unhandled Promise Rejection.

Optional chaining (`?.`) et nullish coalescing (`??`)

Optional chaining

Accéder à une propriété ou appeler une méthode sans lever TypeError si la valeur intermédiaire est null/undefined.


const utilisateur = {
  profil: {
    nom: 'Alice',
    adresse: { ville: 'Paris' }
  }
};
 
// Sans optional chaining :
utilisateur.profil.adresse.codePostal; // undefined (pas d'erreur)
utilisateur.inconnu.clef;             // TypeError !
 
// Avec optional chaining :
utilisateur.profil?.nom;           // 'Alice'
utilisateur.inconnu?.clef;         // undefined (pas d'erreur)
utilisateur.profil?.adresse?.ville; // 'Paris'
 
// Appel de méthode sécurisé
const résultat = utilisateur.fetcher?.(données);
// si fetcher est undefined, résultat = undefined (pas d'erreur)

Nullish coalescing

Retourne le côté droit si la gauche est null ou undefined (pas si false, 0, ou '').


// Opérateur `||` — falsy (faux, 0, '', null, undefined)
const message = '' || 'défaut'; // 'défaut' ← souvent indésirable
 
// Opérateur `??` — nullish uniquement
const message = '' ?? 'défaut'; // '' ← préservé
const valeur = null ?? 42;      // 42
const zéro = 0 ?? 42;           // 0
 
// Chaînage avec optional chaining
const hauteur = objet?.dimensions?.hauteur ?? 100;

Différence clé : || remplace false, 0, '' ; ?? ne remplace que null et undefined.

Récapitulatif — quand utiliser quoi

Besoin	Solution ES6+
Variable bloc	`let` / `const` (jamais `var`)
Méthode simple, pas de `this`	Fonction fléchée
Méthode d’objet, `this` nécessaire	`function` classique
Extraire des valeurs	Déstructuring
Fusionner / cloner	Spread `...`
Paramètres variables	Rest `...args`
Chaîne avec variables	Template literal `
Module structurel	`import` / `export`
Code asynchrone	`async` / `await`
Accès sûr à propriété	Optional chaining `?.`
Valeur par défaut sécurisée	Nullish coalescing `??`

Pièges courants

Piège	Symptôme	Correction
`const` muté	`TypeError` à l’affectation	Utiliser `let` si la référence change ; `structuredClone()` pour une copie profonde
`this` dans fléchée	`this` = `undefined` dans méthode d’objet	Passer en `function` classique
`arguments` dans fléchée	`ReferenceError`	Utiliser les paramètres rest `...args`
`var` dans une boucle	Closure captant la même variable	Remplacer `var` par `let`
Template literal avec `\` à la fin	Espace blanc indésirable dans multi-lignes	Utiliser `${''}` ou supprimer le `\`
`Promise` non-gérée	`Unhandled Promise Rejection`	Toujours ajouter `.catch()` ou utiliser `async/await` avec `try/catch`
Optional chaining sur le côté gauche d’une affectation	`SyntaxError`	Utiliser `{}`, objet placeholder ou méthode d’affectation conditionnelle