4.1 Paramètres des fonctions
Les paramètres des fonctions en JavaScript permettent de passer des valeurs aux fonctions pour qu'elles les traitent. Cela rend les fonctions plus flexibles et adaptatives. Dans ce cadre, on va voir les aspects principaux du travail avec les paramètres de fonctions en JavaScript, sans inclure les paramètres par défaut et les paramètres rest.
Les paramètres sont indiqués entre parenthèses après le nom de la fonction. Lors de l'appel de la fonction, les valeurs de ces paramètres sont passées aux variables correspondantes à l'intérieur de la fonction.
Exemple :
Dans la fonction greet()
, deux paramètres sont définis : name
et age
. Lors de l'appel de la fonction, les valeurs Alice
et 30
sont transmises à ces paramètres.
function greet(name, age) {
return `Hello, ${name}! You are ${age} years old.`;
}
console.log(greet('Alice', 30)); // "Hello, Alice! You are 30 years old."
Gestion des paramètres indéfinis
Si un paramètre n'est pas transmis lors de l'appel de la fonction, sa valeur sera undefined
. Cela peut conduire à des erreurs si des opérations sont effectuées avec ce paramètre et ne prennent pas en charge undefined
.
Exemple :
Dans la fonction greet()
, il est vérifié si le paramètre name
est passé. Sinon, la chaîne Guest
est utilisée.
function greet(name) {
if (name === undefined) {
return 'Hello, Guest!';
}
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet('Bob')); // "Hello, Bob!"
4.2 Paramètres par défaut
Les paramètres par défaut permettent de définir des valeurs qui seront utilisées si un argument n'est pas transmis lors de l'appel de la fonction ou est transmis comme undefined
. C'est particulièrement utile pour créer des fonctions avec des paramètres optionnels.
Syntaxe :
function name (arg1 = value1, arg2 = value2) {
// corps de la fonction
}
Exemple 1 : Fonction simple avec paramètres par défaut
Dans cet exemple, la fonction greet()
a un paramètre name avec une valeur par défaut de Guest
. Si l'argument n'est pas passé, la valeur par défaut sera utilisée.
function greet(name = 'Guest') {
return `Hello, ${name}!`;
}
console.log(greet('Alice')); // Affichera : Hello, Alice!
console.log(greet()); // Affichera : Hello, Guest!
Exemple 2 : Paramètres par défaut avec des expressions
Dans cet exemple, le paramètre tax
par défaut est calculé comme 20% de price
si aucun autre argument n'est passé.
function calculatePrice(price, tax = price * 0.2) {
return price + tax;
}
console.log(calculatePrice(100)); // Affichera : 120
console.log(calculatePrice(100, 15)); // Affichera : 115
Exemple 3 : Paramètres par défaut dépendant d'autres paramètres
Dans cet exemple, les paramètres par défaut permettent de créer un utilisateur avec des rôles et statuts prédéfinis.
function createUser(name, role = 'user', isActive = true) {
return { name, role, isActive };
}
console.log(createUser('Alice')); // Affichera : { name: 'Alice', role: 'user', isActive: true }
console.log(createUser('Bob', 'admin')); // Affichera : { name: 'Bob', role: 'admin', isActive: true }
console.log(createUser('Charlie', 'moderator', false)); // Affichera : { name: 'Charlie', role: 'moderator', isActive: false }
4.3 Paramètres rest
Les paramètres rest permettent à une fonction de recevoir un nombre quelconque d'arguments et de les regrouper dans un tableau. C'est utile pour créer des fonctions qui peuvent gérer un nombre arbitraire d'arguments.
Syntaxe :
function name (arg1, arg2, ...argArray) {
// corps de la fonction
}
Exemple 1 : Addition de tous les arguments passés
Dans cet exemple, la fonction sumAll()
utilise les paramètres rest pour additionner tous les arguments passés.
function sumAll(...numbers) {
return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(sumAll(1, 2, 3)); // Affichera : 6
console.log(sumAll(4, 5, 6, 7, 8)); // Affichera : 30
Exemple 2 : Fonction avec des paramètres fixes et rest
Dans cet exemple, la fonction showItems()
prend un paramètre fixe firstItem
et un nombre indéfini d'autres arguments regroupés dans le tableau otherItems
.
function showItems(firstItem, ...otherItems) {
console.log(`Premier élément: ${firstItem}`);
console.log(`Autres éléments: ${otherItems.join(', ')}`);
}
showItems('apple', 'banana', 'cherry', 'date');
// Affichera :
// Premier élément: apple
// Autres éléments: banana, cherry, date
Exemple 3 : Fonction avec des arguments dynamiques
Dans cet exemple, la fonction createMessage()
prend le premier argument messageType
et regroupe tous les autres paramètres dans le tableau messages
pour créer un message.
function createMessage(messageType, ...messages) {
return `[${messageType.toUpperCase()}]: ${messages.join(' ')}`;
}
console.log(createMessage('info', 'This', 'is', 'an', 'informational', 'message'));
// Affichera : [INFO]: This is an informational message
console.log(createMessage('error', 'An', 'error', 'occurred'));
// Affichera : [ERROR]: An error occurred
GO TO FULL VERSION