JavaScript avancé : la suite logique après les bases

Tu maîtrises les bases de JavaScript. Variables, conditions, boucles, fonctions, tableaux, manipulation du DOM : tu écris des scripts qui marchent. Et puis un jour tu colles un appel de fonction dans un setTimeout, ou tu passes une méthode en callback, et soudain this ne pointe plus vers ce que tu croyais. La valeur est undefined, ou pire, c'est l'objet window tout entier. Tu ajoutes des .bind() au hasard jusqu'à ce que ça remarche, sans vraiment savoir pourquoi.

C'est le moment précis où finissent les bases et où commence le niveau au-dessus. Ce n'est pas une question de connaître plus de fonctions : c'est une question de comprendre comment le langage fonctionne réellement sous le capot. Voici l'ordre dans lequel je conseille d'aborder cette montée en compétence, après des années de JavaScript et à voir des devs buter exactement sur les mêmes marches.

Ce qui sépare les bases du niveau au-dessus

Aux bases, tu utilises le langage. Au niveau au-dessus, tu comprends le langage. La différence n'est pas cosmétique. Un débutant écrit du code qui marche par accident ; un dev confirmé sait pourquoi il marche, et donc pourquoi il casse.

Trois choses changent tout. D'abord, structurer son code : ne plus empiler des fonctions dans un seul fichier, mais penser en objets, en modules, en responsabilités séparées. Ensuite, comprendre le modèle objet de JavaScript, qui n'est pas celui des autres langages : pas de vraies classes au départ, mais des prototypes, et un this dont la valeur dépend de comment la fonction est appelée, pas de où elle est écrite. Enfin, exploiter ce que le navigateur offre vraiment : géolocalisation, notifications, presse-papier, temps réel, dessin. Des capacités que la plupart des débutants ignorent.

Le bon ordre

Comme pour tout, l'ordre compte. Chaque étape s'appuie sur la précédente, et l'une d'elles est le cœur du sujet : si tu ne comprends pas this et les prototypes, tout le reste restera de la magie noire.

1. Les classes. C'est l'entrée la plus naturelle quand on vient des bases. La syntaxe class de JavaScript moderne ressemble à celle des autres langages : un constructeur, des méthodes, des champs. Tu apprends à modéliser ton domaine en objets plutôt qu'en variables éparpillées. Les champs privés (préfixe #) et l'héritage avec extends donnent une structure propre.

class CompteBancaire {
  #solde = 0;                  // champ privé, inaccessible de l'extérieur

  constructor(titulaire) {
    this.titulaire = titulaire;
  }

  deposer(montant) {
    this.#solde += montant;
    return this.#solde;
  }
}

const compte = new CompteBancaire('Odilon');
compte.deposer(100);           // 100
// compte.#solde            -> erreur de syntaxe : privé

2. this et les prototypes : le cœur du sujet. Et là, surprise. Cette belle syntaxe class n'est qu'un habillage. Sous le capot, JavaScript n'a pas de classes au sens traditionnel : il a des prototypes. Chaque objet possède un lien caché vers un autre objet, son prototype, où il va chercher les propriétés et méthodes qu'il ne possède pas lui-même. Les méthodes d'une classe vivent en réalité sur ce prototype partagé, pas sur chaque instance.

Comprendre ça résout d'un coup une foule de mystères. Mais le vrai piège, celui qui fait perdre des heures à tout le monde, c'est this. Sa valeur ne dépend pas de l'endroit où la fonction est écrite, mais de la façon dont elle est appelée. Détache une méthode de son objet et this se perd.

const compte = new CompteBancaire('Odilon');

// Appel direct : this = compte, tout va bien
compte.deposer(50);

// Passée en callback : this est détachée de compte
setTimeout(compte.deposer, 1000, 50);
// -> erreur : this.#solde se lit sur un this qui n'est plus le compte

// La parade : figer this avec bind...
setTimeout(compte.deposer.bind(compte), 1000, 50);

// ...ou une fonction flèche, qui capture le this du contexte
setTimeout(() => compte.deposer(50), 1000);

C'est exactement le bug du setTimeout de l'intro. La règle à graver : une fonction flèche n'a pas son propre this, elle hérite de celui de l'endroit où elle est définie. Une fonction classique, elle, reçoit son this au moment de l'appel. Une fois ce mécanisme clair, call, apply, bind et l'héritage prototypal deviennent logiques au lieu d'être des incantations.

3. Les modules ES. Maintenant que tu structures ton code en classes, tu ne veux plus tout entasser dans un fichier. Les modules (import / export) découpent ton application en morceaux réutilisables, chacun avec sa portée propre, sans polluer le scope global. C'est la base de toute architecture front sérieuse, et le socle sur lequel reposent Vue, React ou n'importe quel bundler.

// compte.js
export class CompteBancaire { /* ... */ }

// app.js
import { CompteBancaire } from './compte.js';
const c = new CompteBancaire('Odilon');

4. Les Web APIs du navigateur. Le navigateur n'est pas qu'un afficheur de HTML : c'est une plateforme. La Geolocation donne la position de l'utilisateur, la Notifications API envoie des notifications système, le Clipboard lit et écrit le presse-papier, les WebSockets ouvrent un canal temps réel bidirectionnel avec le serveur. Ces API transforment une page statique en application. Beaucoup de débutants les ignorent et réinventent en pire ce que le navigateur offre gratuitement.

5. Canvas : dessin et animation. Enfin, le dessin. L'élément <canvas> est une surface pixel sur laquelle tu dessines en JavaScript : formes, images, texte. Couplé à requestAnimationFrame, il permet l'animation fluide, les jeux, les visualisations de données. C'est la récompense après les fondations : du code qui produit quelque chose de visuel et vivant.

Pratiquer avec du code qui tourne

On n'apprend pas this en lisant un paragraphe sur this. On l'apprend en cassant volontairement le contexte, en voyant undefined s'afficher, puis en corrigeant avec bind ou une fonction flèche jusqu'à ce que le mécanisme devienne une évidence. Pareil pour les prototypes, les modules ou Canvas : il faut du code exécutable, modifiable, sous les yeux.

C'est ce que j'ai construit dans le cours JavaScript avancé, avec du code exécutable de ce site : chaque étape ci-dessus a ses leçons, avec des exemples que tu lances et modifies directement dans la page, des exercices et des quiz. Le piège de this y a sa place de choix, parce que c'est le concept qui débloque tout le reste.

Si les bases ne sont pas encore solides, commence par là : le cours JavaScript pour débuter couvre variables, fonctions, tableaux et DOM, dans l'ordre. Le niveau avancé n'a de sens qu'une fois ces fondations en place.

Conclusion

Passer au JavaScript avancé, ce n'est pas accumuler des fonctions exotiques. C'est comprendre comment le langage marche vraiment, et au centre de tout il y a this et les prototypes. C'est le concept qui sépare le dev qui colle des .bind() au hasard de celui qui sait exactement pourquoi son callback a perdu son contexte.

Le reste, classes, modules, Web APIs, Canvas, vient naturellement une fois ce socle posé. Apprends-les dans l'ordre, les mains sur du code qui tourne, et le saut entre les bases et le niveau au-dessus devient une marche, pas un mur.