📦 Semaine 4 - Jour 4 : Modules & Bonnes Pratiques

🚀 Organisez votre code comme un professionnel

Les modules ES6 permettent de diviser votre code en fichiers réutilisables et maintenables. C'est LA façon moderne d'organiser du code JavaScript dans des projets réels.

Pourquoi c'est crucial ? Dans un projet professionnel, vous ne mettez pas tout votre code dans un seul fichier de 10 000 lignes ! Les modules permettent de créer du code modulaire, testable et facile à maintenir.

Dans ce cours : import/export, export default, destructuration avancée, spread operator, rest parameters, organisation du code, et conventions professionnelles.

1. Export et Import

export permet d'exposer des fonctions, variables ou classes depuis un fichier.
import permet de les utiliser dans un autre fichier.

// 📄 utils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

export class User {
  constructor(name) {
    this.name = name;
  }
}
// 📄 main.js
import { add, PI, User } from './utils.js';

console.log(add(5, 3)); // 8
console.log(PI); // 3.14159
const user = new User('Alice');

2. Export Default

export default permet d'exporter UNE valeur principale par fichier. Utile pour les classes ou fonctions principales.

// 📄 Calculator.js
export default class Calculator {
  add(a, b) { return a + b; }
  subtract(a, b) { return a - b; }
}
// 📄 main.js (pas de { } pour default)
import Calculator from './Calculator.js';

const calc = new Calculator();
console.log(calc.add(10, 5));

💡 Astuce : On peut combiner export default avec des exports nommés !

3. Spread Operator (...)

Le spread operator (...) permet de "déplier" un tableau ou un objet.

// Copier un tableau
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // [1, 2, 3]

// Fusionner des tableaux
const merged = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Copier un objet
const user = { name: 'Alice', age: 25 };
const newUser = { ...user, city: 'Paris' };
// { name: 'Alice', age: 25, city: 'Paris' }

✅ Utilisation : Copier sans modifier l'original (immutabilité)

4. Rest Parameters (...)

Les rest parameters permettent de capturer un nombre variable d'arguments dans une fonction.

// Fonction avec nombre variable d'arguments
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3, 4)); // 10
// Destructuration avec rest
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest); // [3, 4, 5]

📁 Structure de Projet Professionnelle

📁 mon-projet/
  📁 src/
    📁 components/
      📄 Header.js
      📄 Footer.js
      📄 Card.js
    📁 utils/
      📄 helpers.js
      📄 validators.js
      📄 api.js
    📁 services/
      📄 userService.js
      📄 authService.js
    📄 main.js
    📄 config.js
  📄 index.html
  📄 package.json
  📄 README.md

🎯 Organisation : Séparez votre code en dossiers logiques (components, utils, services)

✅ Bonnes Pratiques vs ❌ Mauvaises Pratiques

1. Nommage des variables

❌ Mauvais

const x = 5;
const fn = () => {};
const data = [];
const temp = {};

Noms trop courts, pas explicites

✅ Bon

const maxRetries = 5;
const fetchUserData = () => {};
const userList = [];
const userSettings = {};

Noms descriptifs et explicites

2. Fonctions

❌ Mauvais

function doStuff(a, b, c, d, e) {
  // Fonction trop longue
  // 50 lignes de code...
  return a + b - c * d / e;
}

Nom vague, trop de paramètres

✅ Bon

function calculateTotalPrice(price, tax) {
  const taxAmount = price * tax;
  return price + taxAmount;
}

Nom clair, peu de paramètres, une responsabilité

3. Commentaires

❌ Mauvais

// Additionne deux nombres
function add(a, b) {
  return a + b; // Retourne la somme
}

Commentaires évidents et inutiles

✅ Bon

// Applique une réduction de 20% pour les commandes > 100€
// car c'est la politique commerciale 2024
function applyDiscount(total) {
  return total > 100 ? total * 0.8 : total;
}

Explique le POURQUOI, pas le COMMENT

🔀 Démonstration 1 : Spread Operator

Cliquez pour voir le spread operator en action...

📦 Démonstration 2 : Rest Parameters

Cliquez pour voir les rest parameters...

🎯 Démonstration 3 : Destructuration Avancée

Cliquez pour voir la destructuration...
⚡ Console JavaScript Interactive - Testez les bonnes pratiques !
Prêt à exécuter votre code...

💻 Exemples à tester

// 1. Spread pour fusionner des objets
const defaults = { theme: 'light', lang: 'fr' };
const userPrefs = { lang: 'en', fontSize: 16 };
const settings = { ...defaults, ...userPrefs };
console.log(settings);
// { theme: 'light', lang: 'en', fontSize: 16 }

// 2. Destructuration avec renommage
const user = { name: 'Alice', age: 25, email: 'alice@example.com' };
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alice 25

// 3. Rest parameters pour créer un logger flexible
function log(level, ...messages) {
  console.log(`[${level}]`, ...messages);
}
log('INFO', 'Utilisateur', 'connecté', 'avec succès');

// 4. Spread pour copier et modifier un tableau
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]

👆 Testez ces exemples dans la console interactive !

Froggiesplaining :


🎯 Objectifs de ce cours :
✅ Comprendre et utiliser les modules ES6 (import/export)
✅ Maîtriser le spread operator et les rest parameters
✅ Organiser son code de manière professionnelle
✅ Appliquer les bonnes pratiques de nommage et de structure
✅ Écrire des commentaires utiles

📖 Points clés à retenir :
• export pour exposer, import pour utiliser
• export default pour l'export principal d'un fichier
• Spread (...) pour copier/fusionner tableaux et objets
• Rest parameters (...) pour capturer plusieurs arguments
• Nommez vos variables de façon descriptive (pas x, y, z !)
• Une fonction = une responsabilité
• Commentez le POURQUOI, pas le COMMENT
• Organisez votre code en dossiers logiques

🏋️ Exercices pratiques :
1. Créer un module : Créez un fichier utils.js avec 3 fonctions utilitaires (formatDate, capitalize, truncate) et exportez-les
2. Spread practice : Fusionnez 3 objets de configuration en un seul objet final
3. Rest practice : Créez une fonction average(...numbers) qui calcule la moyenne de N nombres
4. Refactoring : Prenez un ancien code et améliorez le nommage des variables/fonctions
5. Destructuration : Utilisez la destructuration pour extraire proprement les données d'une API (name, email, address.city)

💡 Conventions professionnelles :
• Variables/fonctions : camelCase (getUserData, totalPrice)
• Classes : PascalCase (User, ShoppingCart)
• Constantes : UPPER_SNAKE_CASE (MAX_RETRIES, API_URL)
• Fichiers : kebab-case (user-service.js, api-client.js)
• Booléens : préfixes is/has/can (isActive, hasPermission, canEdit)
• Toujours utiliser const par défaut, let si besoin, jamais var

Froggie explain

GitHub - eCrea