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)
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)
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);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.
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.
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.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 and loops give you a program's full logic. Until now this code ran in a void, showing nothing on screen. The next lesson finally connects it to the page: the DOM, that living representation of your HTML that JavaScript can read and change.
Lesson 5: The DOM →