Apprends à prendre des décisions dans ton code en utilisant les instructions if, else if, else, switch et l'opérateur ternaire.
Les instructions conditionnelles permettent à ton code de prendre des décisions. La plus fondamentale est l'instruction if / else :
const temperature = 30;
if (temperature > 25) {
console.log('It is hot outside!');
} else {
console.log('It is not that hot.');
}La condition entre les parenthèses est évaluée comme un booléen. Si elle est truthy, le premier bloc s'exécute. Si elle est falsy, le bloc else s'exécute (s'il est fourni).
Règles clés :
().{}.else est optionnelle.Quand tu dois vérifier plusieurs conditions, utilise else if pour les enchaîner :
const score = 85;
if (score >= 90) {
console.log('Grade: A');
} else if (score >= 80) {
console.log('Grade: B');
} else if (score >= 70) {
console.log('Grade: C');
} else {
console.log('Grade: F');
}Les conditions sont vérifiées de haut en bas. La première qui est vraie s'exécute, et les autres sont ignorées.
Pour comparer une variable à des valeurs spécifiques, une instruction switch peut être plus claire :
const day = 'Monday';
switch (day) {
case 'Monday':
case 'Tuesday':
console.log('Start of the week');
break;
case 'Friday':
console.log('Almost weekend!');
break;
default:
console.log('Just another day');
}N'oublie pas le mot-clé break — sans lui, l'exécution "tombe" sur le cas suivant. Le cas default s'exécute quand aucun autre cas ne correspond.
<p id="weather">Checking weather...</p>
<script>
const temperature = 22;
const weather = document.getElementById('weather');
if (temperature >= 35) {
weather.textContent = 'Extreme heat! Stay indoors.';
} else if (temperature >= 25) {
weather.textContent = 'It is warm and sunny.';
} else if (temperature >= 15) {
weather.textContent = 'Pleasant weather, enjoy!';
} else if (temperature >= 5) {
weather.textContent = 'It is chilly, grab a jacket.';
} else {
weather.textContent = 'Freezing! Bundle up.';
}
</script>L'opérateur ternaire est un raccourci pour les affectations if/else simples. Il utilise la syntaxe :
condition ? valueIfTrue : valueIfFalseExemples :
const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
// status is 'adult'
const score = 75;
const passed = score >= 60 ? 'Pass' : 'Fail';
// passed is 'Pass'L'opérateur ternaire est excellent pour des conditions simples et concises. Cependant, évite d'imbriquer des ternaires ou de les utiliser pour une logique complexe — une instruction if/else sera plus lisible dans ces cas.
// Évite ceci — difficile à lire
const result = a > b ? a > c ? 'a wins' : 'c wins' : b > c ? 'b wins' : 'c wins';
// Utilise plutôt if/else pour une logique complexeQue va évaluer `if (0) { 'yes' } else { 'no' }` ?