JavaScript : Niveau Expert

Event Loop, Microtasks et Call Stack

Comprendre comment JavaScript gère l'asynchronisme en interne via la file d'attente des tâches et la pile d'exécution.

globalThis.console.log('1 - Synchrone');
globalThis.setTimeout(() => globalThis.console.log('2 - Macrotâche (Timer)'), 0);
globalThis.Promise.resolve().then(() => globalThis.console.log('3 - Microtâche (Promise)'));
globalThis.console.log('4 - Synchrone');

// Résultat : 1, 4, 3, 2
// Les microtâches sont toujours exécutées avant la prochaine macrotâche.

La chaîne de prototypes et le 'this'

JavaScript utilise un héritage prototypal. Comprendre comment les objets sont liés entre eux.

const animal = {
    manger() { globalThis.console.log(`${this.nom} mange...`); }
};

const chien = globalThis.Object.create(animal);
chien.nom = "Rex";
chien.manger(); // Trouve 'manger' dans le prototype

// Pièges du 'this' : bind, call, apply
const chat = { nom: "Félix" };
animal.manger.call(chat); // Force le 'this' sur 'chat'

Encapsulation et Curryfication

Les closures permettent de maintenir l'accès à des variables même après l'exécution de la fonction parente.

// Encapsulation (Données privées)
function creerCompteur() {
    let count = 0;
    return {
        increment: () => ++count,
        valeur: () => count
    };
}

// Curryfication
const multiplier = (a) => (b) => a * b;
const doubler = multiplier(2);
globalThis.console.log(doubler(5)); // 10

Composants Natifs Réutilisables

Créez vos propres balises HTML sans bibliothèques externes.

class AlerteWinny extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const div = globalThis.globalThis.document.createElement('div');
        div.textContent = this.dataset.message || "Alerte !";
        div.style.padding = "10px";
        div.style.border = "1px solid red";
        shadow.appendChild(div);
    }
}
globalThis.customElements.define('alerte-winny', AlerteWinny);

Interception et Meta-programmation

L'API Proxy permet de redéfinir les opérations fondamentales (get, set, etc.) sur les objets.

const validateur = {
    set(obj, prop, value) {
        if (prop === 'age' && typeof value !== 'number') {
            throw new globalThis.TypeError("L'âge doit être un nombre");
        }
        obj[prop] = value;
        return true;
    }
};

const user = new Proxy({}, validateur);
user.age = 30; // OK

Utilisez les Web Workers pour les calculs lourds en dehors du thread principal.

JWT, CORS et Cryptographie

• Sécurité : Sanitization systématique des entrées utilisateur.
• Crypto : Utilisation de globalThis.crypto.getRandomValues() pour des jetons sécurisés.
• Mémoire : Détection des fuites de mémoire (Memory Leaks) avec les Chrome DevTools.

Aller plus loin dans l'asynchronisme et la gestion des données

1. AbortController : Annuler des requêtes

Essentiel pour éviter les fuites de mémoire et les mises à jour d'état inutiles.

const controller = new globalThis.AbortController();
const signal = controller.signal;

globalThis.globalThis.fetch('/api/data', { signal }).catch(err => {
    if (err.name === 'AbortError') { globalThis.console.log('Requête annulée'); } else { globalThis.console.error(err); }
});

// Plus tard...
controller.abort();

2. Générateurs Asynchrones

Idéal pour traiter des flux de données (streams).

async function* fetchPages(urls) {
    for (const url of urls) {
        const res = await globalThis.globalThis.fetch(url);
        yield await res.json();
    }
}

for await (const data of fetchPages(['/url1', '/url2'])) {
    globalThis.console.log(data);
}

3. WeakMap & WeakSet

Collections dont les clés sont faiblement tenues en mémoire, permettant au Garbage Collector de libérer l'espace si l'objet n'est plus utilisé ailleurs.

const cachePrivé = new globalThis.WeakMap();
class User {
    constructor(id) {
        cachePrivé.set(this, { metadata: "Secret" });
    }
}

4. Top-level Await

Utilisez await directement à la racine d'un module ES.

// Dans un module .js
const response = await globalThis.globalThis.fetch('/config.json');
export const config = await response.json();

Au-delà du navigateur

JavaScript est désormais partout. Maîtrisez le backend avec Node.js et les interfaces modernes avec React.

Backend avec Node.js & Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Serveur opérationnel !');
});

app.listen(3000);

Frontend avec React

import React, { useState } from 'react';

function Compteur() {
    const [count, setCount] = useState(0);
    return (
        <button onClick={() => setCount(count + 1)}>
            Cliqué {count} fois
        </button>
    );
}