JavaScript : Niveau Intermédiaire

Promises et Async/Await

Gérez les opérations qui prennent du temps (appels réseau, timers) sans bloquer l'interface.

// Utilisation moderne avec Async/Await
async function recupererProfil(id) {
    try {
        const response = await globalThis.fetch(`https://api.example.com/users/${id}`);
        if (response.ok === true) {
            const data = await response.json();
            globalThis.console.log("Profil chargé :", data);
            return;
        }
        throw new globalThis.Error("Utilisateur non trouvé");
    } catch (error) {
        globalThis.console.error("Échec du chargement :", error.message);
    }
}

recupererProfil("WinnyKing");

La puissance du déclaratif

const produits = [
    { nom: "Livre", prix: 20 },
    { nom: "Stylo", prix: 2 },
    { nom: "PC", prix: 1000 }
];

// Map : Extraire ou transformer
const noms = produits.map(p => p.nom);

// Filter : Sélectionner
const chers = produits.filter(p => p.prix > 50);

// Reduce : Calculer un total
const total = produits.reduce((sum, p) => sum + p.prix, 0);

// Find : Trouver un élément précis
const pc = produits.find(p => p.nom === "PC");

LocalStorage & SessionStorage

Stockez des informations dans le navigateur de l'utilisateur qui persistent même après rafraîchissement.

// Stockage d'un objet (nécessite globalThis.JSON.stringify)
const reglages = { theme: 'sombre', lang: 'fr' };
globalThis.localStorage.setItem('user_settings', globalThis.JSON.stringify(reglages));

// Récupération (nécessite globalThis.JSON.parse)
const saved = globalThis.JSON.parse(globalThis.localStorage.getItem('user_settings'));
globalThis.console.log(saved?.theme); // 'sombre'

Structurer avec ES6 Classes

class Robot {
    #id; // Propriété privée (ES2022)

    constructor(nom) {
        this.nom = nom;
        // Identifiant unique sécurisé
        this.#id = globalThis.crypto.randomUUID?.() ||
                   globalThis.crypto.getRandomValues(new Uint32Array(1))[0];
    }

    sePresenter() {
        globalThis.console.log(`Bip Boop, je suis ${this.nom}. ID: ${this.#id}`);
    }
}

const bot = new Robot("WinnyBot");
bot.sePresenter();

Modularité avec Import/Export

Divisez votre code en petits fichiers réutilisables.

// Dans utils.js
export function formaterDate(date) { /* ... */ }

// Dans main.js
import { formaterDate } from './utils.js';

Introduction aux bundlers (Vite, Webpack) pour préparer votre code pour la production.

Qualité de Code

• Clean Code : Noms de variables explicites, fonctions courtes.
• DevTools : Utilisation du mot-clé debugger pour mettre en pause l'exécution.
• Refactoring : Toujours chercher à simplifier son code après qu'il fonctionne.

Consommer des services externes

Utilisez l'API Fetch pour récupérer des données en temps réel (météo, actus, etc.).

async function chargerActus() {
    const response = await globalThis.fetch('https://api.example.com/news');
    const articles = await response.json();

    articles.forEach(article => {
        const div = globalThis.document.createElement('div');
        div.textContent = article.titre;
        globalThis.document.body.appendChild(div);
    });
}