Paramètres par défaut
Les valeurs qu’un paramètre de fonction reçoit quand l’argument n’est pas fourni ou vaut undefined.
Exemple
#function createPlayer(name = 'Invité', level = 1) {
return `${name}, niveau ${level}`
}
console.log(createPlayer('Léa', 5))
console.log(createPlayer('Lucas'))
console.log(createPlayer())Définition et utilisation
#Vous écrivez un paramètre par défaut dans la définition de la fonction avec un signe égal : function greet(name = "Invité"). Si vous omettez l’argument à l’appel ou passez undefined, le paramètre reçoit la valeur par défaut. Grâce à cela, la fonction n’a pas besoin de vérifier elle-même si elle a reçu des données.
La valeur par défaut ne s’applique que pour undefined. Passer null, 0, false ou une chaîne vide est un choix de valeur délibéré, donc cette valeur sera utilisée. C’est ce qui distingue les paramètres par défaut de l’ancien schéma name = name || "Invité", qui remplaçait aussi des données correctes, par exemple zéro.
L’expression par défaut est évaluée à chaque appel où elle est nécessaire, et non une seule fois à la définition de la fonction. Chaque appel avec items = [] reçoit donc un nouveau tableau vide. La valeur par défaut peut utiliser les paramètres précédents, par ex. (points, bonus = points / 2), et se combine avec la déstructuration : function setup({ theme = "dark" } = {}).
Syntaxe
#function name(param = defaultValue) {}
const fn = (a, b = a * 2) => {}
function name({ key = value } = {}) {}Plus d’exemples
#function setVolume(volume = 50) {
return volume
}
console.log(setVolume(undefined))
console.log(setVolume(null))
console.log(setVolume(0))
function oldSetVolume(volume) {
volume = volume || 50
return volume
}
console.log(oldSetVolume(0))L’ancien schéma avec || a remplacé le volume correct 0 par 50. Le paramètre par défaut a laissé le zéro, car il ne réagit qu’à undefined.
function createTask(title, points = 10, bonus = points / 2) {
return { title, points, bonus }
}
console.log(createTask('Quiz'))
console.log(createTask('Projet', 40))function startLesson({ speed = 1, subtitles = true } = {}) {
return `Vitesse ${speed}x, sous-titres : ${subtitles ? 'oui' : 'non'}`
}
console.log(startLesson({ speed: 1.5 }))
console.log(startLesson())Le = {} final permet d’appeler la fonction sans argument. Sans lui, la déstructuration de undefined lèverait une TypeError.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Placez les paramètres avec des valeurs par défaut à la fin de la liste. Il suffit alors d’omettre les derniers arguments, sans passer
undefinedau milieu. - Pour un objet d’options, ajoutez
= {}pour tout le paramètre. Sans cela, appeler la fonction sans argument lèvera uneTypeErrorlors de la déstructuration. - Quand vous voulez aussi remplacer
null, utilisez l’opérateur??dans le corps de la fonction :const size = input ?? 16.
Entrées associées
#- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- ??L’opérateur ?? (nullish coalescing) renvoie le côté droit seulement quand le côté gauche est null ou undefined. Idéal pour les valeurs par défaut.
- Paramètre du reste (...rest)Rassemble tous les arguments restants d’une fonction dans un véritable tableau. Vous l’écrivez comme ...nom à la fin de la liste.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.