Cours JavaScript et TypeScript · Module 2: Fonctions, tableaux et objets
Les fonctions fléchées (arrow functions)
Dans cette leçon7
Bon retour à Jurassic Park ! Aujourd'hui, nous allons découvrir les fonctions fléchées (arrow functions) - une façon moderne de créer des fonctions en JavaScript, introduite avec ES6. Les fonctions fléchées sont plus concises que les expressions de fonction classiques et possèdent quelques propriétés uniques qui les rendent extrêmement utiles dans le travail de tous les jours.
La syntaxe de base des fonctions fléchées
Les fonctions fléchées ont une syntaxe plus concise que les fonctions classiques. Comparons :
Fonction classique :
1// Fonction anonyme classique
2const identifyDinosaur = function(species) {
3 return "Espèce identifiée : " + species;
4};Fonction fléchée :
1// Fonction fléchée
2const identifyDinosaur = (species) => {
3 return "Espèce identifiée : " + species;
4};On voit que la fonction fléchée :
- N'utilise pas le mot-clé
function - Utilise le signe flèche
=>entre les paramètres et le corps de la fonction
Encore plus de concision
Les fonctions fléchées offrent une syntaxe encore plus abrégée dans les cas suivants :
Un seul paramètre : on peut omettre les parenthèses
1// Avec parenthèses
2const getSpeciesInfo = (species) => {
3 return `L'espèce ${species} a été trouvée dans la base de données.`;
4};
5
6// Sans parenthèses - la même chose
7const getSpeciesInfoShort = species => {
8 return `L'espèce ${species} a été trouvée dans la base de données.`;
9};Fonction sur une seule ligne : return implicite
Si le corps de la fonction ne se compose que d'une seule expression qui renvoie une valeur, nous pouvons omettre les accolades et le mot-clé return :
1// Avec return
2const getSpeciesAge = (species) => {
3 return species === "Tyrannosaurus" ? "68 millions d'années" : "Âge inconnu";
4};
5
6// Avec un return implicite - la même chose
7const getSpeciesAgeShort = (species) => species === "Tyrannosaurus" ? "68 millions d'années" : "Âge inconnu";Renvoyer un objet
Pour renvoyer un objet, nous devons l'entourer de parenthèses, afin qu'il ne soit pas interprété comme un bloc de code :
1// Incorrect - JavaScript pensera que c'est un bloc de code
2// const getDinoData = (name, species) => { name: name, species: species };
3
4// Correct - l'objet est entouré de parenthèses
5const getDinoData = (name, species) => ({ name: name, species: species });
6
7const blue = getDinoData("Blue", "Velociraptor");
8console.log(blue); // { name: "Blue", species: "Velociraptor" }Les usages pratiques des fonctions fléchées
1. Le traitement de collections de données
Les fonctions fléchées sont particulièrement utiles avec les méthodes de tableau comme map, filter, reduce :
1// Liste des dinosaures
2const dinosaurs = [
3 { name: "Rex", species: "Tyrannosaurus", carnivore: true, weight: 7000 },
4 { name: "Spike", species: "Stegosaurus", carnivore: false, weight: 5000 },
5 { name: "Blue", species: "Velociraptor", carnivore: true, weight: 100 },
6 { name: "Trixie", species: "Triceratops", carnivore: false, weight: 8000 }
7];
8
9// Filtrage des prédateurs
10const carnivores = dinosaurs.filter(dino => dino.carnivore);
11
12// Transformation en noms d'espèces
13const speciesList = dinosaurs.map(dino => dino.species);
14
15// Calcul du poids total de tous les dinosaures
16const totalWeight = dinosaurs.reduce((sum, dino) => sum + dino.weight, 0);
17
18console.log("Prédateurs :", carnivores.length);
19console.log("Espèces :", speciesList.join(", "));
20console.log("Poids total :", totalWeight, "kg");2. Les objets avec des méthodes
Les fonctions fléchées sont pratiques à l'intérieur des méthodes d'un objet, par exemple comme fonctions de rappel dans setInterval, car elles conservent le this de la méthode (nous y reviendrons un peu plus loin) :
1const dinoMonitor = {
2 dinosaurs: ["T-Rex", "Velociraptor", "Triceratops"],
3 lastUpdated: null,
4
5 init() {
6 this.update();
7
8 // Programme une mise à jour toutes les 60 secondes
9 setInterval(() => {
10 this.update();
11 console.log("Moniteur mis à jour");
12 }, 60000);
13 },
14
15 update() {
16 this.lastUpdated = new Date().toISOString();
17 console.log(`Dinosaures surveillés : ${this.dinosaurs.join(", ")}`);
18 }
19};
20
21dinoMonitor.init();La différence clé : le comportement de this
La différence la plus importante entre les fonctions fléchées et les fonctions classiques est la façon dont elles lient le contexte this.
Les fonctions classiques : une liaison dynamique de this
Dans les fonctions classiques, this est déterminé au moment de l'appel de la fonction et peut changer :
1function DinoTracker() {
2 this.zone = "Inconnue";
3
4 this.updateZone = function(newZone) {
5 this.zone = newZone;
6 console.log(`Zone : ${this.zone}`);
7 };
8
9 // Problème : 'this' dans une fonction classique passée à setInterval ne désigne pas DinoTracker (dans le navigateur, c'est window, dans Node.js, un objet Timeout)
10 setInterval(function() {
11 console.log(`Zone actuelle : ${this.zone}`); // undefined
12 }, 1000);
13}
14
15const tracker = new DinoTracker();
16tracker.updateZone("Enclos A");Les fonctions fléchées : une liaison lexicale de this
Les fonctions fléchées n'ont pas leur propre this. À la place, elles héritent du this de la portée dans laquelle elles ont été définies (c'est ce qu'on appelle la liaison lexicale) :
1function DinoTracker() {
2 this.zone = "Inconnue";
3
4 this.updateZone = function(newZone) {
5 this.zone = newZone;
6 console.log(`Zone : ${this.zone}`);
7 };
8
9 // Solution : la fonction fléchée conserve le 'this' de la portée englobante
10 setInterval(() => {
11 console.log(`Zone actuelle : ${this.zone}`); // Ça fonctionne !
12 }, 1000);
13}
14
15const tracker = new DinoTracker();
16tracker.updateZone("Enclos A");Quand NE PAS utiliser les fonctions fléchées
Malgré leurs avantages, les fonctions fléchées ne conviennent pas à toutes les situations :
1. Les méthodes d'objet (quand il nous faut un this propre)
1// MAUVAIS - la fonction fléchée n'a pas son propre 'this'
2const dinoBad = {
3 name: "Blue",
4 introduce: () => {
5 console.log(`Salut, je suis ${this.name}`); // this ne désigne pas l'objet dino, donc tu ne verras pas le nom Blue ici
6 }
7};
8
9// BON - la fonction classique a son propre contexte 'this'
10const dinoGood = {
11 name: "Blue",
12 introduce: function() {
13 console.log(`Salut, je suis ${this.name}`); // Ça fonctionne !
14 }
15};
16
17// BON - la syntaxe raccourcie des méthodes en ES6
18const dinoShort = {
19 name: "Blue",
20 introduce() {
21 console.log(`Salut, je suis ${this.name}`); // Ça fonctionne aussi !
22 }
23};2. Les fonctions constructeurs (quand on utilise new)
1// MAUVAIS - les fonctions fléchées ne peuvent pas être des constructeurs
2const DinosaurArrow = (name, species) => {
3 this.name = name;
4 this.species = species;
5};
6
7// Provoquera une erreur :
8// const rex = new DinosaurArrow("Rex", "Tyrannosaurus");
9
10// BON - une fonction classique comme constructeur
11function Dinosaur(name, species) {
12 this.name = name;
13 this.species = species;
14}
15
16const rex = new Dinosaur("Rex", "Tyrannosaurus");
17console.log(rex); // Dinosaur { name: "Rex", species: "Tyrannosaurus" }3. Quand on a besoin de l'objet arguments
1// MAUVAIS - les fonctions fléchées n'ont pas leur propre objet 'arguments'
2const logArgsArrow = () => {
3 console.log(arguments); // ReferenceError ou les arguments de la fonction englobante
4};
5
6// BON - la fonction classique a son propre objet 'arguments'
7function logArgsRegular() {
8 console.log(arguments); // objet semblable à un tableau contenant les arguments
9}
10
11// Alternative en ES6 - utilise le paramètre rest
12const logArgsRest = (...args) => {
13 console.log(args); // tableau contenant les arguments
14};Exemple pratique : un système de surveillance du parc
Créons un exemple complet de système de surveillance de Jurassic Park, en exploitant les fonctions fléchées et leurs propriétés uniques :
1const parkMonitoringSystem = {
2 // État du système
3 status: "Offline",
4 dinosaurs: [],
5 sectors: [],
6 securityAlerts: [],
7
8 // Initialisation du système
9 initialize() {
10 this.status = "Démarrage";
11
12 // Fonction utilitaire qui conserve le contexte this
13 const loadConfigs = () => {
14 // Simulation du chargement de la configuration
15 console.log("Chargement de la configuration du système...");
16
17 // Utilisation de this depuis la portée extérieure
18 setTimeout(() => {
19 this.status = "Online";
20 this.dinosaurs = [
21 { id: "TRX-01", name: "Rex", species: "Tyrannosaurus", location: "Secteur A", status: "OK" },
22 { id: "VLR-01", name: "Blue", species: "Velociraptor", location: "Secteur B", status: "OK" },
23 { id: "TRC-01", name: "Trixie", species: "Triceratops", location: "Secteur C", status: "OK" }
24 ];
25 this.sectors = ["A", "B", "C", "D"];
26
27 console.log(`Système en ligne. Dinosaures surveillés : ${this.dinosaurs.length}`);
28 this.startMonitoring();
29 }, 2000);
30 };
31
32 loadConfigs();
33 },
34
35 // Démarrage de la surveillance
36 startMonitoring() {
37 this.checkSecurity();
38
39 // Vérification du statut toutes les 5 minutes
40 setInterval(() => this.checkStatus(), 300000);
41
42 // Collecte des données sur les dinosaures toutes les heures
43 setInterval(() => this.collectData(), 3600000);
44
45 console.log("Surveillance démarrée");
46 },
47
48 // Vérification du statut des dinosaures
49 checkStatus() {
50 const timestamp = new Date().toISOString();
51
52 // Utilisation de map avec une fonction fléchée
53 const statusReport = this.dinosaurs.map(dino => ({
54 id: dino.id,
55 name: dino.name,
56 status: dino.status,
57 location: dino.location,
58 timestamp
59 }));
60
61 console.log("Rapport de statut des dinosaures :", statusReport);
62 return statusReport;
63 },
64
65 // Vérification de la sécurité
66 checkSecurity() {
67 console.log("Vérification de l'état de sécurité du parc...");
68
69 // Utilisation de filter avec une fonction fléchée
70 const compromisedSectors = this.sectors.filter(sector =>
71 Math.random() < 0.1 // 10% de risque de problème dans chaque secteur (simulation)
72 );
73
74 if (compromisedSectors.length > 0) {
75 // Utilisation de forEach avec une fonction fléchée
76 compromisedSectors.forEach(sector => {
77 const alert = {
78 id: `ALERT-${Date.now()}`,
79 sector,
80 type: "Brèche de sécurité",
81 timestamp: new Date().toISOString()
82 };
83
84 this.securityAlerts.push(alert);
85 this.triggerAlert(alert);
86 });
87 } else {
88 console.log("Tous les secteurs sont sécurisés");
89 }
90 },
91
92 // Déclenchement de l'alerte
93 triggerAlert(alert) {
94 console.log(`ALERTE ! ${alert.type} dans le secteur ${alert.sector} !`);
95
96 // Lancement des procédures appropriées
97 this.notifySecurityTeam(alert);
98 },
99
100 // Notification de l'équipe de sécurité
101 notifySecurityTeam(alert) {
102 const securityPersonnel = ["John Hammond", "Robert Muldoon", "Ray Arnold"];
103
104 // Utilisation d'une fonction fléchée pour créer le message
105 const createMessage = person => `Notification de ${person} concernant l'alerte dans le secteur ${alert.sector}`;
106
107 // Envoi du message à chaque membre de l'équipe
108 securityPersonnel.forEach(person => {
109 console.log(createMessage(person));
110 });
111 },
112
113 // Collecte des données sur les dinosaures
114 collectData() {
115 console.log("Collecte des données sur les dinosaures...");
116
117 // Utilisation de reduce avec une fonction fléchée
118 const speciesCount = this.dinosaurs.reduce((counts, dino) => {
119 counts[dino.species] = (counts[dino.species] || 0) + 1;
120 return counts;
121 }, {});
122
123 console.log("Nombre de dinosaures par espèce :", speciesCount);
124
125 return {
126 timestamp: new Date().toISOString(),
127 totalCount: this.dinosaurs.length,
128 speciesDistribution: speciesCount
129 };
130 }
131};
132
133// Démarrage du système
134parkMonitoringSystem.initialize();Résumé
Les fonctions fléchées apportent plusieurs changements importants au langage JavaScript :
- Une syntaxe plus concise - moins de code à écrire
- La liaison lexicale de
this- elle résout de nombreux problèmes de contexte - Le return implicite - pour les fonctions sur une seule ligne
Cela les rend particulièrement utiles dans de nombreuses situations, comme :
- Les fonctions passées aux méthodes de tableau (
map,filter,reduce) - Les fonctions de rappel (callbacks) dans les timers et la gestion des événements
- Les petites fonctions utilitaires
En même temps, gardons en tête leurs limites :
- Pas de
thispropre (ce qui est un avantage ou un inconvénient, selon la situation) - Pas de
arguments(même si on peut utiliser le paramètre rest) - On ne peut pas les utiliser comme constructeurs
Dans notre Jurassic Park, les fonctions fléchées nous aident à écrire un code plus concis et plus lisible, ce qui est extrêmement important pour gérer un écosystème aussi complexe. Dans les prochains modules, nous utiliserons les fonctions fléchées dans différents contextes, ce qui nous permettra de comprendre encore mieux leur utilisation.
Code de cette leçon : index.js
1// Fonctions fléchées - Parc Jurassique
2console.log("Laboratoire des Fonctions Fléchées");
3console.log("Une approche moderne des fonctions en JavaScript\n");
4
5// ===========================================
6// 1. SYNTAXE DE BASE
7// ===========================================
8console.log("=== 1. Syntaxe des fonctions fléchées ===");
9
10// Fonction traditionnelle
11function traditionalRoar(dino) {
12 return `${dino} rugit: ROAAR!`;
13}
14
15// Fonction fléchée - syntaxe complète
16const arrowRoar = (dino) => {
17 return `${dino} rugit: ROAAR!`;
18};
19
20// Fonction fléchée - syntaxe abrégée (retour implicite)
21const shortRoar = dino => `${dino} rugit: ROAAR!`;
22
23console.log(traditionalRoar("T-Rex"));
24console.log(arrowRoar("Velociraptor"));
25console.log(shortRoar("Triceratops"));
26
27// ===========================================
28// 2. DIFFÉRENTES VARIANTES DE SYNTAXE
29// ===========================================
30console.log("\n=== 2. Variantes de syntaxe ===");
31
32// Sans paramètres
33const getDinosaurs = () => ["T-Rex", "Velociraptor", "Triceratops"];
34console.log("Liste des dinosaures:", getDinosaurs());
35
36// Un seul paramètre (parenthèses optionnelles)
37const double = x => x * 2;
38console.log("Doublement de 5:", double(5));
39
40// Plusieurs paramètres (parenthèses obligatoires)
41const calculateWeight = (length, species) => length * (species === "T-Rex" ? 1000 : 500);
42console.log("Poids du T-Rex (12m):", calculateWeight(12, "T-Rex"), "kg");
43
44// Retourner un objet (nécessite des parenthèses)
45const createDino = (name, species) => ({
46 name: name,
47 species: species,
48 createdAt: new Date().toISOString()
49});
50
51console.log("\nNouveau dinosaure:", createDino("Blue", "Velociraptor"));
52
53// ===========================================
54// 3. COMPARAISON AVEC LES FONCTIONS TRADITIONNELLES
55// ===========================================
56console.log("\n=== 3. Fonction traditionnelle vs fonction fléchée ===");
57
58// Traditionnelle
59function feedTraditional(dino) {
60 console.log(`Nourrissage de ${dino} (fonction traditionnelle)`);
61}
62
63// Fléchée
64const feedArrow = dino => {
65 console.log(`Nourrissage de ${dino} (fonction fléchée)`);
66};
67
68feedTraditional("T-Rex");
69feedArrow("Velociraptor");
70
71// ===========================================
72// 4. FONCTIONS FLÉCHÉES AVEC LES MÉTHODES DE TABLEAU
73// ===========================================
74console.log("\n=== 4. Fonctions fléchées avec les méthodes de tableau ===");
75
76const dinosaurs = [
77 { name: "Rex", species: "T-Rex", weight: 8000, carnivore: true },
78 { name: "Blue", species: "Velociraptor", weight: 80, carnivore: true },
79 { name: "Trike", species: "Triceratops", weight: 9000, carnivore: false },
80 { name: "Brachio", species: "Brachiosaurus", weight: 50000, carnivore: false }
81];
82
83// map
84const names = dinosaurs.map(dino => dino.name);
85console.log("Noms:", names);
86
87// filter
88const carnivores = dinosaurs.filter(dino => dino.carnivore);
89console.log("\nCarnivores:", carnivores.map(d => d.name));
90
91// reduce
92const totalWeight = dinosaurs.reduce((sum, dino) => sum + dino.weight, 0);
93console.log("\nPoids total:", totalWeight, "kg");
94
95// forEach
96console.log("\nListe de tous les dinosaures:");
97dinosaurs.forEach((dino, index) => {
98 console.log(` ${index + 1}. ${dino.name} - ${dino.species} (${dino.weight}kg)`);
99});
100
101// find
102const heaviest = dinosaurs.find(dino => dino.weight > 10000);
103console.log("\nLe plus lourd (>10000kg):", heaviest ? heaviest.name : "Aucun");
104
105// some & every
106const hasHerbivores = dinosaurs.some(dino => !dino.carnivore);
107const allCarnivores = dinosaurs.every(dino => dino.carnivore);
108console.log("\nY a-t-il des herbivores ?", hasHerbivores);
109console.log("Sont-ils tous carnivores ?", allCarnivores);
110
111// ===========================================
112// 5. CHAÎNAGE DE MÉTHODES (CHAINING)
113// ===========================================
114console.log("\n=== 5. Chaînage de méthodes ===");
115
116const dangerousHeavyDinos = dinosaurs
117 .filter(dino => dino.carnivore)
118 .filter(dino => dino.weight > 100)
119 .map(dino => `${dino.name} (${dino.weight}kg)`)
120 .sort();
121
122console.log("Dinosaures dangereux et lourds:", dangerousHeavyDinos);
123
124// ===========================================
125// 6. FONCTIONS CALLBACK
126// ===========================================
127console.log("\n=== 6. Fonctions fléchées comme callbacks ===");
128
129function processDinosaurs(dinos, processor) {
130 return dinos.map(processor);
131}
132
133const dinoSummaries = processDinosaurs(dinosaurs, dino =>
134 `${dino.name}: ${dino.carnivore ? 'carnivore' : 'herbivore'} ${dino.weight}kg`
135);
136
137console.log("Résumés:");
138dinoSummaries.forEach(summary => console.log(` ${summary}`));
139
140// ===========================================
141// 7. FONCTIONS FLÉCHÉES DANS setTimeout/setInterval
142// ===========================================
143console.log("\n=== 7. Fonctions fléchées avec les fonctions de temporisation ===");
144
145// setTimeout avec une fonction fléchée
146setTimeout(() => {
147 console.log("⏰ Heure du repas ! (après 100ms)");
148}, 100);
149
150// Simulation d'un compte à rebours
151let countdown = 3;
152const countInterval = setInterval(() => {
153 if (countdown > 0) {
154 console.log(`⏳ Compte à rebours: ${countdown}...`);
155 countdown--;
156 } else {
157 console.log("Départ !");
158 clearInterval(countInterval);
159 }
160}, 50);
161
162// ===========================================
163// 8. DIFFÉRENCE DE COMPORTEMENT DE 'this'
164// ===========================================
165console.log("\n=== 8. Différence de contexte 'this' ===");
166
167const park = {
168 name: "Jurassic Park",
169 dinosaurs: ["T-Rex", "Velociraptor", "Triceratops"],
170
171 // Méthode avec une fonction traditionnelle
172 displayTraditional: function() {
173 console.log(`\n${this.name} - Fonction traditionnelle:`);
174 // this.dinosaurs.forEach(function(dino) {
175 // // ici, this ne pointe PAS vers park !
176 // console.log(` - ${dino}`);
177 // });
178
179 // Solution: fonction fléchée dans forEach
180 this.dinosaurs.forEach(dino => {
181 console.log(` - ${dino} de ${this.name}`);
182 });
183 },
184
185 // Méthode avec une fonction fléchée
186 displayArrow: function() {
187 console.log(`\n${this.name} - Fonction fléchée:`);
188 this.dinosaurs.forEach(dino => {
189 console.log(` - ${dino} de ${this.name}`);
190 });
191 }
192};
193
194park.displayTraditional();
195park.displayArrow();
196
197// ===========================================
198// 9. QUAND NE PAS UTILISER LES FONCTIONS FLÉCHÉES
199// ===========================================
200console.log("\n=== 9. Quand NE PAS utiliser les fonctions fléchées ===");
201
202// NE PAS utiliser comme méthodes d'objet (quand tu as besoin de 'this')
203const dinoObject = {
204 name: "Rex",
205
206 // MAUVAIS - fonction fléchée comme méthode
207 roarBad: () => {
208 // this ne pointe pas vers dinoObject !
209 console.log("this.name:", typeof this.name); // undefined
210 },
211
212 // BON - fonction traditionnelle en tant que méthode
213 roarGood: function() {
214 console.log(`${this.name} rugit: ROAAR!`);
215 }
216};
217
218dinoObject.roarBad();
219dinoObject.roarGood();
220
221// ===========================================
222// 10. EXEMPLE COMPLET
223// ===========================================
224console.log("\n=== 10. Système de surveillance du parc - exemple complet ===");
225
226const parkSystem = {
227 name: "Isla Nublar",
228 dinosaurs: [
229 { id: 1, name: "Rexy", species: "T-Rex", sector: "A", health: 95, fed: true },
230 { id: 2, name: "Blue", species: "Velociraptor", sector: "B", health: 100, fed: false },
231 { id: 3, name: "Charlie", species: "Velociraptor", sector: "B", health: 88, fed: false },
232 { id: 4, name: "Trike", species: "Triceratops", sector: "C", health: 92, fed: true }
233 ],
234
235 getHealthReport: function() {
236 console.log(`\nRAPPORT DE SANTÉ - ${this.name}`);
237 console.log("=".repeat(50));
238
239 const avgHealth = this.dinosaurs
240 .map(d => d.health)
241 .reduce((sum, h) => sum + h, 0) / this.dinosaurs.length;
242
243 console.log(`Santé moyenne: ${avgHealth.toFixed(1)}%`);
244
245 const needsAttention = this.dinosaurs.filter(d => d.health < 90);
246
247 if (needsAttention.length > 0) {
248 console.log(`\nNécessitent de l'attention (${needsAttention.length}):`);
249 needsAttention.forEach(d => {
250 console.log(` - ${d.name}: ${d.health}% de santé`);
251 });
252 }
253
254 return { avgHealth, needsAttention: needsAttention.length };
255 },
256
257 getFeedingStatus: function() {
258 console.log(`\nSTATUT D'ALIMENTATION - ${this.name}`);
259 console.log("=".repeat(50));
260
261 const hungryDinos = this.dinosaurs
262 .filter(d => !d.fed)
263 .map(d => ({ name: d.name, sector: d.sector }))
264 .sort((a, b) => a.sector.localeCompare(b.sector));
265
266 if (hungryDinos.length > 0) {
267 console.log(`Dinosaures affamés (${hungryDinos.length}):`);
268 hungryDinos.forEach(d => {
269 console.log(` Secteur ${d.sector}: ${d.name}`);
270 });
271 } else {
272 console.log("Tous les dinosaures sont nourris !");
273 }
274
275 return hungryDinos;
276 },
277
278 getSectorReport: function() {
279 console.log(`\nRAPPORT DES SECTEURS - ${this.name}`);
280 console.log("=".repeat(50));
281
282 const sectors = this.dinosaurs.reduce((acc, dino) => {
283 if (!acc[dino.sector]) {
284 acc[dino.sector] = [];
285 }
286 acc[dino.sector].push(dino.name);
287 return acc;
288 }, {});
289
290 Object.entries(sectors)
291 .sort(([a], [b]) => a.localeCompare(b))
292 .forEach(([sector, dinos]) => {
293 console.log(` Secteur ${sector}: ${dinos.join(", ")}`);
294 });
295
296 return sectors;
297 }
298};
299
300// Exécuter tous les rapports
301parkSystem.getHealthReport();
302parkSystem.getFeedingStatus();
303parkSystem.getSectorReport();
304
305console.log("\nFélicitations ! Tu maîtrises maintenant les fonctions fléchées !");Tu as repéré une erreur dans cette leçon ?
Tâches pratiques dans le jeu
- Éditeur de code
Tu as les données : const ageYears = 25, const weightKg = 8000 et const heightM = 5.6. Calcule ageDays, l'âge en jours (une année compte 365 jours), et bmi, le poids divisé par le carré de la taille. Affiche dans la console ageDays et bmi arrondi à deux décimales (toFixed(2)).
- Tri horizontal
Range les éléments d'une déclaration de variable let correcte avec assignation de valeur :
- Éditeur de code
Tu as les données : const fenceVoltage = 10000, const requiredVoltage = 8000, const visitorsInPark = 250 et const maxVisitors = 500. Crée des variables booléennes : isFenceSecure (la tension est égale ou supérieure à la tension requise), isParkFull (le nombre de visiteurs a atteint la limite) et canAcceptVisitors (la clôture est sûre et en même temps le parc n'est pas plein). Affiche les trois dans la console.