JavaScript - Paramètres par défaut

Bonjour à tous, futurs magiciens JavaScript ! Aujourd'hui, nous allons plonger dans le monde magique des paramètres par défaut en JavaScript. En tant que votre enseignant bienveillant en informatique, je suis excité de vous guider dans ce voyage. Alors, prenez vos baguettes virtuelles (claviers), et mettons-nous à jeter quelques sorts de code !

Syntaxe des paramètres par défaut

Dans les vieilles ères de JavaScript (avant ES6), définir des valeurs par défaut pour les paramètres de fonction était un peu comme essayer d'enseigner à un chat à rapporter - possible, mais pas très élégant. Nous devions utiliser des astuces comme celle-ci :

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

Mais maintenant, avec ES6 et au-delà, nous avons une méthode beaucoup plus sympathique pour faire cela :

function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Anonymous!
greet('Alice'); // Output: Hello, Alice!

Dans cet exemple, si nous ne passons pas d'argument à greet(), il utilise la valeur par défaut 'Anonymous'. C'est comme avoir un concierge poli qui utilise un salut générique s'il ne connaît pas votre nom !

Passage d'une expression comme valeur par défaut d'un paramètre

Les paramètres par défaut ne se limitent pas aux valeurs simples. Ils peuvent être des expressions aussi ! Jetons un œil à un exemple :

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // Output: 25
console.log(calculateArea(5, 3)); // Output: 15

Ici, si nous ne fournissons pas de largeur, il utilise la valeur de longueur. C'est comme un carré paresseux - si vous ne lui donnez qu'un côté, il suppose que vous voulez un carré !

Nous pouvons même faire plus stylé :

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // Output: Hello, Bob! The lucky number is 42. (ou n'importe quel nombre aléatoire)

Cette fonction génère un numéro chanceux aléatoire chaque fois qu'elle est appelée sans un salut personnalisé. C'est comme une bouchée de bonheur, mais plus amicale !

Passage d'un argument Undefined

Voici un comportement particulier à garder à l'esprit :

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // Output: Default message
showMessage(null); // Output: null

Passer undefined est comme ne rien passer du tout, donc il déclenche la valeur par défaut. Mais null est considéré comme une valeur valide, donc il remplace la valeur par défaut. C'est comme si undefined disait "Je ne sais pas, vous décidez," tandis que null dit "J'ai fait mon choix, et mon choix est rien !"

Fonction d'expression comme paramètre par défaut

Nous pouvons même utiliser des expressions de fonction comme paramètres par défaut. Regardez ça :

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // Output: Hello Alice!
greet('Bob', () => 'Hi there'); // Output: Hi there Bob!

Cela nous permet de personnaliser non seulement la valeur, mais aussi le comportement de notre paramètre par défaut. C'est comme avoir un robot de salutations personnalisable !

Paramètres optionnels de fonction

Maintenant, parlons des paramètres optionnels. En JavaScript, tous les paramètres sont optionnels par défaut. Si vous ne les fournissez pas, ils deviennent undefined. Mais avec les paramètres par défaut, nous pouvons leur donner des valeurs de secours :

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // Output: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // Output: { name: 'Bob', age: 25, country: 'USA' }

De cette façon, nous pouvons rendre certains paramètres obligatoires (comme le nom et l'âge) et d'autres optionnels (comme le pays). C'est comme remplir un formulaire où certains champs sont marqués d'une étoile rouge, et d'autres sont juste sympas à avoir !

Voici un tableau récapitulatif des méthodes que nous avons discutées :

Méthode	Description	Exemple
Paramètre par défaut de base	Fournit une valeur de secours si aucun argument n'est passé	function greet(name = 'Anonymous')
Expression comme valeur par défaut	Utilise une expression pour calculer la valeur par défaut	function calcArea(length, width = length)
Comportement Undefined	undefined déclenche la valeur par défaut, null ne le fait pas	showMessage(undefined) vs showMessage(null)
Fonction comme valeur par défaut	Utilise une fonction pour calculer la valeur par défaut	function greet(name, getGreeting = () => 'Hello')
Paramètres optionnels	Rend certains paramètres optionnels avec des valeurs par défaut	function createUser(name, age, country = 'Unknown')

Souvenez-vous, jeunes padawans, les paramètres par défaut sont comme des filets de sécurité dans votre code. Ils vous attrapent lorsque vous tombez (ou oubliez de passer un argument), garantissant que vos fonctions ont toujours quelque chose à travailler. Utilisez-les intelligemment, et que le code soit avec vous !

Credits: Image by storyset