4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
⚡ COURS PROFESSIONNEL 2024
Maîtrisez
JavaScript
JS
De A à Z
De l'histoire du langage aux patterns avancés — closures, async/await,
POO, performances et projets réels. Un cours complet conçu pour les
apprenants sérieux.
10 5 30+ ∞
MODULES PROJETS EXERCICES EXEMPLES
Commencer le cours →
[Link] 1/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
MODULE 01
Histoire de JavaScript
Comprendre les origines pour mieux maîtriser le présent.
1995
Naissance — Brendan Eich chez Netscape
JavaScript est créé en 10 jours par Brendan Eich pour Netscape Navigator. À l'origine nommé Mocha,
puis LiveScript, il prend le nom de JavaScript pour surfer sur la popularité de Java.
1997
ECMAScript — Standardisation
L'ECMA International publie la première norme ECMAScript (ES1). Le langage est officiellement
standardisé, ouvrant la voie à d'autres moteurs.
2009
[Link] — JS côté serveur
Ryan Dahl crée [Link], basé sur le moteur V8 de Google Chrome. JavaScript quitte le navigateur et
conquiert le serveur.
2015
ES6 / ES2015 — La révolution
La plus grande mise à jour du langage : classes, modules, arrow functions, Promises, let/const,
template literals, destructuring… JavaScript devient un langage moderne.
2024
JavaScript — Partout
React, Vue, Angular côté front. [Link], Deno, Bun côté back. React Native sur mobile. Electron sur
desktop. JS est le langage le plus utilisé au monde 12 années consécutives (Stack Overflow).
💡 À retenir
JavaScript ≠ Java. Ce sont deux langages totalement différents. Le nom "JavaScript" était
un coup marketing de Netscape en 1995.
[Link] 2/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
✓ Module terminé !
MODULE 02
Types & Variables
Les briques fondamentales de tout programme JavaScript.
2.1 var vs let vs const
ES6 a introduit let et const pour résoudre les problèmes de portée liés à var. Comprendre leurs
différences est essentiel.
Caractéristique var let const
Portée (scope) Fonction Bloc Bloc
Hoisting Oui (undefined) TDZ* TDZ*
Redéclaration Oui Non Non
Réassignation Oui Oui Non
Recommandé ❌ ✓ ✓ (priorité)
* TDZ = Temporal Dead Zone — accès avant déclaration lève une ReferenceError.
JAVASCRIPT Copier
// ❌ var — portée fonction, hoisting problématique
function exemple() {
if (true) {
var x = 10;
}
[Link](x); // 10 (var fuit hors du bloc !)
}
[Link] 3/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
// ✅ let — portée bloc
function exemple2() {
if (true) {
let y = 10;
}
[Link](y); // ReferenceError: y is not defined
}
// ✅ const — immuable (référence)
const PI = 3.14159;
const user = { name: 'Alice' };
[Link] = 'Bob'; // ✅ OK — la référence est const, pas le contenu
user = {}; // ❌ TypeError
2.2 Les 7 types primitifs
🔢 Number & BigInt
Number : tout nombre (entier ET flottant). Max sûr : 2⁵³−1.
BigInt : entiers arbitrairement grands. Ex: 9007199254740992n
📝 String
Séquence de caractères Unicode. Immuable. Trois syntaxes : '...', "...", `template`.
Les template literals permettent l'interpolation et le multiline.
✅ Boolean
true ou false. Valeurs falsy : false, 0, '', null, undefined, NaN. Tout le reste est
truthy.
❓ null, undefined, Symbol
[Link] 4/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
null : absence volontaire de valeur.
undefined : variable déclarée non initialisée.
Symbol : identifiant unique et immuable.
JAVASCRIPT — TYPEOF & COERCITION Copier
// typeof
typeof 42 // "number"
typeof "hello" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" ← bug historique de JS !
typeof [] // "object"
typeof {} // "object"
typeof function(){} // "function"
// Coercition implicite — pièges classiques
1 + "2" // "12" (string)
1 - "2" // -1 (number)
true + true // 2
null == undefined // true
null === undefined// false ← toujours utiliser ===
Quiz Quel est le résultat de typeof null en JavaScript ?
A "null"
B "object"
C "undefined"
D "primitive"
💪 Exercice 1 FACILE
[Link] 5/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
Déclarez une constante personne contenant votre nom, âge et ville sous forme d'objet.
Affichez chaque propriété avec [Link].
// Votre code ici
const personne = {
// Complétez...
};
// Affichez les propriétés
▶ Exécuter Voir solution
✓ Marquer comme terminé
MODULE 03
Fonctions & Scope
Maîtriser les fonctions, c'est maîtriser JavaScript.
Déclaration Expression Arrow Ordre Supérieur
Fonctions d'ordre supérieur
Une fonction qui prend et/ou retourne une autre fonction. Le cœur de la programmation fonctionnelle
en JS.
JS Copier
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
// map — transforme chaque élément
[Link] 6/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
const squares = [Link](n => n ** 2);
// [1, 4, 9, 16, 25, 36, 49, 64]
// filter — retient les éléments
const evens = [Link](n => n % 2 === 0);
// [2, 4, 6, 8]
// reduce — accumule en une valeur
const total = [Link]((acc, n) => acc + n, 0);
// 36
// Chaining — pipeline fonctionnel
const result = [1,2,3,4,5]
.filter(n => n > 2)
.map(n => n * 10)
.reduce((a, b) => a + b);
// 120
// Composition de fonctions
const compose = (...fns) => x => [Link]((v, f) => f(v), x);
const addTax = x => x * 1.2;
const round = x => [Link](x);
const price = compose(round, addTax);
price(100); // 120
💪 Exercice 2 MOYEN
En utilisant map, filter, et reduce dans une chaîne, calculez la somme des carrés des
nombres impairs du tableau [1,2,3,4,5,6,7,8,9,10].
const nums = [1,2,3,4,5,6,7,8,9,10];
const result = nums
// .filter(...)
// .map(...)
// .reduce(...)
▶ Exécuter Voir solution
[Link] 7/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
✓ Marquer comme terminé
MODULE 04
Closures & Hoisting
Les concepts les plus mal compris — et les plus puissants.
4.1 Closures — La mémoire des fonctions
Une closure est une fonction qui "se souvient" de son environnement lexical, même après que la
fonction englobante a terminé son exécution. C'est l'un des concepts les plus puissants de JavaScript.
JS — CLOSURES Copier
// Exemple classique — compteur encapsulé
function creerCompteur() {
let count = 0; // variable privée
return {
increment: () => ++count,
decrement: () => --count,
valeur: () => count
};
}
const c1 = creerCompteur();
const c2 = creerCompteur(); // scope indépendant
[Link](); // 1
[Link](); // 2
[Link](); // 0 — indépendant de c1
// Closure avec usine de fonctions
const multiplier = factor => n => n * factor;
const double = multiplier(2);
[Link] 8/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
const triple = multiplier(3);
double(5); // 10
triple(5); // 15
// Piège classique des closures en boucle
for (let i = 0; i < 3; i++) {
setTimeout(() => [Link](i), 100);
}
// Avec let : 0, 1, 2 ✅
// Avec var : 3, 3, 3 ❌
🎯 Cas d'usage réels
Les closures servent à : encapsuler des données privées (module pattern), créer des
callbacks avec contexte, mémorisation (memoization), currying et composition
fonctionnelle.
Quiz Que va afficher const fn = (x) => (y) => x + y; const add5 =
fn(5); [Link](add5(3));
ce code ?
A undefined
B NaN
C 8
D 53
✓ Marquer comme terminé
[Link] 9/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
MODULE 05
Prototypes & POO
L'orienté objet en JavaScript — héritage prototypal et classes ES6.
🔗 Prototype Chain
Chaque objet JS possède un lien interne [[Prototype]] vers un objet parent. La recherche
d'une propriété remonte cette chaîne jusqu'à null.
🏗️ Classes ES6
Syntaxe sucrée sur les prototypes. Offre class, constructor, extends, super,
getters/setters, et méthodes statiques.
JS — CLASSES & HÉRITAGE Copier
// ── Classe de base ──
class Animal {
// Champ privé (ES2022)
#espece;
constructor(nom, espece) {
[Link] = nom;
this.#espece = espece;
}
get info() {
return `${[Link]} (${this.#espece})`;
}
parler() {
return `Je suis ${[Link]}`;
}
[Link] 10/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
static creer(nom, espece) {
return new Animal(nom, espece);
}
}
// ── Héritage ──
class Chien extends Animal {
constructor(nom, race) {
super(nom, 'Canis lupus'); // appel constructeur parent
[Link] = race;
}
parler() { // override
return `${[Link]()} et j'aboie ! 🐶`;
}
}
const rex = new Chien('Rex', 'Labrador');
[Link]([Link]); // "Rex (Canis lupus)"
[Link]([Link]()); // "Je suis Rex et j'aboie ! 🐶"
[Link](rex instanceof Chien); // true
[Link](rex instanceof Animal); // true
✓ Marquer comme terminé
MODULE 06
Async / Promises
Maîtriser la programmation asynchrone — le nerf de la guerre en JS moderne.
Callbacks Promises Async/Await Parallélisme
[Link] 11/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
⚠️ Callback Hell
Les callbacks imbriqués créent du code difficile à maintenir et déboguer — surnommé
"Pyramid of Doom".
JS — CALLBACK HELL Copier
// ❌ Callback Hell — à éviter
getData(id, (err, user) => {
if (err) return handleError(err);
getPosts([Link], (err, posts) => {
if (err) return handleError(err);
getComments(posts[0].id, (err, comments) => {
if (err) return handleError(err);
// ... encore plus profond
});
});
});
💪 Exercice 3 DIFFICILE
Créez une fonction fetchWithRetry(url, retries) qui tente de fetcher une URL et
réessaie automatiquement N fois en cas d'erreur avec un délai exponentiel.
async function fetchWithRetry(url, retries = 3) {
// Votre implémentation...
// Hint: utilisez une récursion ou une boucle
// Délai exponentiel: 1s, 2s, 4s...
}
▶ Exécuter Voir solution
[Link] 12/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
✓ Marquer comme terminé
MODULE 07
ES6+ Moderne
La syntaxe moderne qui rend JavaScript élégant et expressif.
JS — DESTRUCTURING Copier
// ── Destructuring d'objets ──
const user = { name: 'Alice', age: 28, city: 'Paris' };
const { name, age, city = 'Inconnue' } = user;
const { name: prenom } = user; // renommage
// Destructuring imbriqué
const { address: { street, zip } } = userData;
// ── Destructuring de tableaux ──
const [first, second, ...rest] = [1,2,3,4,5];
// first=1, second=2, rest=[3,4,5]
// Swap de variables
let [a, b] = [1, 2];
[a, b] = [b, a]; // a=2, b=1
// ── Spread operator ──
const arr1 = [1,2,3];
const arr2 = [...arr1, 4, 5]; // [1,2,3,4,5]
const clone = { ...user, age: 29 }; // shallow clone + update
const merged = { ...defaults, ...options }; // merge
// ── Optional Chaining (?.) ──
const street = user?.address?.street; // undefined si null/undef
const len = arr?.length;
const val = obj?.method?.();
[Link] 13/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
// ── Nullish Coalescing (??) ──
const port = [Link] ?? 3000; // 3000 si null/undefined
const name = [Link] ?? 'Anonyme';
JS — MAP, SET, WEAKREF Copier
// ── Map — clés de tout type ──
const map = new Map();
[Link]('name', 'Alice');
[Link](42, 'number key');
[Link](obj, 'object key');
[Link]('name'); // 'Alice'
[Link]; // 3
// Itération
for (const [key, value] of map) {
[Link](key, =>, value);
}
// ── Set — valeurs uniques ──
const nums = new Set([1, 2, 2, 3, 3, 4]);
[Link]([...nums]); // [1, 2, 3, 4]
// Dédupliquer un tableau
const unique = (arr) => [...new Set(arr)];
unique([1,1,2,3,3]); // [1, 2, 3]
✓ Marquer comme terminé
MODULE 08
DOM Avancé & Events
Manipuler le navigateur comme un pro.
[Link] 14/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
JS — DOM MANIPULATION Copier
// ── Sélecteurs modernes ──
const btn = [Link]('#myBtn');
const items = [Link]('.item');
const h1s = [...[Link]('h1')]; // NodeList → Array
// ── Créer & insérer des éléments ──
const card = [Link]('div');
[Link] = 'card';
[Link] = `
<h2>Titre</h2>
<p>Contenu</p>
`;
[Link](card);
// ── Event Delegation (performance) ──
// Au lieu d'ajouter un listener sur chaque item :
[Link]('#list')
.addEventListener('click', (e) => {
if ([Link]('.item')) {
[Link]('Item cliqué :', [Link]);
}
});
// ── Intersection Observer — lazy loading ──
const observer = new IntersectionObserver(
(entries) => {
[Link]((entry) => {
if ([Link]) {
[Link]('visible');
[Link]([Link]);
}
});
},
{ threshold: 0.1 }
);
[Link]('.lazy').forEach(el => [Link](el));
[Link] 15/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
✓ Marquer comme terminé
MODULE 09
Modules & Design Patterns
Architecturer du code maintenable et réutilisable.
📦 ES Modules
import/export natif. Chargement statique analysé par le moteur. Fonctionne dans les
navigateurs modernes et [Link].
🏭 Factory Pattern
Crée des objets sans utiliser new. Flexibilité maximale, encapsulation simple, pas de this
ambigu.
👁️ Observer Pattern
Un objet notifie ses abonnés lors de changements. Base de tous les systèmes réactifs (React,
Vue, RxJS).
🔄 Module Pattern
Encapsuler des données privées via closure. Exposer une API publique propre. L'ancêtre des
modules ES.
[Link] 16/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
JS — OBSERVER PATTERN Copier
// Observer / EventEmitter maison
class EventEmitter {
#listeners = new Map();
on(event, cb) {
if (!this.#[Link](event)) {
this.#[Link](event, []);
}
this.#[Link](event).push(cb);
return this; // chaining
}
off(event, cb) {
const cbs = this.#[Link](event) || [];
this.#[Link](event, [Link](fn => fn !== cb));
return this;
}
emit(event, ...args) {
(this.#[Link](event) || []).forEach(cb => cb(...args));
return this;
}
once(event, cb) {
const wrapper = (...args) => {
cb(...args);
[Link](event, wrapper);
};
return [Link](event, wrapper);
}
}
// Usage
const store = new EventEmitter();
[Link]('change', (data) => [Link]('Changed:', data));
[Link]('change', { key: 'theme', value: 'dark' });
[Link] 17/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
✓ Marquer comme terminé
MODULE 10
Performance & Debug
Écrire du code rapide, sûr et débogable.
⚡ Memoization
Cacher les résultats de fonctions coûteuses. Évite de recalculer pour les mêmes arguments.
🚦 Debounce & Throttle
Debounce : attend la fin d'une série d'appels (search input). Throttle : limite la fréquence
d'appels (scroll, resize).
JS — MEMOIZATION & DEBOUNCE Copier
// ── Memoization générique ──
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = [Link](args);
if ([Link](key)) return [Link](key);
const result = [Link](this, args);
[Link](key, result);
return result;
};
}
const fib = memoize((n) => n <= 1 ? n : fib(n-1) + fib(n-2));
[Link] 18/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
fib(40); // instantané grâce au cache
// ── Debounce ──
function debounce(fn, delay = 300) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => [Link](this, args), delay);
};
}
const onSearch = debounce((q) => search(q), 400);
// ── Throttle ──
function throttle(fn, limit = 100) {
let lastCall = 0;
return function(...args) {
const now = [Link]();
if (now - lastCall >= limit) {
lastCall = now;
return [Link](this, args);
}
};
}
const onScroll = throttle(updateUI, 16); // ~60fps
✓ Marquer comme terminé
MODULE 11
5 Projets Réels
Mettez en pratique toutes les compétences du cours.
[Link] 19/22
🌤️ 📝
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
Application Météo Todo App + LocalStorage
Fetch API, async/await, DOM manipulation. CRUD complet, persistance locale, filtres,
Affiche la météo en temps réel via drag & drop. Architecture MVC avec Event
OpenWeather API. Emitter.
fetch async/await DOM classes events localStorage
API REST MVC
Niveau : Débutant Niveau : Intermédiaire
🎮 💬
Jeu Snake (Canvas) Chat Temps Réel
Canvas 2D, game loop, gestion des états, WebSocket, rooms, notifications, historique.
score, niveaux de difficulté progressifs. Architecture publish/subscribe avec
EventEmitter.
canvas game loop OOP
WebSocket [Link] Observer
requestAnimationFrame
async
Niveau : Avancé
Niveau : Avancé
🛒
Mini E-Commerce
[Link] 20/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
State management custom, panier, filtres
produits, routing SPA, animations CSS.
Architecture complète.
SPA state routing modules
patterns
Niveau : Expert
🚀 Conseil
Réalisez les projets dans l'ordre. Chaque projet réutilise les concepts des précédents.
Publiez votre code sur GitHub pour construire votre portfolio !
MODULE 12
Cheat Sheet
Référence rapide à garder sous la main.
ARRAY METHODS OBJECT METHODS
.map(fn) → nouveau tableau [Link](o) → [clés]
.filter(fn) → éléments filtrés [Link](o) → [valeurs]
.reduce(fn, init) → valeur unique [Link](o) → [[k,v]]
.find(fn) → 1er élément trouvé [Link](t, s) → merge
.some(fn) → true si ≥1 match [Link](o) → immutable
.every(fn) → true si tous match [Link](p) → avec proto
.flat(depth) → aplatit structuredClone(o) → deep copy
.flatMap(fn) → map + flat(1)
ASYNC PATTERNS ES6+ QUICK REF
async/await → lecture synchrone { a, b } → shorthand props
[Link] 21/22
4/1/26, 12:19 PM JavaScript Avancé — Cours Complet
[Link]([]) → parallèle [a, ...rest] → destructuring
[Link]([]) → 1er résolu {x} = obj → déstructuration objet
[Link]([]) → tous ?? → nullish coalescing
[Link]([]) → 1er succès ?. → optional chaining
try/catch/finally → gestion err ??= → nullish assignment
`${expr}` → template literal
DOM ESSENTIELS UTILITAIRES
querySelector(sel) → 1 élément [Link]/timeEnd → perf
querySelectorAll(sel) → NodeList [Link]() → ms précis
createElement(tag) → nouvel el [Link]/parse → sérialise
[Link](ev, fn) structuredClone() → deep clone
[Link](cls) [Link]() → UUID v4
[Link] → data-key attr queueMicrotask(fn) → micro task
[Link](sel) → parent match URL, URLSearchParams → URLs
[Link] 22/22