Chaque développeur JavaScript a déjà eu ce moment : un résultat qui n'a aucun sens, un bug qui disparaît quand on ajoute un console.log, une comparaison qui renvoie false alors qu'elle devrait être vraie. JavaScript n'est pas cassé pour autant. Il suit des règles précises, simplement pas toujours celles qu'on imagine.
Voici dix petits programmes que je pose en quiz dans mes vidéos. Essaie de deviner la sortie avant de lire la réponse. Toutes les sorties ont été obtenues en exécutant réellement le code.
1. map avec parseInt
const t = ["10", "10", "10"];const n = t.map(parseInt);console.log(n);
Résultat : [ 10, NaN, 2 ]. map transmet à sa fonction trois arguments : la valeur, l'index et le tableau. parseInt prend le deuxième comme base de numération. Le deuxième élément est donc lu en base 1 (impossible, donc NaN), le troisième en base 2. La parade : t.map(Number) ou t.map((x) => parseInt(x, 10)).
2. Le fameux 0.1 + 0.2
const s = 0.1 + 0.2;console.log(s === 0.3);console.log(s);
Résultat : false puis 0.30000000000000004. Les nombres décimaux sont stockés en binaire, et 0,1 ou 0,2 n'ont pas de représentation exacte. Ce n'est pas propre à JavaScript, mais on le remarque vite. Pour de l'argent, on travaille en centimes, ou on compare avec une petite marge d'erreur.
3. sort() sans argument
const n = [1, 10, 2, 21];console.log(n.sort());
Résultat : [ 1, 10, 2, 21 ]. Le tableau n'est pas trié comme on l'attend, parce que sort() compare par défaut des chaînes de caractères : "10" passe avant "2". Pour des nombres, il faut donner la fonction de comparaison : n.sort((a, b) => a - b).
4. typeof NaN
console.log(typeof NaN);console.log(NaN === NaN);
Résultat : number puis false. NaN signifie « Not a Number » mais reste techniquement un nombre, et il n'est égal à rien, pas même à lui-même. Pour le détecter, utilise Number.isNaN(x).
5. Math.max sur un tableau vide
const prix = [];console.log(Math.max(...prix));
Résultat : -Infinity. Sans argument, Math.max renvoie la valeur neutre du maximum, c'est-à-dire l'infini négatif. Si ton tableau peut être vide, prévois un cas à part, sinon ton prix maximum affiché sera étrange.
6. Plus et moins avec une chaîne
console.log("5" - 3);console.log("5" + 3);
Résultat : 2 puis 53. Le moins n'existe que pour les nombres, donc "5" est converti. Le plus sert aussi à concaténer : dès qu'une chaîne est présente, tout devient texte.
7. Deux variables, un seul tableau
const a = [1, 2];const b = a;b.push(3);console.log(a.length);
Résultat : 3. b = a ne copie pas le tableau, il copie la référence. Les deux variables pointent vers le même objet. Pour dupliquer : [...a] ou structuredClone(a) si l'objet est imbriqué.
8. setTimeout à zéro
const log = console.log;log("1");setTimeout(() => log("2"), 0);log("3");
Résultat : 1, 3, 2. Même avec un délai de zéro, la fonction est placée en file d'attente et n'est exécutée qu'une fois le code en cours terminé. C'est la porte d'entrée pour comprendre la boucle d'événements.
9. || contre ??
const remise = 0;console.log(remise || "aucune");console.log(remise ?? "aucune");
Résultat : aucune puis 0. L'opérateur || remplace toute valeur « fausse », y compris 0 et la chaîne vide. ?? ne remplace que null et undefined. Sur une remise, un stock ou un compteur, la différence est celle d'un vrai bug.
10. Additionner des tableaux
const r = [1, 2, 3] + [4];console.log(r);console.log(typeof r);
Résultat : 1,2,34 puis string. Le plus convertit les deux tableaux en texte avant de les coller. Pour fusionner, on écrit [...a, ...b] ou a.concat(b).
Pourquoi ces quiz sont utiles
Aucun de ces comportements n'est un accident : ils viennent de règles de conversion et de comparaison que le langage applique toujours de la même façon. Une fois qu'on les a vus, on les repère dans son propre code et dans celui des autres. C'est aussi le meilleur moyen de préparer un entretien technique sans apprendre par cœur.
Je poste un quiz de ce type régulièrement en vidéo courte. Si tu as bien deviné plus de sept réponses sur dix, tu peux passer directement aux réflexes de code plus propre en JavaScript.