Paramètre par défaut en JavaScript : une valeur de repli déclarée dans la signature

Avant, une fonction commençait souvent par trois lignes de vérification : si cet argument manque, mettre telle valeur. Ces lignes n'apportaient rien et masquaient le vrai travail.

Les paramètres par défaut déplacent cette information là où elle est utile : dans la signature, visible dès la première lecture et par les outils.

Définition

Un paramètre par défaut est une valeur écrite après un signe égal dans la liste des paramètres. Elle est utilisée quand l'argument correspondant est absent ou vaut explicitement undefined.

function saluer(nom = "visiteur", ponctuation = "!") {
  return "Bonjour " + nom + ponctuation;
}

console.log(saluer());                 // Bonjour visiteur!
console.log(saluer("Ada"));            // Bonjour Ada!
console.log(saluer(undefined, "..."));  // Bonjour visiteur...
console.log(saluer(null));             // Bonjour null!

La dernière ligne est le point à retenir : null est une valeur, donc le défaut ne s'applique pas.

Ce qui déclenche le défaut, et ce qui ne le déclenche pas

Ce tableau à deux colonnes lève le doute une fois pour toutes.

C'est exactement le comportement de la Coalescence des nuls (??) restreint à undefined, et non celui d'un || qui écraserait aussi les valeurs falsy. Voir Truthy et falsy.

Deux comportements qui rendent service

Un défaut est évalué à chaque appel, et il peut s'appuyer sur les paramètres déclarés avant lui.

function creerLien(base, chemin = "/", url = base + chemin) {
  return url;
}

console.log(creerLien("https://believemy.com"));        // https://believemy.com/
console.log(creerLien("https://believemy.com", "/fr")); // https://believemy.com/fr

function ajouter(article, panier = []) {
  panier.push(article);
  return panier;
}

console.log(ajouter("clavier").length); // 1
console.log(ajouter("souris").length);  // 1, un tableau neuf à chaque appel

Questions fréquentes

Oui, et c'est l'usage le plus confortable pour une fonction à options. Écrire function config({ theme = "clair" } = {}) donne un défaut à chaque champ, et le = {} final permet d'appeler la fonction sans aucun argument. Voir Destructuration pour la syntaxe complète.

Oui, n'importe quelle expression convient, y compris un appel de fonction. Elle n'est évaluée que si l'argument manque, ce qui évite un calcul inutile dans le cas courant. Attention toutefois à ne pas y cacher un Effet de bord : la signature n'est pas l'endroit où on s'attend à en trouver.

C'est fortement recommandé. Un défaut placé avant un paramètre obligatoire oblige l'appelant à écrire undefined pour le sauter, ce qui est illisible. Rangez les paramètres du plus obligatoire au plus optionnel, ou regroupez les options dans un seul objet.