- Éditeur JavaScript en ligne — Testez votre code

Pourquoi utiliser un éditeur JavaScript en ligne ?

L'environnement de développement classique impose de nombreuses contraintes : installation de Node.js, configuration d'un projet, gestion des dépendances, ouverture d'un éditeur de code lourd… Pour tester une idée rapide, vérifier le comportement d'une fonction ou apprendre JavaScript, ces obstacles ralentissent inutilement.

Un éditeur JavaScript en ligne répond à ce besoin : écrire du code, l'exécuter immédiatement, voir le résultat dans la console — le tout dans le navigateur, sans rien installer.

🎯 Cas d'usage principaux

• Apprentissage — Tester des concepts JavaScript (closures, promesses, classes) au fur et à mesure de la lecture d'un cours
• Prototypage rapide — Valider une logique métier avant de l'intégrer dans un projet
• Débogage de snippets — Isoler un bug dans un petit extrait de code pour le reproduire et le corriger
• Entretiens techniques — S'entraîner sur des exercices algorithmiques (tri, récursion, manipulation de tableaux)
• Formation et cours — Démontrer des concepts à des élèves en temps réel
• Tests d'API JavaScript — Vérifier le comportement de méthodes natives (Array.reduce, String.matchAll, Object.entries…)

🆚 Comparaison avec les alternatives

Fonctionnalités de l'éditeur

Cet outil embarque toutes les fonctionnalités essentielles pour une expérience d'édition fluide :

⚡ Exécution instantanée

• Bouton ▶ Exécuter ou raccourci Ctrl+Enter
• Exécution via new Function(code) — sandbox isolée du scope global
• Mesure du temps d'exécution affiché en ms
• Capture des exceptions avec message d'erreur coloré

🖥️ Console simulée

• Interception de console.log, console.warn, console.error, console.info
• Coloration syntaxique des types : string (bleu), number (cyan), boolean (rouge), null/undefined (gris), tableaux (violet), objets (vert)
• Affichage des objets en JSON indenté
• Icônes distinctes par type de message (›, ⚠, ✖, ℹ)

✏️ Éditeur enrichi

• Police monospace Fira Code avec ligatures
• Support de la touche Tab → insertion de 4 espaces (pas de changement de focus)
• Compteur de lignes et de caractères en temps réel
• Fond sombre style terminal pour réduire la fatigue visuelle

📂 Exemples intégrés

8 exemples prêts à l'emploi couvrant les concepts clés :

• Hello World, Variables & Types
• Tableaux (map, filter, reduce, déstructuration)
• Objets et spread operator
• Promesses et async/await
• Classes ES6+ avec champs privés
• Générateurs et itérateurs
• Expressions régulières avec groupes nommés

Guide d'utilisation pas à pas

🚀 Premier test en 30 secondes

1. L'éditeur est pré-chargé avec un exemple "Hello World"
2. Cliquez sur ▶ Exécuter (ou appuyez Ctrl+Enter)
3. La console affiche le résultat à droite
4. Modifiez le code, ré-exécutez — la console se recharge à chaque fois

📝 Écrire votre propre code

1. Cliquez sur 🗑 Vider pour effacer l'éditeur
2. Tapez ou collez votre code JavaScript
3. Utilisez console.log() pour afficher des résultats
4. Appuyez sur Ctrl+Enter pour exécuter

💡 Astuces clavier

⚠️ Limitations à connaître

• alert(), confirm(), prompt() fonctionnent mais bloquent l'UI — à éviter
• Les imports ESM (import { x } from 'module') ne sont pas supportés
• L'accès à localStorage, document, window fonctionne mais peut interférer avec la page
• Les boucles infinies (while(true) sans break) bloqueront le navigateur
• Les appels fetch() vers des APIs externes peuvent être bloqués par le CORS

Concepts fondamentaux JavaScript à tester

Voici les notions essentielles que vous pouvez explorer et tester directement dans cet éditeur :

1. Variables et portée

JavaScript propose trois façons de déclarer une variable, avec des règles de portée différentes :

// var — portée fonction, remontée (hoisting)
var x = 10;

// let — portée bloc, pas de hoisting utilisable
let y = 20;

// const — portée bloc, liaison immuable (pas la valeur !)
const obj = { a: 1 };
obj.a = 2; // OK — la référence est constante, pas le contenu

console.log(x, y, obj.a); // 10 20 2

2. Fonctions et closures

Une closure est une fonction qui "capture" les variables de son scope parent même après que ce scope soit fermé :

function compteur(debut = 0) {
    let count = debut;
    return {
        increment: () => ++count,
        decrement: () => --count,
        valeur:    () => count
    };
}

const c = compteur(10);
c.increment();
c.increment();
c.decrement();
console.log("Valeur :", c.valeur()); // 11

3. Méthodes de tableau essentielles

Les méthodes fonctionnelles de tableau sont incontournables en JavaScript moderne :

const notes = [12, 8, 17, 5, 14, 9, 18, 11];

// map : transformer chaque élément
const doubled = notes.map(n => n * 2);

// filter : garder ceux qui passent le test
const admis = notes.filter(n => n >= 10);

// reduce : agréger en une valeur
const moyenne = notes.reduce((sum, n) => sum + n, 0) / notes.length;

// find : premier qui passe
const premier18 = notes.find(n => n >= 18);

// some / every : test booléen
const tousMajoritaires = notes.every(n => n > 0);

console.log("Admis :", admis);
console.log("Moyenne :", moyenne.toFixed(2));
console.log("Premier ≥18 :", premier18);

4. Destructuration et spread

// Destructuration de tableau
const [a, b, ...reste] = [1, 2, 3, 4, 5];
console.log(a, b, reste); // 1 2 [3, 4, 5]

// Destructuration d'objet avec renommage et défaut
const { prenom: p = "Anonyme", age = 0, ...autres } = {
    prenom: "Said",
    age: 35,
    ville: "Paris"
};
console.log(p, age, autres);

// Spread pour fusionner
const config = { theme: "dark", lang: "fr" };
const userConfig = { lang: "en", fontSize: 16 };
const final = { ...config, ...userConfig };
console.log(final); // lang "en" gagne

5. Async/Await et gestion d'erreurs

// Simuler une API avec délai
const fakeApi = (data, delay = 100, fail = false) =>
    new Promise((res, rej) =>
        setTimeout(() => fail ? rej(new Error("API Error")) : res(data), delay)
    );

(async function () {
    // Promise.all — exécution parallèle
    try {
        const [users, posts] = await Promise.all([
            fakeApi({ users: [1, 2, 3] }),
            fakeApi({ posts: ["A", "B"] })
        ]);
        console.log("Users :", users);
        console.log("Posts :", posts);
    } catch (err) {
        console.error("Erreur parallèle :", err.message);
    }

    // Gestion d'erreur
    try {
        await fakeApi(null, 50, true);
    } catch (err) {
        console.warn("Erreur gérée :", err.message);
    }
})();

Exemples pratiques commentés

🔢 Algorithmes classiques

Tri à bulles (Bubble Sort) — idéal pour comprendre les boucles imbriquées :

function bubbleSort(arr) {
    const a = [...arr]; // copie pour ne pas muter l'original
    for (let i = 0; i < a.length - 1; i++) {
        for (let j = 0; j < a.length - 1 - i; j++) {
            if (a[j] > a[j + 1]) {
                [a[j], a[j + 1]] = [a[j + 1], a[j]]; // swap ES6
            }
        }
    }
    return a;
}

const nums = [64, 34, 25, 12, 22, 11, 90];
console.log("Avant :", nums);
console.log("Après :", bubbleSort(nums));

🔁 Récursion — Fibonacci

// Version naive (exponentielle)
function fib(n) {
    if (n <= 1) return n;
    return fib(n - 1) + fib(n - 2);
}

// Version mémoïsée (linéaire)
function fibMemo(n, memo = {}) {
    if (n in memo) return memo[n];
    if (n <= 1) return n;
    return memo[n] = fibMemo(n - 1, memo) + fibMemo(n - 2, memo);
}

console.log("fib(10) :", fib(10));
console.log("fibMemo(40) :", fibMemo(40)); // Instantané grâce au cache

🗂️ Manipulation de données JSON

const employes = [
    { id: 1, nom: "Alice",   dept: "Dev",     salaire: 52000 },
    { id: 2, nom: "Bob",     dept: "Design",  salaire: 47000 },
    { id: 3, nom: "Claire",  dept: "Dev",     salaire: 58000 },
    { id: 4, nom: "David",   dept: "Design",  salaire: 51000 },
    { id: 5, nom: "Eva",     dept: "Dev",     salaire: 62000 }
];

// Grouper par département
const parDept = employes.reduce((acc, emp) => {
    (acc[emp.dept] = acc[emp.dept] || []).push(emp.nom);
    return acc;
}, {});
console.log("Par département :", parDept);

// Salaire moyen par département
const salaireMoyen = employes.reduce((acc, emp) => {
    acc[emp.dept] = acc[emp.dept] || { total: 0, count: 0 };
    acc[emp.dept].total += emp.salaire;
    acc[emp.dept].count++;
    return acc;
}, {});

Object.entries(salaireMoyen).forEach(([dept, { total, count }]) => {
    console.log(\`\${dept} : \${(total / count).toFixed(0)} €/an\`);
});

🎯 Design patterns courants

Pattern Observer (Event Emitter simple) :

class EventEmitter {
    #listeners = new Map();

    on(event, fn) {
        if (!this.#listeners.has(event)) this.#listeners.set(event, []);
        this.#listeners.get(event).push(fn);
        return this; // chaînable
    }

    off(event, fn) {
        const list = this.#listeners.get(event) || [];
        this.#listeners.set(event, list.filter(l => l !== fn));
        return this;
    }

    emit(event, ...args) {
        (this.#listeners.get(event) || []).forEach(fn => fn(...args));
        return this;
    }
}

const bus = new EventEmitter();

const onLogin = (user) => console.log("Connexion :", user.nom);
const onLogin2 = (user) => console.log("Email envoyé à :", user.email);

bus.on("login", onLogin).on("login", onLogin2);
bus.emit("login", { nom: "Said", email: "contact@angularforall.com" });

bus.off("login", onLogin2);
console.log("--- Après désinscription ---");
bus.emit("login", { nom: "Alice", email: "alice@test.com" });

Bonnes pratiques JavaScript

✅ Code propre et maintenable

• Préférer const par défaut, let si réassignation, jamais var
• Utiliser des noms de variables descriptifs (userList plutôt que ul)
• Limiter la longueur des fonctions à 20-30 lignes maximum
• Un seul niveau d'imbrication dans les boucles — extraire en fonction sinon
• Utiliser l'opérateur ?? (nullish coalescing) plutôt que || pour les défauts
• Préférer Array.from() ou le spread [...] pour copier un tableau

🚫 Erreurs courantes à éviter

⚡ Performance JavaScript

• Mémoïsation — Cacher les résultats de fonctions pures coûteuses avec un Map ou WeakMap
• Debounce/Throttle — Limiter la fréquence d'exécution d'événements répétitifs (scroll, resize, input)
• Web Workers — Déléguer les calculs intensifs au worker pour ne pas bloquer le thread UI
• Lazy evaluation — Utiliser les générateurs pour traiter des collections volumineuses à la demande
• Batch DOM updates — Modifier le DOM en dehors du flux de rendu avec DocumentFragment

// Exemple de debounce
function debounce(fn, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Exemple de mémoïsation générique
function memoize(fn) {
    const cache = new Map();
    return function (...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) return cache.get(key);
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

const factorielle = memoize(function f(n) {
    return n <= 1 ? 1 : n * f(n - 1);
});

console.log(factorielle(10)); // 3628800
console.log(factorielle(10)); // Depuis le cache ✓

Questions fréquentes

❓ Mon code est-il envoyé à un serveur ?

Non. Ce code s'exécute entièrement dans votre navigateur via l'API JavaScript native new Function(). Aucune donnée n'est transmise à un serveur.

❓ Puis-je utiliser des modules NPM ?

Non directement. Cet éditeur ne supporte pas les imports NPM (require ou import). Pour des tests avec des librairies, utilisez StackBlitz ou CodeSandbox qui gèrent les dépendances.

❓ Pourquoi la console ne montre pas tout ?

Seules les sorties de console.log/warn/error/info sont capturées. Les retours de valeur de l'évaluation (comme dans la console navigateur) ne sont pas affichés — enveloppez-les dans un console.log().

❓ Comment afficher un objet complexe ?

L'outil sérialise automatiquement les objets en JSON indenté. Pour les objets circulaires (qui se référencent eux-mêmes), il affiche [Object] pour éviter une erreur de sérialisation.

❓ Puis-je tester du code TypeScript ?

Non — l'éditeur exécute du JavaScript pur. Pour TypeScript, il faut une étape de transpilation. Essayez le TypeScript Playground officiel sur typescriptlang.org.

❓ Le code survit-il au rechargement de page ?

Non, le contenu de l'éditeur n'est pas persisté. Si vous souhaitez garder votre code, copiez-le avec le bouton 📋 Copier le code avant de quitter.

❓ Async/Await fonctionne-t-il ?

Oui. L'outil supporte les fonctions asynchrones. Pour du code async au top-level, enveloppez-le dans une IIFE async : (async function() { await ... })(). Les résultats apparaissent dans la console avec un léger délai.

❓ Comment signaler un bug ou suggérer un exemple ?

Utilisez la section de commentaires ou le formulaire de contact du site. Les suggestions d'exemples sont les bienvenues — en particulier sur des patterns Angular, des algorithmes ou des sujets d'entretien technique.

Conclusion

Cet éditeur JavaScript en ligne est conçu pour être l'outil le plus rapide à portée de main quand vous avez besoin de tester du code. Pas d'inscription, pas d'installation, pas d'attente — juste un éditeur, une console et votre JavaScript.

Que vous soyez débutant qui découvre les closures, développeur expérimenté qui valide un algorithme, ou formateur qui prépare un exercice, cet outil vous permet de vous concentrer sur ce qui compte : le code.