Apprendre les fondamentaux avec un copilote IA
Deuxieme article de la serie "Apprendre JavaScript avec l'IA". On attaque les bases du langage : variables, types, fonctions, boucles. Mais l'angle est différent d'un cours classique. Pour chaque concept, je te montre un bon prompt et un mauvais prompt a donner a un LLM, et je te signale les endroits ou l'IA se plante régulièrement.
Variables : let, const et le piège de var
En JavaScript, trois mots-clés pour déclarer des variables. Deux sont utiles, un est dangereux.
Mauvais prompt :
"C'est quoi une variable en JavaScript ?"
Trop vague. L'IA va te sortir une définition de manuel que tu oublieras dans 10 minutes.
Bon prompt :
"Montre-moi la différence entre let, const et var en JavaScript avec un exemple ou var cause un bug. Dis-moi lequel utiliser par défaut en 2026."
javascript// const : valeur qui ne change pas. Utilise-le par defaut.
const API_URL = "https://api.exemple.com";
// let : quand tu as besoin de reassigner
let compteur = 0;
compteur = compteur + 1; // OK
// var : l'ancienne syntaxe. Ne l'utilise jamais.
var piege = "je cause des bugs";
Pourquoi var est dangereux ? Regarde ce classique :
javascript// Avec var : le bug que tout debutant rencontre
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Affiche : 3, 3, 3 -- pas 0, 1, 2 !
// Avec let : le comportement attendu
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100);
}
// Affiche : 0, 1, 2
var a une portee de fonction, pas de bloc. Résultat : la variable i est partagee entre toutes les itérations. let créé une copie par itération. Si l'IA te généré du code avec var, c'est un signal qu'elle produit du JavaScript d'avant 2015.
Types : là où l'IA se trompe le plus souvent
JavaScript a 7 types primitifs : string, number, boolean, null, undefined, symbol, bigint. Le problème, c'est la coercion de types -- JavaScript convertit les types silencieusement, et ca produit des résultats absurdes.
Bon prompt :
"Montre-moi 5 résultats de coercion de types en JavaScript qui surprennent les débutants. Pour chacun, explique pourquoi ca donne ce résultat."
javascript// Le type de null est "object" (bug historique de 1995, jamais corrige)
typeof null; // "object"
// Comparaisons laches : JavaScript convertit avant de comparer
0 == ""; // true -- "" converti en 0
0 == false; // true -- false converti en 0
"" == false; // true -- les deux convertis en 0
// La solution : toujours utiliser === (comparaison stricte)
0 === ""; // false
0 === false; // false
// Les flottants ne sont pas exacts (c'est pareil dans tous les langages)
0.1 + 0.2; // 0.30000000000000004
0.1 + 0.2 === 0.3; // false !
Mauvais prompt :
"Quels sont les types en JavaScript ?"
L'IA va te lister les types sans te montrer les pièges. Tu auras l'impression d'avoir compris, mais tu te feras avoir au premier == dans ton code.
J'ai remarque que ChatGPT oublie souvent de mentionner bigint et symbol quand on lui demande les types primitifs. Claude est plus complet la-dessus. Teste avec ton LLM préféré et vérifié sur MDN.
Fonctions : trois syntaxes, un piège avec this
Bon prompt :
"Montre-moi function déclaration, function expression et arrow function en JavaScript. Dans quel cas une arrow function se comporte differemment ? Donne un exemple avec this."
javascript// Declaration de fonction (hoistee : utilisable avant sa definition)
function saluer(nom) {
return `Bonjour ${nom}`;
}
// Expression de fonction (pas hoistee)
const saluer2 = function(nom) {
return `Bonjour ${nom}`;
};
// Arrow function (syntaxe courte, pas de this propre)
const saluer3 = (nom) => `Bonjour ${nom}`;
Le piège que l'IA oublie souvent de mentionner :
javascriptconst objet = {
nom: "JavaScript",
methodeClassique: function() {
console.log(this.nom); // "JavaScript" -- this = objet
},
methodeArrow: () => {
console.log(this.nom); // undefined ! -- this = contexte parent
}
};
objet.methodeClassique(); // "JavaScript"
objet.methodeArrow(); // undefined
Les arrow functions n'ont pas leur propre this. Dans une méthode d'objet, ca casse tout. J'ai vu ChatGPT générer des méthodes d'objet avec des arrow functions au moins une dizaine de fois. C'est un bug qu'il faut connaître.
Ma regle : arrow functions pour les callbacks et les fonctions courtes. function classique pour les méthodes d'objet. Point.
Boucles : for, for...of et les méthodes de tableau
Mauvais prompt :
"Comment faire une boucle en JavaScript ?"
Bon prompt :
"Montre-moi 4 facons de parcourir un tableau en JavaScript : for classique, for...of, forEach et map. Quand utiliser chacune ?"
javascriptconst fruits = ["pomme", "banane", "cerise"];
// for classique : quand tu as besoin de l'index
for (let i = 0; i < fruits.length; i++) {
console.log(`${i}: ${fruits[i]}`);
}
// for...of : le plus lisible pour iterer
for (const fruit of fruits) {
console.log(fruit);
}
// forEach : pour les effets de bord (log, envoi, etc.)
fruits.forEach((fruit) => console.log(fruit));
// map : transforme et retourne un NOUVEAU tableau
const majuscules = fruits.map((fruit) => fruit.toUpperCase());
// ["POMME", "BANANE", "CERISE"]
L'erreur que l'IA ne corrige pas toujours : utiliser map comme un forEach.
javascript// Anti-pattern : map sans utiliser le retour
fruits.map((fruit) => {
console.log(fruit); // ca marche, mais c'est faux conceptuellement
});
// Correct : forEach pour les effets de bord
fruits.forEach((fruit) => {
console.log(fruit);
});
map alloue un nouveau tableau en mémoire. Si tu n'utilises pas ce tableau, c'est du gaspillage. ESLint a une regle pour ca (no-unused-expressions), mais l'IA ne la mentionne quasiment jamais.
Technique : vérifier les réponses de l'IA
Trois reflexes a prendre :
Teste dans la console. Ouvre les DevTools (F12), colle le code, regarde le résultat. Si ca plante, l'IA s'est trompee. C'est la méthode la plus rapide.
Demande les sources. Quand l'IA te parle d'une syntaxe ou d'une API :
"Cette syntaxe est standard ECMAScript ou spécifique a un framework ? Depuis quelle version de JS ?"
Demande un contre-exemple. Si l'IA te dit "utilise toujours X", demande-lui un cas ou X est une mauvaise idee. Si elle ne trouve pas, c'est probablement une simplification excessive.
Exercice
Avant de passer a la manipulation du DOM, essaie ca tout seul :
javascript// Cree une fonction qui prend un tableau de nombres
// et retourne { somme, moyenne, min, max }
// Utilise const/let, arrow functions, et les methodes de tableau
function analyserTableau(nombres) {
// A toi de jouer
}
// Resultat attendu :
// analyserTableau([10, 20, 30, 40, 50])
// => { somme: 150, moyenne: 30, min: 10, max: 50 }
Une fois ton code écrit, colle-le dans Claude ou ChatGPT avec ce prompt :
"Voici ma solution. Dis-moi si elle est correcte, si j'ai rate des cas limites (tableau vide ?), et si le style est moderne."
C'est cette boucle (essayer, vérifier, ameliorer) qui fait de l'IA un vrai outil d'apprentissage, pas une bequille. Et c'est exactement le type de demarche qu'on applique au quotidien chez paltemps.fr pour automatiser avec l'IA sur des cas concrets.
Sources
- MDN - let -- référencé officielle sur let/const/var
- MDN - Types de donnees JavaScript -- les 7 types primitifs
- MDN - Array.prototype.map() -- différence map/forEach
- JavaScript: The Good Parts par Douglas Crockford -- le classique sur les pièges du langage