Cours JavaScript et TypeScript · Module 2: Fonctions, tableaux et objets

Les fonctions fléchées (arrow functions)

10 min de lecture
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 :

  1. N'utilise pas le mot-clé function
  2. 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 :

  1. Une syntaxe plus concise - moins de code à écrire
  2. La liaison lexicale de this - elle résout de nombreux problèmes de contexte
  3. 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 this propre (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.

Articles utiles