Cours JavaScript et TypeScript · Module 1: Bases de JavaScript
Opérateurs arithmétiques et d'affectation
Dans cette leçon9
Le briefing matinal au centre de contrôle de Jurassic Park commence par des chiffres. Combien de viande donner aux raptors ? Combien d'œufs ne tiendront pas dans les incubateurs ? Combien de visiteurs ont franchi le portail ? Le Dr Rex confie ces calculs aux systèmes du parc, et JavaScript leur fournit deux familles d'outils : les opérateurs arithmétiques, qui calculent, et les opérateurs d'affectation, qui enregistrent le résultat dans une variable.
Les quatre opérations de base
L'addition, la soustraction, la multiplication et la division s'écrivent avec les signes +, -, * et /, et JavaScript calcule comme la calculatrice du laboratoire :
1// Addition (+)
2let raptorCount = 5;
3let newHatchlings = 3;
4let totalRaptors = raptorCount + newHatchlings; // 8
5
6// Soustraction (-)
7let totalDinosaurs = 57;
8let transferredDinosaurs = 12;
9let remainingDinosaurs = totalDinosaurs - transferredDinosaurs; // 45
10
11// Multiplication (*)
12let dailyFoodRequirement = 20; // kg par dinosaure
13let troodontCount = 7;
14let totalRequirement = dailyFoodRequirement * troodontCount; // 140 kg
15
16// Division (/)
17let meatSupply = 1500; // kg
18let dailyConsumption = 300; // kg
19let daysOfSupply = meatSupply / dailyConsumption; // 5 joursRemarque ce que ces opérations ne font pas : raptorCount et totalDinosaurs gardent leurs valeurs, et le résultat va dans une nouvelle variable. La division ne tronque pas non plus les décimales : 7 / 2 donne 3.5, car en JavaScript les nombres entiers et décimaux forment un seul type, number.
Le reste de la division et la puissance
L'opérateur % renvoie le reste de la division : 17 œufs à raison de 4 par incubateur, cela fait quatre incubateurs pleins et un œuf en attente. L'opérateur ** élève un nombre à une puissance :
1// Reste (modulo) (%)
2let eggCount = 17;
3let incubatorCapacity = 4;
4let eggsRemainingAfterFillingIncubators = eggCount % incubatorCapacity; // 1
5
6// Exponentiation (**)
7let initialPopulation = 2;
8let breedingYears = 3;
9let estimatedPopulation = initialPopulation ** breedingYears; // 2^3 = 8Malgré le signe %, cet opérateur n'a rien à voir avec les pourcentages : 10 % 3 vaut 1, car 10 = 3 · 3 + 1. De son côté, 2 ** 3 signifie 2 · 2 · 2, donc 8, et non 6 ou 9.
Incrémentation et décrémentation
Les compteurs changent souvent d'une unité : un visiteur entre, l'alerte baisse d'un niveau. Pour ces occasions, JavaScript propose les raccourcis ++ et -- :
1// Incrémentation (++) - augmenter de 1
2let parkVisitors = 120;
3parkVisitors++; // maintenant parkVisitors = 121
4
5// Décrémentation (--) - diminuer de 1
6let threatLevel = 5;
7threatLevel--; // maintenant threatLevel = 4Contrairement à + et -, ces opérateurs modifient la variable elle-même, donc sur une constante const ils se terminent par une erreur TypeError. Ils ont aussi deux formes, qui diffèrent par la valeur renvoyée au moment de l'utilisation :
1let a = 5;
2console.log(++a); // 6 - incrémente d'abord, puis renvoie
3let b = 5;
4console.log(b++); // 5 - renvoie d'abord l'ancienne valeur, puis incrémente
5console.log(b); // 6Les deux variables finissent à 6, seule change la valeur envoyée à console.log sur la même ligne. Mon conseil : écris ++ sur une ligne à part, et pas au milieu d'une expression plus grande.
L'ordre des opérations
Le Dr Rex calcule les besoins quotidiens des carnivores : cinq petits prédateurs mangent 50 kg chacun, trois grands 300 kg chacun. Voici la tentative d'un stagiaire, puis la correction :
1let smallCarnivores = 5;
2let largeCarnivores = 3;
3let dailyConsumptionSmall = 50; // kg
4let dailyConsumptionLarge = 300; // kg
5
6// Calcul incorrect - un terme oublié
7let incorrectConsumption = smallCarnivores + largeCarnivores * dailyConsumptionLarge;
8console.log(incorrectConsumption); // 905 (résultat incorrect !)
9
10// Calcul correct (avec parenthèses)
11let correctConsumption = (smallCarnivores * dailyConsumptionSmall) + (largeCarnivores * dailyConsumptionLarge);
12console.log(correctConsumption); // 1150 kg (résultat correct)
13
14// Ici, les parenthèses changent vraiment le résultat
15console.log((smallCarnivores + largeCarnivores) * dailyConsumptionLarge); // 2400D'où vient 905 ? La multiplication est prioritaire, donc JavaScript calcule 3 * 300 puis ajoute 5, c'est-à-dire le simple nombre d'animaux. L'erreur se trouve dans la formule, pas dans l'ordre. Dans la version correcte, les parenthèses servent la lisibilité, car sans elles le résultat serait aussi de 1150. Elles ne changent le résultat qu'à la dernière ligne, où elles imposent d'additionner d'abord les individus.
Ordre standard des opérations (PEMDAS) :
- Parenthèses -
( ) - Puissances -
** - Multiplication et division -
*/ - Addition et soustraction -
+-
L'acronyme vient des noms anglais des niveaux : Parentheses, Exponents, Multiplication/Division, Addition/Subtraction. L'opérateur % se trouve au niveau de * et /, et les opérations d'un même niveau s'exécutent de gauche à droite. L'exception est la puissance, calculée de droite à gauche : 2 ** 3 ** 2 vaut 512. Tu verras le tableau complet dans la leçon sur la priorité des opérateurs.
Les opérateurs d'affectation
En général, on ne remet pas un compteur à zéro, on le met à jour. Au lieu d'écrire visitors = visitors + 50, tu peux combiner l'opération et l'affectation en un seul opérateur :
1// Affectation simple (=)
2let tRexCount = 2;
3
4// Affectation avec addition (+=)
5let visitors = 100;
6visitors += 50; // équivaut à visitors = visitors + 50; (maintenant 150)
7
8// Affectation avec soustraction (-=)
9let fuelReserves = 1000;
10fuelReserves -= 250; // équivaut à fuelReserves = fuelReserves - 250; (maintenant 750)L'écriture count += 5 signifie exactement la même chose que count = count + 5 : lis la valeur, ajoute 5 et enregistre le résultat dans la même variable. Les autres opérateurs fonctionnent de la même manière :
1// Affectation avec multiplication (*=)
2let dilophosaurPopulation = 4;
3dilophosaurPopulation *= 2; // équivaut à dilophosaurPopulation = dilophosaurPopulation * 2; (maintenant 8)
4
5// Affectation avec division (/=)
6let foodRation = 1200;
7foodRation /= 4; // équivaut à foodRation = foodRation / 4; (maintenant 300)
8
9// Affectation avec reste (%=)
10let jeepSeats = 20;
11jeepSeats %= 6; // équivaut à jeepSeats = jeepSeats % 6; (maintenant 2)
12
13// Affectation avec puissance (**=)
14let populationGrowth = 2;
15populationGrowth **= 3; // équivaut à populationGrowth = populationGrowth ** 3; (maintenant 8)Un opérateur composé écrase la variable, donc, tout comme ++, il ne fonctionne pas sur une constante const. Je te le recommande à la place de l'écriture complète : le nom de la variable n'apparaît qu'une fois, tu ne risques donc pas de faire une faute de frappe en le recopiant.
Combiner les opérateurs en pratique
Les vraies tâches combinent plusieurs opérateurs. Après l'éclosion de cinq petits, il faut mettre à jour les enclos de l'écloserie, calculer le taux d'occupation et vérifier qu'il y a assez de soigneurs (un pour trois dinosaures) :
1// Scénario : mise à jour des ressources du parc après l'éclosion de nouveaux dinosaures
2
3let availableRooms = 50;
4let occupiedRooms = 30;
5let newDinosaurs = 5;
6let careStaff = 15;
7
8// Mise à jour des enclos : les nouveaux dinosaures occupent les places libres
9availableRooms -= newDinosaurs; // 45
10occupiedRooms += newDinosaurs; // 35
11
12// Calcul du nouveau taux d'occupation (en pourcentage)
13let occupancyLevel = occupiedRooms / (occupiedRooms + availableRooms) * 100;
14console.log(`Taux d'occupation du parc : ${occupancyLevel}%`); // 43.75%
15
16// Calcul du personnel nécessaire (1 soigneur pour 3 dinosaures)
17let requiredStaff = Math.ceil(occupiedRooms / 3); // 12
18let additionalStaff = requiredStaff - careStaff;
19
20if (additionalStaff > 0) {
21 console.log(`Nous devons embaucher ${additionalStaff} soigneurs supplémentaires.`);
22} else {
23 console.log("Nous avons suffisamment de personnel.");
24}On met à jour les deux variables, car les petits occupent des enclos libres, tandis que leur total reste inchangé : 80. Math.ceil arrondit vers le haut, car on ne peut pas embaucher deux tiers de soigneur : 35 / 3 donne 12 personnes. Nous en avons 15, donc le programme affichera le second message. Le texte entre accents graves avec ${...} est un template literal, et if choisit l'un des deux chemins. Nous verrons ces deux outils dans les prochaines leçons.
Attention au texte
L'opérateur + a une double nature : dès qu'un des deux côtés est du texte, il colle les chaînes au lieu d'additionner. C'est la concaténation vue dans la leçon sur la conversion de types :
1// Attention aux opérations sur les chaînes !
2let report = "Rapport #";
3let reportNumber = 42;
4let fullReport = report + reportNumber; // "Rapport #42" (concaténation de chaînes)
5
6// Différence entre opérations numériques et concaténation de chaînes
7let result1 = 5 + 10; // 15 (nombre)
8let result2 = "5" + "10"; // "510" (chaîne)
9let result3 = "5" + 10; // "510" (chaîne, 10 a été converti en chaîne)
10let result4 = 5 + "10"; // "510" (chaîne, 5 a été converti en chaîne)Les autres opérateurs arithmétiques convertissent le texte en nombre, donc "5" - 2 donne 3. C'est pourquoi il faut convertir les données d'un formulaire avec Number() avant de les ajouter à un compteur.
Résumé
Les opérateurs arithmétiques et d'affectation sont le fondement d'opérations plus complexes. Ils permettent :
- d'effectuer des opérations mathématiques (
+,-,*,/,%,**), - d'incrémenter et de décrémenter des valeurs (
++,--), - de mettre à jour des variables de façon concise (
+=,-=,*=,/=,%=,**=).
Surveille l'ordre des opérations et les types de données : une erreur de calcul peut être dangereuse dans un parc rempli de prédateurs. Dans la prochaine leçon, tu découvriras les opérateurs de comparaison et logiques, grâce auxquels les systèmes du parc prennent des décisions.
Pratique
Dans le bac à sable t'attend la console du centre de contrôle : totaux de population, 10 % 3, 2 ** 10, comparaison de ++a et b++ et mises à jour des stocks. Change les nombres et prédis chaque résultat avant qu'il n'apparaisse dans la console. À la fin, deux exercices t'attendent, à résoudre seul.
Code de cette leçon : index.js
1// Opérateurs arithmétiques et d'affectation
2// Calculs dans le système de gestion de Jurassic Park
3
4// === Opérateurs arithmétiques ===
5console.log("=== Opérateurs arithmétiques ===");
6
7let raptors = 8;
8let triceratops = 12;
9
10// Addition, soustraction, multiplication, division
11console.log("Somme:", raptors + triceratops); // 20
12console.log("Différence:", triceratops - raptors); // 4
13console.log("Produit:", raptors * 3); // 24
14console.log("Quotient:", triceratops / 4); // 3
15
16// Reste (modulo)
17console.log("Reste 10 % 3:", 10 % 3); // 1
18
19// Exponentiation
20console.log("2 ** 10:", 2 ** 10); // 1024
21
22// === Incrémentation et décrémentation ===
23console.log("\n=== Incrémentation / Décrémentation ===");
24
25let population = 50;
26population++; // 51
27console.log("Après ++:", population);
28population--; // 50
29console.log("Après --:", population);
30
31// Différence pré vs post
32let a = 5;
33console.log("++a:", ++a); // 6 (incrémente d'abord, puis renvoie)
34let b = 5;
35console.log("b++:", b++); // 5 (renvoie d'abord, puis incrémente)
36console.log("b après b++:", b); // 6
37
38// === Opérateurs d'affectation ===
39console.log("\n=== Opérateurs d'affectation ===");
40
41let supplies = 1000;
42supplies += 200; // supplies = supplies + 200
43console.log("Après += 200:", supplies);
44
45supplies -= 150; // supplies = supplies - 150
46console.log("Après -= 150:", supplies);
47
48supplies *= 2; // supplies = supplies * 2
49console.log("Après *= 2:", supplies);
50
51supplies /= 4; // supplies = supplies / 4
52console.log("Après /= 4:", supplies);
53
54// Ta mission :
55// 1. Calcule le besoin total en nourriture (dinosaures * kg/jour)
56// 2. Utilise les opérateurs d'affectation pour mettre à jour l'état des ressources
57Retiens bien : un opérateur arithmétique se contente de calculer, et un opérateur d'affectation enregistre le résultat, comme un laborantin qui pèse d'abord la ration, puis l'inscrit dans le journal d'alimentation.
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quel est le résultat de l'expression 10 % 3 en JavaScript ?
2. Que renvoie l'expression 2 ** 3 en JavaScript ?
3. À quoi équivaut la notation : count += 5 ?
Tâches pratiques dans le jeu
- Tri vertical
Classe les opérateurs arithmétiques de la priorité la plus élevée à la plus faible :