5 erreurs fatales des débutants en JavaScript (et comment les éviter)

Pourquoi JavaScript fait mal à la tête, mais ne devrait pas briser une carrière

JavaScript est à la fois le langage de programmation le plus convivial et le plus perfide. D'un côté, vous écrivez console.log('Hello') — et le résultat apparaît immédiatement dans le navigateur. De l'autre, ce même code peut soudainement afficher undefined, NaN ou pire encore, et vous passerez une heure à chercher une erreur qui se cache dans une seule ligne.

Sur pythonlib.ru, nous savons à quel point il est important d'apprendre des erreurs des autres. Dans cet article, nous allons analyser 5 erreurs typiques des débutants en JavaScript qui transforment le code en citrouille. Et surtout, nous montrerons comment les corriger. C'est parti !

Erreur n°1 : Le « var » magique et l'incompréhension de la portée

De nombreux développeurs débutants qui étudient JavaScript utilisent var pour déclarer des variables. C'est un héritage de l'ancienne norme ES5, qui vit encore dans des manuels vieux de dix ans. Mais var, c'est comme une vieille voiture sans airbags : on peut rouler, mais au premier accident (lisez : bug), vous serez gravement touché.

Quel est le problème ?

var a une portée fonctionnelle, et non une portée de bloc. Cela signifie qu'une variable déclarée à l'intérieur d'un if ou d'un for sera accessible en dehors de ceux-ci.

// Exemple : Erreur avec var\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — fonctionne, bien que x soit déclaré dans if\n}\n\ntestVar();

Imaginez maintenant que vous ayez 1000 lignes de code dans votre projet. Vous déclarez var i dans une boucle, puis vous utilisez accidentellement la même variable plus tard — vous obtenez un bug impossible à tracer.

Comment faire correctement ?

Utilisez let et const. Ils ont une portée de bloc et se comportent de manière prévisible.

// Correct : let et const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

Conseil : utilisez toujours const par défaut. Seulement si la variable doit être réaffectée, prenez let. Laissez var dans le passé, comme les disquettes.

Erreur n°2 : La clé « this » oubliée — le contexte qui se perd

Le mot-clé this en JavaScript, c'est comme une surprise dans un œuf en chocolat : on ne sait jamais ce qui va sortir. Les débutants pensent souvent que this fait toujours référence à l'objet courant. Mais ce n'est pas le cas. this dépend de la façon dont la fonction est appelée, et non de l'endroit où elle est déclarée.

Exemple classique : perte de contexte dans un callback

const user = {\n  name: 'Anna',\n  greet: function() {\n    console.log('Bonjour, ' + this.name);\n  }\n};\n\nuser.greet(); // Bonjour, Anna — fonctionne\n\nsetTimeout(user.greet, 1000); // Bonjour, undefined — contexte perdu !

Pourquoi cela ? Parce que setTimeout appelle la fonction comme une fonction ordinaire, et non comme une méthode d'objet. this dans ce cas fait référence à l'objet global (dans le navigateur — window), qui n'a pas de name.

Comment corriger ?

Trois façons :

\n
• Fonction fléchée — elle ne crée pas son propre this, mais le prend du contexte externe.
\n
• Méthode .bind() — lie le contexte de manière permanente.
\n
• Stockage d'une référence à this (ancienne méthode, à éviter).
\n

// Correction : fonction fléchée\nconst user = {\n  name: 'Anna',\n  greet: function() {\n    console.log('Bonjour, ' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // Bonjour, Anna\n\n// Ou avec bind\nsetTimeout(user.greet.bind(user), 1000); // Bonjour, Anna

Erreur n°3 : L'asynchronisme — «