📘 Chapitre 6 – Factorisation, modularisation et bonnes pratiques ES6

1. 🎯 Objectif pédagogique

Apprendre à optimiser et structurer le code JavaScript en appliquant des techniques de factorisation, de modularisation et en utilisant les fonctionnalités modernes d’ES6.

2. 📚 Concepts abordés

  • Factorisation du code : éviter la duplication et créer des fonctions réutilisables
  • Modularisation : séparer le code en fichiers ou blocs logiques
  • Fonctions fléchées (=>)
  • Variables let et const
  • Utilisation des templates strings (backticks `)
  • Imports/Exports (modules ES6)

3. 🧠 Explication théorique

Factorisation

Éviter de copier-coller du code en regroupant les tâches récurrentes dans des fonctions :

function afficherMessage(nom) {
  console.log(`Bonjour, ${nom} !`);
}

afficherMessage("Ali");
afficherMessage("Sofia");

Fonctions fléchées

Les arrow functions (ES6) offrent une syntaxe plus concise :

const addition = (a, b) => a + b;
console.log(addition(3, 4)); // 7

Modularisation

Il est recommandé de séparer les fichiers selon leur rôle. Exemple avec modules ES6 : fichier math.js

export function addition(a, b) {
  return a + b;
}

fichier main.js

import { addition } from './math.js';
console.log(addition(5, 2)); // 7

(Pour tester, utiliser un serveur local car import ne fonctionne pas directement en ouvrant un fichier HTML local.)

4. 🛠 Tutoriel pratique

Résumé

Nous allons créer une fonction factorisée et un petit module pour calculer la somme et la différence de deux nombres.

Arborescence du projet 

mon_projet/
├── index.html
├── main.js
└── math.js

Étape 1 : Fichier math.js 

export const addition = (a, b) => a + b;
export const soustraction = (a, b) => a - b;

Étape 2 : Fichier main.js 

import { addition, soustraction } from './math.js';

console.log(`5 + 3 = ${addition(5, 3)}`);
console.log(`5 - 3 = ${soustraction(5, 3)}`);

Étape 3 : Fichier HTML 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Modules ES6</title>
</head>
<body>
  <h1>Test des modules ES6</h1>
  <script type="module" src="main.js"></script>
</body>
</html>

Étape 4 : Test

Lance un serveur local (via VS Code Live Server ou npx serve) et ouvre la console.

5. 🧾 Résumé et points-clés

  • Factoriser le code rend les scripts plus courts et plus faciles à maintenir.
  • Modulariser permet de séparer les responsabilités et de réutiliser du code.
  • ES6 introduit des améliorations majeures : arrow functions, template strings, modules.