Cours JavaScript et TypeScript · Module 2: Fonctions, tableaux et objets
Paramètres et arguments des fonctions en JavaScript
Dans cette leçon7
Bon retour à Jurassic Park ! Dans le module 1, nous avons découvert les bases des fonctions en JavaScript. Maintenant, nous allons approfondir la façon dont les fonctions peuvent recevoir des données et travailler avec elles - ce qui est essentiel pour créer des systèmes de gestion du parc flexibles et efficaces.
La différence entre paramètres et arguments
Même si les termes "paramètres" et "arguments" sont souvent employés de manière interchangeable, il existe entre eux une différence subtile :
- Les paramètres sont les variables définies dans la déclaration de la fonction
- Les arguments sont les valeurs réelles passées à la fonction lors de son appel
1// name et species sont les paramètres
2function addDinosaur(name, species) {
3 console.log(`Ajout d'un nouveau dinosaure : ${name} (${species})`);
4 // Code qui ajoute le dinosaure au système
5}
6
7// "Blue" et "Velociraptor" sont les arguments
8addDinosaur("Blue", "Velociraptor");Les paramètres de base
JavaScript propose plusieurs façons de travailler avec les paramètres d'une fonction :
1. Paramètres obligatoires et optionnels
En JavaScript, tous les paramètres sont techniquement optionnels, mais nous pouvons concevoir des fonctions qui traitent certains paramètres comme obligatoires :
1function feedDinosaur(dinoName, foodType) {
2 // Vérification que les paramètres ont bien été fournis
3 if (dinoName === undefined) {
4 throw new Error("Tu dois indiquer le nom du dinosaure !");
5 }
6
7 // foodType est optionnel, on utilise une valeur par défaut s'il n'a pas été fourni
8 const food = foodType || "viande";
9
10 console.log(`Nourrissage de ${dinoName}, nourriture : ${food}`);
11 return `${dinoName} a été nourri`;
12}
13
14// Appels
15feedDinosaur("Rex", "bétail vivant"); // "Nourrissage de Rex, nourriture : bétail vivant"
16feedDinosaur("Blue"); // "Nourrissage de Blue, nourriture : viande"
17// feedDinosaur(); // Error: Tu dois indiquer le nom du dinosaure !2. Paramètres par défaut (ES6+)
Depuis ES6 (ES2015), JavaScript prend en charge les paramètres par défaut, qui simplifient la définition des valeurs par défaut :
1function scheduleFeeding(dinoName, foodType = "viande", time = "12:00") {
2 console.log(`Nourrissage de ${dinoName} planifié, nourriture : ${foodType}, heure : ${time}`);
3 return {
4 dino: dinoName,
5 food: foodType,
6 scheduledTime: time
7 };
8}
9
10// Appels
11scheduleFeeding("Triceratops", "plantes", "10:30");
12// "Nourrissage de Triceratops planifié, nourriture : plantes, heure : 10:30"
13
14scheduleFeeding("Raptor");
15// "Nourrissage de Raptor planifié, nourriture : viande, heure : 12:00"
16
17scheduleFeeding("Rex", undefined, "15:45");
18// "Nourrissage de Rex planifié, nourriture : viande, heure : 15:45"Les paramètres par défaut sont évalués au moment de l'appel de la fonction, ce qui signifie que tu peux utiliser des expressions, et même d'autres paramètres :
1function prepareEnclosure(dinoType, securityLevel = calculateSecurityLevel(dinoType), capacity = securityLevel * 2) {
2 console.log(`Préparation de l'enclos pour ${dinoType}...`);
3 console.log(`Niveau de sécurité : ${securityLevel}`);
4 console.log(`Capacité : ${capacity} individus`);
5}
6
7function calculateSecurityLevel(dinoType) {
8 const dangerousSpecies = ["Tyrannosaurus", "Velociraptor", "Spinosaurus"];
9 return dangerousSpecies.includes(dinoType) ? 5 : 3;
10}
11
12// Préparation de l'enclos du T-Rex (niveau de sécurité élevé)
13prepareEnclosure("Tyrannosaurus");
14// Niveau de sécurité : 5, Capacité : 10 individus
15
16// Préparation de l'enclos du Triceratops (niveau de sécurité standard)
17prepareEnclosure("Triceratops");
18// Niveau de sécurité : 3, Capacité : 6 individus
19
20// Préparation d'un enclos sur mesure
21prepareEnclosure("Velociraptor", 6, 4);
22// Niveau de sécurité : 6, Capacité : 4 individusGérer un nombre variable d'arguments
Dans des systèmes aussi complexes que Jurassic Park, nous avons parfois besoin de fonctions capables d'accepter un nombre variable d'arguments.
1. L'objet arguments
Chaque fonction classique (déclarée avec le mot-clé function) a accès à un objet spécial, arguments, qui contient tous les arguments qui lui ont été passés. Les fonctions fléchées n'ont pas leur propre arguments :
1function alertSecurityTeam() {
2 console.log(`Envoi d'une alerte à ${arguments.length} membres de l'équipe de sécurité.`);
3
4 for (let i = 0; i < arguments.length; i++) {
5 console.log(`Notification : ${arguments[i]}`);
6 }
7}
8
9// On peut appeler la fonction avec n'importe quel nombre d'arguments
10alertSecurityTeam("John Hammond", "Robert Muldoon", "Ellie Sattler");
11// Envoi d'une alerte à 3 membres de l'équipe de sécurité.
12// Notification : John Hammond
13// Notification : Robert Muldoon
14// Notification : Ellie SattlerL'objet arguments n'est pas un vrai tableau, mais un objet semblable à un tableau (array-like object). On peut le convertir en tableau :
1function logVisitors() {
2 // Conversion de arguments en tableau
3 const visitorsArray = Array.from(arguments);
4 // ou : const visitorsArray = [...arguments]; // (ES6+)
5
6 console.log(`${visitorsArray.length} visiteurs enregistrés.`);
7
8 // Maintenant, on peut utiliser les méthodes de tableau
9 visitorsArray.forEach((visitor, index) => {
10 console.log(`Visiteur n°${index + 1} : ${visitor}`);
11 });
12}
13
14logVisitors("Ian Malcolm", "Alan Grant", "Dennis Nedry");
15// 3 visiteurs enregistrés.
16// Visiteur n°1 : Ian Malcolm
17// Visiteur n°2 : Alan Grant
18// Visiteur n°3 : Dennis Nedry2. Le paramètre rest (ES6+)
Une façon plus récente et plus élégante de gérer un nombre variable d'arguments est le paramètre rest, introduit dans ES6 :
1function trackDinosaurs(...dinosaurs) {
2 console.log(`Suivi de ${dinosaurs.length} dinosaures :`);
3
4 dinosaurs.forEach((dino, index) => {
5 console.log(`${index + 1}. Localisation : ${dino}`);
6 });
7}
8
9trackDinosaurs("T-Rex", "Velociraptor", "Triceratops", "Brachiosaurus");
10// Suivi de 4 dinosaures :
11// 1. Localisation : T-Rex
12// 2. Localisation : Velociraptor
13// 3. Localisation : Triceratops
14// 4. Localisation : BrachiosaurusLe paramètre rest rassemble tous les arguments restants dans un tableau. Il doit être le dernier paramètre de la fonction, mais il peut être précédé de paramètres classiques :
1function assignTasks(teamLead, date, ...teamMembers) {
2 console.log(`Tâches du ${date} pour l'équipe dirigée par ${teamLead} :`);
3
4 teamMembers.forEach(member => {
5 console.log(`- ${member} : ${generateRandomTask()}`);
6 });
7}
8
9function generateRandomTask() {
10 const tasks = [
11 "Vérification des clôtures",
12 "Nourrissage des dinosaures",
13 "Collecte d'échantillons d'ADN",
14 "Surveillance de la santé des animaux",
15 "Maintenance des systèmes de sécurité"
16 ];
17 return tasks[Math.floor(Math.random() * tasks.length)];
18}
19
20assignTasks("Dr. Henry Wu", "2023-06-15", "John", "Sarah", "Michael");
21// Tâches du 2023-06-15 pour l'équipe dirigée par Dr. Henry Wu :
22// - John : Vérification des clôtures
23// - Sarah : Nourrissage des dinosaures
24// - Michael : Surveillance de la santé des animauxL'opérateur de décomposition (spread)
L'opérateur spread (...) est l'inverse du paramètre rest. Au lieu de rassembler les arguments dans un tableau, il décompose un tableau (ou un autre objet itérable) en arguments individuels :
1function monitorVitalSigns(dinoName, temperature, heartRate, respirationRate) {
2 console.log(`Surveillance des signes vitaux de : ${dinoName}`);
3 console.log(`- Température : ${temperature}°C`);
4 console.log(`- Pouls : ${heartRate} battements/min`);
5 console.log(`- Fréquence respiratoire : ${respirationRate} respirations/min`);
6
7 // Analyse des signes vitaux et génération du rapport
8 if (temperature > 39 || heartRate > 140 || respirationRate > 30) {
9 return "ALERTE : Signes vitaux hors norme !";
10 }
11 return "Signes vitaux dans la norme.";
12}
13
14// Tableau contenant les données des signes vitaux
15const rexVitals = ["T-Rex", 38.2, 115, 22];
16
17// Sans l'opérateur spread
18monitorVitalSigns(rexVitals[0], rexVitals[1], rexVitals[2], rexVitals[3]);
19
20// Avec l'opérateur spread - il décompose le tableau en arguments séparés
21monitorVitalSigns(...rexVitals);L'opérateur spread est aussi utile pour fusionner des tableaux ou des objets :
1// Fusion des données sur les dinosaures issues de différents systèmes
2const basicDinoData = {
3 id: "VLR-01",
4 name: "Blue",
5 species: "Velociraptor"
6};
7
8const healthData = {
9 weight: 100,
10 health: "Bonne",
11 lastCheckup: "2023-05-10"
12};
13
14const behavioralData = {
15 temperament: "Agressif",
16 packStatus: "Beta",
17 trainingLevel: "Avancé"
18};
19
20// Création d'un objet complet de données sur le dinosaure
21const completeProfile = {
22 ...basicDinoData,
23 ...healthData,
24 ...behavioralData,
25 updatedAt: new Date().toISOString()
26};
27
28console.log(completeProfile);
29// {
30// id: "VLR-01",
31// name: "Blue",
32// species: "Velociraptor",
33// weight: 100,
34// health: "Bonne",
35// lastCheckup: "2023-05-10",
36// temperament: "Agressif",
37// packStatus: "Beta",
38// trainingLevel: "Avancé",
39// updatedAt: "2023-06-15T10:30:00.000Z"
40// }La déstructuration des paramètres objets
Quand une fonction accepte de nombreux paramètres, il est souvent plus simple de les passer sous forme d'objet. La déstructuration (ES6+) permet d'extraire ces valeurs de façon élégante :
1// Fonction qui accepte un objet d'options
2function createDinosaurEnclosure({ species, capacity, securityLevel, location, features = [] }) {
3 console.log(`Création d'un enclos pour l'espèce : ${species}`);
4 console.log(`Capacité : ${capacity} individus`);
5 console.log(`Niveau de sécurité : ${securityLevel}/5`);
6 console.log(`Emplacement : ${location}`);
7
8 if (features.length > 0) {
9 console.log("Équipements supplémentaires de l'enclos :");
10 features.forEach(feature => console.log(`- ${feature}`));
11 }
12
13 return `L'enclos pour ${species} a été créé à l'emplacement ${location}`;
14}
15
16// Appel avec un objet d'options
17const enclosureResult = createDinosaurEnclosure({
18 species: "Triceratops",
19 capacity: 6,
20 securityLevel: 3,
21 location: "Secteur B",
22 features: ["Point d'eau", "Végétation du Crétacé", "Plateforme d'observation"]
23});
24
25console.log(enclosureResult);
26// "L'enclos pour Triceratops a été créé à l'emplacement Secteur B"Nous pouvons aussi définir des valeurs par défaut pour l'objet entier :
1function scheduleLabTest({
2 specimenId,
3 testType = "ADN",
4 priority = "Normale",
5 assignedTo = "Dr. Wu"
6} = {}) { // L'objet vide par défaut évite les erreurs quand on ne passe pas d'argument
7
8 console.log(`Test ${testType} planifié pour l'échantillon #${specimenId}`);
9 console.log(`Priorité : ${priority}`);
10 console.log(`Assigné à : ${assignedTo}`);
11
12 return `Test planifié. ID du test : TEST-${specimenId}-${Date.now()}`;
13}
14
15// Appel avec toutes les options
16scheduleLabTest({
17 specimenId: "VLR-42",
18 testType: "Séquençage du génome",
19 priority: "Élevée",
20 assignedTo: "Dr. Sattler"
21});
22
23// Appel avec uniquement le paramètre obligatoire
24scheduleLabTest({ specimenId: "TRX-05" });
25
26// Appel sans arguments (fonctionne grâce à l'objet vide par défaut)
27// scheduleLabTest(); // Sans l'objet vide par défaut, cela provoquerait une erreurExemple pratique : un système de gestion des incidents
Combinons les notions découvertes en créant un système complet de gestion des incidents pour Jurassic Park :
1// Système de gestion des incidents
2const incidentManager = (function() {
3 // Tableau privé des incidents
4 const incidents = [];
5
6 // Fonctions utilitaires privées
7 function generateIncidentId() {
8 return `INC-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
9 }
10
11 function notifyTeam(incidentType, location, ...personnel) {
12 console.log(`ALERTE : Incident de type "${incidentType}" à l'emplacement "${location}"`);
13
14 if (personnel.length > 0) {
15 console.log(`Notification du personnel : ${personnel.join(', ')}`);
16 } else {
17 console.log("Notification de tout le personnel de sécurité");
18 }
19 }
20
21 // API publique
22 return {
23 // Méthode pour signaler un nouvel incident
24 reportIncident: function({
25 type,
26 location,
27 description,
28 severity = "Moyenne",
29 reportedBy,
30 affectedAssets = [],
31 notifyPersonnel = []
32 }) {
33 const incidentId = generateIncidentId();
34
35 const incident = {
36 id: incidentId,
37 type,
38 location,
39 description,
40 severity,
41 reportedBy,
42 affectedAssets,
43 status: "Nouveau",
44 reportedAt: new Date().toISOString(),
45 resolvedAt: null
46 };
47
48 incidents.push(incident);
49
50 // Notification du personnel
51 notifyTeam(type, location, ...notifyPersonnel);
52
53 return {
54 incidentId,
55 message: `L'incident #${incidentId} a été enregistré`
56 };
57 },
58
59 // Méthode pour mettre à jour le statut d'un incident
60 updateIncidentStatus: function(incidentId, newStatus, resolvedBy = null) {
61 const incident = incidents.find(inc => inc.id === incidentId);
62
63 if (!incident) {
64 return { success: false, message: "Incident introuvable" };
65 }
66
67 incident.status = newStatus;
68
69 if (newStatus === "Résolu") {
70 incident.resolvedAt = new Date().toISOString();
71 incident.resolvedBy = resolvedBy;
72 }
73
74 return {
75 success: true,
76 message: `Statut de l'incident #${incidentId} passé à "${newStatus}"`
77 };
78 },
79
80 // Méthode pour récupérer les informations sur un incident
81 getIncidentInfo: function(incidentId) {
82 const incident = incidents.find(inc => inc.id === incidentId);
83
84 if (!incident) {
85 return null;
86 }
87
88 return { ...incident }; // On renvoie une copie pour éviter de modifier l'original
89 },
90
91 // Méthode pour récupérer la liste des incidents selon des critères
92 getIncidents: function({ status, type, severity, limit = 10 } = {}) {
93 let result = [...incidents]; // Copie du tableau
94
95 // Filtrage selon les critères
96 if (status) {
97 result = result.filter(inc => inc.status === status);
98 }
99
100 if (type) {
101 result = result.filter(inc => inc.type === type);
102 }
103
104 if (severity) {
105 result = result.filter(inc => inc.severity === severity);
106 }
107
108 // Tri du plus récent au plus ancien
109 result.sort((a, b) => new Date(b.reportedAt) - new Date(a.reportedAt));
110
111 // Limitation du nombre de résultats
112 return result.slice(0, limit);
113 }
114 };
115})();
116
117// Exemple d'utilisation du système
118const breakoutIncident = incidentManager.reportIncident({
119 type: "Évasion de dinosaure",
120 location: "Enclos des vélociraptors - Secteur C",
121 description: "Trois vélociraptors se sont échappés de l'enclos. Personnel du parc évacué.",
122 severity: "Critique",
123 reportedBy: "Robert Muldoon",
124 affectedAssets: ["VLR-02", "VLR-03", "VLR-04"],
125 notifyPersonnel: ["Dr. Grant", "John Hammond", "Ellie Sattler", "Ian Malcolm"]
126});
127
128console.log(breakoutIncident.message);
129// "L'incident #INC-1623844529123-456 a été enregistré"
130
131// Mise à jour du statut de l'incident
132const updateResult = incidentManager.updateIncidentStatus(
133 breakoutIncident.incidentId,
134 "En cours",
135 "Équipe SWAT"
136);
137console.log(updateResult.message);
138// "Statut de l'incident #INC-1623844529123-456 passé à "En cours""
139
140// Récupération des informations sur l'incident
141const incidentDetails = incidentManager.getIncidentInfo(breakoutIncident.incidentId);
142console.log(incidentDetails);
143
144// Recherche d'incidents selon des critères
145const criticalIncidents = incidentManager.getIncidents({
146 severity: "Critique",
147 limit: 5
148});
149console.log(`${criticalIncidents.length} incidents critiques trouvés`);Cet exemple montre :
- L'utilisation de la déstructuration d'objets pour recevoir les paramètres d'une fonction
- L'emploi des paramètres par défaut
- L'utilisation du paramètre rest pour gérer un nombre variable d'arguments
- L'utilisation de l'opérateur spread pour passer des arguments
- Le traitement et le filtrage avancés des données en fonction des paramètres
Résumé
Les fonctions en JavaScript offrent de nombreux mécanismes puissants pour travailler avec les paramètres et les arguments, qui permettent de créer des API flexibles, lisibles et faciles à utiliser :
- Les paramètres par défaut simplifient la gestion des arguments optionnels
- Le paramètre rest permet aux fonctions d'accepter un nombre variable d'arguments
- L'opérateur spread permet de passer les éléments d'un tableau comme des arguments séparés
- La déstructuration d'objets facilite le travail avec de nombreux paramètres en les organisant dans des objets
Grâce à ces mécanismes, nous pouvons créer des fonctions à la fois flexibles et simples à utiliser - ce qui est essentiel pour gérer des systèmes compliqués comme notre Jurassic Park virtuel.
Les fonctions fléchées, qui apportent une syntaxe plus concise et un comportement particulier vis-à-vis du contexte this, font l'objet d'une leçon à part dans ce module.
Code de cette leçon : index.js
1// Paramètres et arguments de fonction - Parc Jurassique
2console.log("Laboratoire des Fonctions du Parc Jurassique");
3console.log("Gestion des dinosaures via des fonctions avec paramètres\n");
4
5// ===========================================
6// 1. FONCTIONS DE BASE AVEC PARAMÈTRES
7// ===========================================
8console.log("=== 1. Fonctions avec paramètres ===");
9
10// Fonction avec un seul paramètre
11function feedDinosaur(dinoName) {
12 console.log(`Nourrissage du dinosaure: ${dinoName}`);
13}
14
15feedDinosaur("T-Rex");
16feedDinosaur("Velociraptor");
17
18// Fonction avec plusieurs paramètres
19function addDinosaur(name, species, age, weight) {
20 console.log(`\nAjout d'un nouveau dinosaure au système:`);
21 console.log(` Nom: ${name}`);
22 console.log(` Espèce: ${species}`);
23 console.log(` Âge: ${age} ans`);
24 console.log(` Poids: ${weight} kg`);
25}
26
27addDinosaur("Blue", "Velociraptor", 5, 80);
28addDinosaur("Rexy", "Tyrannosaurus Rex", 8, 8000);
29
30// ===========================================
31// 2. PARAMÈTRES PAR DÉFAUT (ES6)
32// ===========================================
33console.log("\n=== 2. Paramètres par défaut ===");
34
35function scheduleFeeding(dinoName, foodType = "viande", time = "12:00") {
36 console.log(`Nourrissage planifié pour ${dinoName}`);
37 console.log(` Nourriture: ${foodType}, Heure: ${time}`);
38}
39
40scheduleFeeding("Triceratops", "plantes", "10:30");
41scheduleFeeding("Raptor"); // Utilisera les valeurs par défaut
42scheduleFeeding("Rex", undefined, "15:45"); // Ignorer le paramètre du milieu
43
44// Expressions comme valeurs par défaut
45function createPaddock(paddockNumber, capacity = paddockNumber * 2) {
46 console.log(`Création de l'enclos #${paddockNumber} d'une capacité de ${capacity}`);
47}
48
49createPaddock(5);
50createPaddock(3, 10);
51
52// ===========================================
53// 3. PARAMÈTRES REST (...args)
54// ===========================================
55console.log("\n=== 3. Paramètres rest (...) ===");
56
57function feedMultipleDinosaurs(...dinoNames) {
58 console.log(`Nourrissage de ${dinoNames.length} dinosaures:`);
59 dinoNames.forEach((name, index) => {
60 console.log(` ${index + 1}. ${name}`);
61 });
62}
63
64feedMultipleDinosaurs("Rex", "Blue", "Charlie", "Delta");
65feedMultipleDinosaurs("Triceratops", "Stegosaurus");
66
67// Paramètre rest avec d'autres paramètres
68function assignToTeam(teamLeader, ...teamMembers) {
69 console.log(`\nÉquipe dirigée par: ${teamLeader}`);
70 console.log(` Membres de l'équipe: ${teamMembers.join(", ")}`);
71}
72
73assignToTeam("Dr. Grant", "Ellie", "Ian", "Lex", "Tim");
74
75// ===========================================
76// 4. DÉSTRUCTURATION DES PARAMÈTRES
77// ===========================================
78console.log("\n=== 4. Déstructuration dans les paramètres ===");
79
80// Déstructuration d'objets
81function displayDinosaurInfo({ name, species, age, weight, carnivore }) {
82 console.log(`\nInformations sur le dinosaure:`);
83 console.log(` Nom: ${name}`);
84 console.log(` Espèce: ${species}`);
85 console.log(` Âge: ${age} ans`);
86 console.log(` Poids: ${weight} kg`);
87 console.log(` Type: ${carnivore ? "Carnivore" : "Herbivore"}`);
88}
89
90const dino = {
91 name: "Blue",
92 species: "Velociraptor",
93 age: 5,
94 weight: 80,
95 carnivore: true
96};
97
98displayDinosaurInfo(dino);
99
100// Déstructuration avec valeurs par défaut
101function createEnclosure({ size = 100, type = "standard", security = "moyenne" } = {}) {
102 console.log(`\nCréation de l'enclos:`);
103 console.log(` Taille: ${size} m²`);
104 console.log(` Type: ${type}`);
105 console.log(` Sécurité: ${security}`);
106}
107
108createEnclosure({ size: 200, type: "haute sécurité", security: "maximale" });
109createEnclosure({ size: 150 });
110createEnclosure(); // Toutes les valeurs par défaut
111
112// Déstructuration de tableaux
113function assignPaddocks([first, second, third]) {
114 console.log(`\nAttribution des enclos:`);
115 console.log(` Enclos A: ${first}`);
116 console.log(` Enclos B: ${second}`);
117 console.log(` Enclos C: ${third}`);
118}
119
120assignPaddocks(["T-Rex", "Triceratops", "Stegosaurus"]);
121
122// ===========================================
123// 5. VALEURS DE RETOUR
124// ===========================================
125console.log("\n=== 5. Retourner des valeurs ===");
126
127function calculateDangerLevel(species, age, aggression) {
128 let dangerScore = 0;
129
130 if (species === "Tyrannosaurus") dangerScore += 50;
131 else if (species === "Velociraptor") dangerScore += 40;
132 else if (species === "Triceratops") dangerScore += 20;
133 else dangerScore += 10;
134
135 dangerScore += age * 2;
136 dangerScore += aggression * 10;
137
138 let level = "Faible";
139 if (dangerScore > 80) level = "Extrême";
140 else if (dangerScore > 60) level = "Élevé";
141 else if (dangerScore > 40) level = "Moyen";
142
143 return {
144 score: dangerScore,
145 level: level,
146 recommendation: dangerScore > 70 ? "Double sécurité" : "Sécurité standard"
147 };
148}
149
150const trexDanger = calculateDangerLevel("Tyrannosaurus", 8, 9);
151console.log("Niveau de danger du T-Rex:", trexDanger);
152
153const triDanger = calculateDangerLevel("Triceratops", 5, 3);
154console.log("Niveau de danger du Triceratops:", triDanger);
155
156// ===========================================
157// 6. FONCTIONS QUI RETOURNENT DES FONCTIONS
158// ===========================================
159console.log("\n=== 6. Fonctions d'ordre supérieur ===");
160
161function createFeeder(foodType) {
162 return function(dinoName) {
163 console.log(`Nourrissage de ${dinoName} avec: ${foodType}`);
164 };
165}
166
167const meatFeeder = createFeeder("viande fraîche");
168const plantFeeder = createFeeder("plantes");
169
170meatFeeder("T-Rex");
171meatFeeder("Velociraptor");
172plantFeeder("Triceratops");
173plantFeeder("Brachiosaurus");
174
175// ===========================================
176// 7. FONCTIONS CALLBACK
177// ===========================================
178console.log("\n=== 7. Fonctions callback ===");
179
180function processDinosaurs(dinosaurs, callback) {
181 console.log("\nTraitement de la liste des dinosaures:");
182 dinosaurs.forEach((dino, index) => {
183 callback(dino, index);
184 });
185}
186
187const dinoList = ["T-Rex", "Velociraptor", "Triceratops", "Stegosaurus"];
188
189processDinosaurs(dinoList, (dino, index) => {
190 console.log(` ${index + 1}. ${dino} - Bilan de santé:`);
191});
192
193// ===========================================
194// 8. OBJET ARGUMENTS (ancienne méthode)
195// ===========================================
196console.log("\n=== 8. Objet arguments (ancienne méthode) ===");
197
198function feedAll() {
199 console.log(`Nourrissage de ${arguments.length} dinosaures:`);
200 for (let i = 0; i < arguments.length; i++) {
201 console.log(` ${i + 1}. ${arguments[i]}`);
202 }
203}
204
205feedAll("Rex", "Blue", "Charlie", "Delta", "Echo");
206
207// ===========================================
208// 9. EXEMPLE COMPLET
209// ===========================================
210console.log("\n=== 9. Système de gestion du parc - exemple complet ===");
211
212function managePark({
213 dinosaurs = [],
214 visitors = 0,
215 weather = "ensoleillé",
216 securityLevel = "moyen"
217} = {}) {
218 console.log("\nRAPPORT DU PARC JURASSIQUE");
219 console.log("================================");
220 console.log(`Dinosaures dans le parc: ${dinosaurs.length}`);
221 console.log(`Nombre de visiteurs: ${visitors}`);
222 console.log(`Météo: ${weather}`);
223 console.log(`Niveau de sécurité: ${securityLevel}`);
224
225 if (dinosaurs.length > 0) {
226 console.log("\nListe des dinosaures:");
227 dinosaurs.forEach((dino, idx) => {
228 console.log(` ${idx + 1}. ${dino.name} (${dino.species})`);
229 });
230 }
231
232 const isOpen = weather === "ensoleillé" && securityLevel !== "faible";
233 console.log(`\nStatut du parc: ${isOpen ? "OUVERT" : "FERMÉ"}`);
234
235 return {
236 isOperational: isOpen,
237 totalDinosaurs: dinosaurs.length,
238 capacity: visitors,
239 status: isOpen ? "Opérationnel" : "Fermé"
240 };
241}
242
243const parkStatus = managePark({
244 dinosaurs: [
245 { name: "Rexy", species: "T-Rex" },
246 { name: "Blue", species: "Velociraptor" },
247 { name: "Trike", species: "Triceratops" }
248 ],
249 visitors: 1500,
250 weather: "ensoleillé",
251 securityLevel: "élevé"
252});
253
254console.log("\nRésumé:", parkStatus);
255
256console.log("\nFélicitations ! Tu maîtrises maintenant les paramètres et les arguments des fonctions !");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. Quelle utilisation d'un littéral de template est correcte ?
2. Que va retourner typeof null en JavaScript ?
3. Comment créer correctement un BigInt représentant le nombre d'années depuis l'extinction des dinosaures ?
4. Quelle est la principale caractéristique du type Symbol en JavaScript ?
5. Quels mots-clés créent des variables à portée de bloc ?
Tâches pratiques dans le jeu
- Clique dans l'ordre
Trie les mots-clés de déclaration de variable du moins restrictif au plus restrictif :
- Tri horizontal
Range les éléments de l'appel de la méthode toUpperCase sur une chaîne :
- Clique dans l'ordre
Range les étapes du cycle de vie d'une variable en JavaScript :