if / else if / else
Les conditions permettent à votre code de prendre des décisions. C'est le cerveau de votre programme :
const age = 18;
if (age >= 18) {
console.log("Majeur");
} else if (age >= 16) {
console.log("Presque majeur");
} else {
console.log("Mineur");
}Le code entre { } ne s'exécute que si la condition est vraie.
Comparaisons et logique
Opérateurs de comparaison :
===: égal (type et valeur). Toujours utiliser celui-ci!==: différent<,>,<=,>=: inférieur, supérieur
Opérateurs logiques :
&&: ET (les deux doivent être vrais)||: OU (au moins un doit être vrai)!: NON (inverse le résultat)
Que renvoient 0 == "" puis 0 === "" ? Et 0 == "0" ? Avant de dérouler : pourquoi == et === ne donnent-ils pas le même résultat ?
Voir la réponse
0 == "" renvoie true, et 0 == "0" renvoie aussi true : l'opérateur == (égalité lâche) convertit les opérandes vers un type commun avant de comparer (ici "" et "0" sont convertis en nombre 0). 0 === "" renvoie false : === (égalité stricte) ne convertit rien, et un nombre n'est jamais strictement égal à une chaîne. Ces conversions implicites de == produisent des résultats contre-intuitifs ("" == "0" vaut d'ailleurs false). Règle d'or : utiliser toujours === (et !==), pour comparer sans surprise.
L'opérateur ternaire est un raccourci pour if/else :
const statut = age >= 18 ? "Majeur" : "Mineur";Les boucles
Les boucles répètent un bloc de code plusieurs fois :
// Boucle for classique
for (let i = 0; i < 5; i++) {
console.log("Tour " + i);
}
// Boucle while
let compteur = 0;
while (compteur < 3) {
console.log(compteur);
compteur++;
}Méthodes de tableau : forEach, map, filter, find
En pratique, on utilise rarement for directement. Les méthodes de tableau sont plus élégantes :
const notes = [12, 18, 7, 15, 9, 20];
// forEach : exécuter du code pour chaque élément
notes.forEach((note) => console.log(note));
// map : transformer chaque élément
const doublees = notes.map((n) => n * 2);
// filter : garder ceux qui passent le test
const bonnes = notes.filter((n) => n >= 10);
// find : trouver le premier qui passe le test
const premiere = notes.find((n) => n >= 15);if / else if / else
Conditions let your code make decisions. It's the brain of your program:
const age = 18;
if (age >= 18) {
console.log("Adult");
} else if (age >= 16) {
console.log("Almost adult");
} else {
console.log("Minor");
}The code between { } only runs if the condition is true.
Comparisons and logic
Comparison operators:
===— equal (type and value). Always use this one!==— not equal<,>,<=,>=— less than, greater than
Logical operators:
&&— AND (both must be true)||— OR (at least one must be true)!— NOT (inverts the result)
What do 0 == "" and 0 === "" return? What about 0 == "0"? Before unfolding: why do == and === not give the same result?
See the answer
0 == "" returns true, and 0 == "0" also returns true: the == operator (loose equality) converts both operands to a common type before comparing (here "" and "0" are both converted to the number 0). 0 === "" returns false: === (strict equality) converts nothing, and a number is never strictly equal to a string. These implicit conversions from == produce counter-intuitive results ("" == "0" is actually false). Golden rule: always use === (and !==) to compare without surprises.
The ternary operator is a shortcut for if/else:
const status = age >= 18 ? "Adult" : "Minor";Loops
Loops repeat a block of code multiple times:
// Classic for loop
for (let i = 0; i < 5; i++) {
console.log("Round " + i);
}
// While loop
let counter = 0;
while (counter < 3) {
console.log(counter);
counter++;
}Array methods: forEach, map, filter, find
In practice, you rarely use for directly. Array methods are more elegant:
const grades = [12, 18, 7, 15, 9, 20];
// forEach — run code for each element
grades.forEach((grade) => console.log(grade));
// map — transform each element
const doubled = grades.map((n) => n * 2);
// filter — keep those that pass the test
const passing = grades.filter((n) => n >= 10);
// find — find the first one that passes
const first = grades.find((n) => n >= 15);🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
Copiez ce prompt dans Claude ou ChatGPT :
Explique-moi la différence entre == et === en JavaScript avec 3 exemples piégeux où == donne un résultat surprenant.
💬 Ré-explique sans regarder
Sans relire la réponse de l'IA : avec tes mots, pourquoi "5" == 5 vaut true alors que "5" === 5 vaut false ?
== est l'égalité permissive, elle convertit d'abord les types (coercition) avant de comparer, donc la chaîne "5" devient le nombre 5 et les deux deviennent égaux. === est l'égalité stricte : pas de conversion, elle compare type ET valeur, et string n'est pas number, d'où false. Réflexe pro : toujours === pour éviter ces conversions invisibles.L'IA a utilisé == au lieu de ===. Remplacez == par === pour une comparaison stricte.
⚖️ Juge le code de l'IA
Tu demandes à l'IA « double chaque note ». Voici son code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
const notes = [12, 18, 7];
const doublees = [];
for (let i = 0; i <= notes.length; i++) {
doublees.push(notes[i] * 2);
}
console.log(doublees);i <= notes.length fait un tour de trop : à i = 3, notes[3] vaut undefined, et undefined * 2 donne NaN. Le résultat est [24, 36, 14, NaN]. Il faut i < notes.length (strictement inférieur). Et même corrigé, un dev senior préfèrera notes.map((n) => n * 2) : plus court, sans index à gérer, sans risque d'off-by-one.🧠 Rappel libre
Sans remonter dans la leçon : à quoi servent respectivement map, filter et find, et que renvoie chacun (un tableau ? un seul élément ?) ?
map transforme chaque élément et renvoie un nouveau tableau de même taille. filter sélectionne les éléments qui passent un test et renvoie un nouveau tableau (souvent plus petit). find cherche le premier élément qui passe le test et renvoie cet élément seul (pas un tableau), ou undefined si aucun ne correspond.=== plutôt que == ?[1,2,3].filter(n => n > 1) ?&& (ET logique) ?Conditions et boucles vous donnent toute la logique d'un programme. Jusqu'ici ce code tournait dans le vide, sans rien afficher à l'écran. La prochaine leçon le relie enfin à la page : le DOM, cette représentation vivante du HTML que JavaScript peut lire et modifier.
Leçon 5 : Le DOM →