1.1Rappels JavaScript moderne (ES6+)
L'essentiel en 30 secondes
- const par défaut, let si besoin, jamais var : const pour ce qu'on ne réassigne pas, let pour ce qui évolue — tous deux à portée de bloc, prévisible.
- La syntaxe qu'on écrit vraiment : fonctions fléchées, destructuration (const { nom } = obj), template literals (`Bonjour ${nom}`), spread/rest (...).
- Collections en fonctionnel : map (transformer), filter (garder), reduce (agréger) — sans JS moderne fluide, tout Node paraît confus.
Mini-cas filé — Salim, développeur junior à Alger
Salim, développeur junior dans une startup à Alger, reprend un vieux script écrit avec des var et des boucles for imbriquées : les variables « fuient » des blocs et personne ne comprend ce que le code calcule. Il réécrit le script en JavaScript moderne — const par défaut, fonctions fléchées, destructuration des objets reçus de l'API, et un enchaînement filter/map pour extraire les noms des utilisateurs actifs. Le code passe de 40 lignes obscures à 12 lignes lisibles.
Ce même cas revient dans le cours, le schéma, le script et le défi 48h — et continue en 1.2, 1.3 et 1.4.
1. const, let, jamais var
Node exécute du JavaScript : maîtriser le JS moderne (ES6+) est le prérequis de tout. Pour déclarer une variable : const (non réassignable, à privilégier par défaut car la plupart des variables ne changent pas de référence), let (réassignable, pour compteurs et accumulateurs), et jamais var (portée de fonction déroutante, source de bugs). const et let ont une portée de bloc (limitée aux accolades), bien plus prévisible. Le réflexe moderne : const par défaut, let si réassignation nécessaire, jamais var.
Salim remplace chaque var de son vieux script par const, sauf le compteur de boucle passé en let : les variables cessent de « fuir » des blocs if et la moitié des comportements bizarres disparaissent.
2. La syntaxe qu'on écrit vraiment
Les incontournables du quotidien : les fonctions fléchées ((a, b) => a + b, idéales pour les callbacks omniprésents en Node, sans this propre), la destructuration (const { nom, age } = personne — omniprésente pour les imports et les données), les template literals (`Bonjour ${nom}` au lieu de concaténer avec +), le spread/rest (... pour fusionner ou regrouper).
Salim affiche ses utilisateurs avec un template literal et extrait nom et email par destructuration : fini les user.name répétés dix fois et les concaténations illisibles.
3. map / filter / reduce : penser en intentions
Les méthodes de tableaux sont la manière moderne et fonctionnelle de traiter les collections : map transforme chaque élément (nouveau tableau de même taille), filter garde ceux qui satisfont une condition, reduce agrège tout en une valeur (somme, regroupement). Chacune exprime une intention lisible d'un coup d'œil — et tout code Node moderne les emploie constamment.
Salim remplace sa boucle for par users.filter(u => u.actif).map(u => u.nom) : la ligne se lit comme une phrase (« garde les actifs, prends leurs noms ») et son collègue la comprend sans commentaire.
🔎 Exemple concret — 🔎 Exemple concret — map, filter, reduce
Exprimer une intention, comme Salim pour ses utilisateurs.
const users = [{ nom: "Amine", actif: true }, { nom: "Sara", actif: false }];
const noms = users.filter(function (u) { return u.actif; }).map(function (u) { return u.nom; });
console.log(noms); // ["Amine"]
const total = [1, 2, 3].reduce(function (s, n) { return s + n; }, 0);
console.log(total); // 6
const { nom } = users[0];
console.log("Bonjour " + nom);Lecture : « garde les actifs, prends leurs noms » se lit d'un coup d'œil, sans gérer d'index.
Leçon : const par défaut ; map/filter créent de nouveaux tableaux au lieu de modifier l'original.
Vocabulaire de la section
- const / let (vs var)
- const : variable non réassignable, à privilégier par défaut. let : variable réassignable. Tous deux à portée de bloc ; var est à éviter (portée de fonction déroutante).
Exemple simple : Le const users et le let compteur du script réécrit par Salim.
Ce que ce n'est pas : un var déclaré dans un if qui « fuit » en dehors du bloc.
Réflexe : const par défaut, let si réassignation, jamais var.
- Fonction fléchée (arrow)
- Syntaxe concise pour écrire des fonctions, très utilisée pour les callbacks ; elle n'a pas son propre this, ce qui évite bien des pièges.
Exemple simple : Le u => u.actif passé à filter par Salim.
Ce que ce n'est pas : une function classique avec un this qui change selon l'appel.
Réflexe : callbacks courts = fléchées.
- Destructuration
- Extraction de valeurs d'objets ou tableaux en une ligne : const { nom } = obj ou const [a, b] = arr.
Exemple simple : Salim extrait nom et email de chaque utilisateur reçu de l'API.
Ce que ce n'est pas : répéter user.name et user.email sur dix lignes.
Réflexe : extraire en une ligne, nommer clairement.
- Template literal
- Chaîne entre accents graves permettant d'insérer des variables proprement, sans concaténation avec +.
Exemple simple : L'affichage des utilisateurs de Salim sans concaténer des morceaux de chaînes.
Ce que ce n'est pas : "Bonjour " + nom + ", tu as " + age + " ans".
Réflexe : dès qu'une variable entre dans une chaîne, accents graves.
- map / filter / reduce
- Méthodes de tableaux modernes : transformer (map), garder selon une condition (filter), agréger en une valeur (reduce) — de façon fonctionnelle.
Exemple simple : Le filter + map de Salim pour les noms des utilisateurs actifs.
Ce que ce n'est pas : une boucle for avec index, tableau initialisé et push manuels.
Réflexe : une intention par méthode, chaînées lisiblement.
En pratique — En pratique — Consolider le JavaScript moderne
- Déclarez des variables avec const (par défaut) et let (si réassignation) ; constatez la portée de bloc. Bannissez var.
- Écrivez des fonctions fléchées et utilisez-les comme callbacks ; comparez à la syntaxe function classique.
- Pratiquez la destructuration (const { a, b } = obj) et les template literals sur des exemples concrets.
- Traitez un tableau avec map (transformer), filter (filtrer) et reduce (agréger) plutôt qu'avec des boucles for classiques.
Script prêt à dire — justifier la réécriture en JS moderne (30 s)
« Je propose qu'on réécrive ce script en JavaScript moderne : const par défaut, fonctions fléchées, et filter/map au lieu des boucles for. Le code sera deux fois plus court, chaque ligne exprimera son intention, et on éliminera les bugs de portée dus aux var. »
À dire en revue de code ; montrer l'avant/après sur un extrait réel du projet.
Modèle copier-coller — snippet JS moderne
const users = [
{ nom: "Amine", actif: true },
{ nom: "Sara", actif: false }
];
const nomsActifs = users
.filter(function (u) { return u.actif; })
.map(function (u) { return u.nom; });
console.log(nomsActifs);
const total = [10, 20, 30].reduce(function (s, n) { return s + n; }, 0);
console.log(total);Vieux script à reprendre
Ne pas tout réécrire d'un coup : remplacer les var par const/let en premier, puis convertir une boucle for en filter/map — comme Salim, par petits pas vérifiés avec node.
Données d'API à Alger
Salim destructurationne les objets reçus de l'API (const { nom, email } = user) : les champs utilisés sont visibles d'un coup d'œil en haut de chaque fonction.
Affichages console propres
Dès qu'un message contient une variable, passer au template literal : fini les concaténations avec + qui cassent la lecture des logs.
Gros tableaux en préparation
S'habituer à chaîner filter/map/reduce prépare directement la section 1-2 : ces méthodes seront partout dans le traitement des résultats asynchrones.
✓ Bonnes pratiques
- const par défaut, let si réassignation.
- Une intention par méthode (filter/map).
- Tester chaque snippet avec node.
✗ Pièges fréquents
- Croire const = objet immuable.
- Garder var « par habitude ».
- Boucles for là où filter/map suffisent.
Points clés à retenir
- JS MODERNE (ES6+) = prérequis de Node. Variables : const par défaut, let si réassignation, JAMAIS var (portée de bloc, prévisible).
- Fonctions FLÉCHÉES : concises, idéales pour les callbacks omniprésents en Node ; sans this propre.
- DESTRUCTURATION, TEMPLATE LITERALS, SPREAD/REST : la syntaxe qu'on écrit réellement aujourd'hui.
- MÉTHODES DE TABLEAUX (map/filter/reduce) = traitement moderne et fonctionnel des collections.
Défi 48h — appliquez demain
Réécrivez un vieux morceau de code (modèle ci-dessus) : var → const/let, une boucle for → filter/map, une concaténation → template literal. Lancez avec node et vérifiez le résultat. 20 minutes suffisent.
- Je peux expliquer const vs let vs var (portée de bloc).
- Je sais écrire fléchées, destructuration et template literals.
- J'ai converti une boucle for en filter/map.
Questions fréquentes
const, let ou var : lequel utiliser, et pourquoi éviter var ?
La règle moderne, à appliquer systématiquement : const par défaut, let si vous devez réassigner, jamais var. const exprime que la référence ne changera pas, protège contre les réassignations accidentelles (erreur levée tôt) et rend le code lisible. Nuance : const empêche la réassignation, mais le contenu d'un objet ou tableau reste modifiable (arr.push(1) fonctionne). let sert aux valeurs qui évoluent (compteurs, accumulateurs). var est à éviter : portée de fonction (une var déclarée dans un if « fuit » hors du bloc) et hoisting piégeux — là où const/let ont une portée de bloc prévisible et sûre.
Faut-il vraiment maîtriser map/filter/reduce, ou les boucles for suffisent-elles ?
Les boucles for fonctionnent, mais map/filter/reduce sont le style moderne et idiomatique — et vous devez au minimum les comprendre car elles sont partout dans le code Node réel. map transforme chaque élément (nouveau tableau de même taille), filter garde ceux qui satisfont une condition, reduce agrège tout en une valeur. Avantages : expressivité (users.filter(u => u.actif).map(u => u.nom) se lit comme une phrase), moins d'erreurs (pas d'index à gérer), et elles créent de nouveaux tableaux au lieu de modifier l'original. Comme Salim, convertissez vos boucles une par une : le gain de lisibilité est immédiat.
Quel réflexe adopter pour déclarer les variables en JS moderne ?