Valeurs par défaut des arguments

Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur undefined qui est passée.

Syntaxe

function [nom]([param1[ = valeurParDéfaut1 ][, ..., paramN[ = valeurParDéfautN ]]]) {
   instructions
}

Description

En JavaScript, par défaut, la valeur des paramètres d'une fonction sera undefined. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.

Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait undefined et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre b n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé undefined dans la multiplication, la valeur retournée aurait été NaN. Aussi, dans la deuxième ligne du code, on prévoit ce cas :

function multiplier(a, b) {
  var b = (typeof b !== 'undefined') ? b : 1;

  return a*b;
}
multiplier(5); // 5

Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :

function multiplier(a, b = 1) {
  return a*b;
}

multiplier(5); // 5

Exemples

Passer undefined en paramètre

Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à undefined pour la valeur couleur. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour null).

function setBackgroundColor(element, couleur = 'marron') {
  element.style.backgroundColor = couleur;
}

setBackgroundColor(unDiv);            // la couleur vaudra 'marron'
setBackgroundColor(unDiv, undefined); // la couleur vaudra 'marron' également
setBackgroundColor(unDiv, 'blue');    // la couleur vaudra 'blue'

Pour les versions de Gecko inférieures à 15, cette syntaxe ne fonctionnera pas. S'il n'y a pas de valeur fournie pour b lors de l'appel, la valeur utilisée sera undefined  au moment de l'évaluation de a*b. Le résultat de multiplication aurait alors été NaN. La stratégie, dans ce cas, consiste à tester les valeurs des arguments dans le corps de la fonction et à leur affecter une valeur si elles ne sont pas définies :

function multiplication(a, b) {
  b = (typeof b !== 'undefined') ?  b : 1;

  return a*b;
}

multiplication(5); // 5

Voici un autre exemple :

function setBackgroundColor(élément, couleur = 'rosybrown') {
  élément.style.backgroundColor = couleur;
}

setBackgroundColor(unDiv);            // la couleur sera 'rosybrown'
setBackgroundColor(unDiv, undefined); // la couleur sera 'rosybrown'
setBackgroundColor(unDiv, 'blue');    // la couleur sera 'blue' 

Évaluation à l'appel

L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.

function append(valeur, tableau = []) {
  tableau.push(valeur);
  return tableau;
}

append(1); //[1]
append(2); //[2], et non [1, 2]

Cela est également valable pour les fonctions et les variables

function appelQqc(truc = qqc()) { return truc }

appelQqc(); //lève une ReferenceError

let (qqc = () => "machin") {
  appelQqc(); //"machin"
}

Les paramètres par défaut sont disponibles à la suite

Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :

function singulierAutoPluriel(singulier, pluriel = singulier+"s", 
                            message = pluriel + " BOOU :) !!!") {
  return [singulier, pluriel, rallyingCry ]; 
}

//["Gecko","Geckos", "Geckos BOOU :) !!!"]
singulierAutoPluriel("Gecko");

//["Fox","Foxes", "Foxes BOOU :) !!!"]
singulierAutoPluriel("Fox","Foxes");

//["Cerf", "Cerfs", "Les cerfs ... tranquilement."]
singulierAutoPluriel("Cerf", "Cerfs", "Les cerfs vivent tranquilement.")

On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :

function go() {
  return ":P"
}

function avecDéfaut(a, b = 5, c = b, d = go(), e = this, 
                      f = arguments, g = this.value) {
  return [a,b,c,d,e,f,g];
}
function sansDéfauts(a, b, c, d, e, f, g){
  switch(arguments.length){
    case 0:
      a
    case 1:
      b = 5
    case 2:
      c = b
    case 3:
      d = go();
    case 4:
      e = this
    case 5:
      f = arguments
    case 6:
      g = this.value;
    default:
  }
  return [a,b,c,d,e,f,g];
}

avecDéfaut.call({value:"=^_^="});
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]


sansDéfaut.call({value:"=^_^="});
// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]

Les fonctions définies dans le corps d'une fonction

À partir de Gecko 33 (Firefox 33 / Thunderbird 33 / SeaMonkey 2.30). Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception ReferenceError (plus précisément une TypeError avec SpiderMonkey, voir le bug 1022967). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.

// Ne fonctionnera pas, entraîne une ReferenceError.
function f(a = go()) {
  function go(){return ":P"}
}

Utilisation de paramètres sans valeur par défaut après les paramètres par défaut

Les valeurs par défaut peuvent être utilisées avec l'affectation par décomposition :

function f(x=1, y) { 
  return [x, y]; 
}

f(); // [1, undefined]

Paramètre par défaut et décomposition des paramètres

Avant Gecko 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38), le code suivant entraînait une exception SyntaxError. Cela a été résolu avec le bug 1018628 et fonctionne de la façon attendue dans les versions ultérieures :

function f([x, y] = [1, 2], {z: z} = {z: 3}) {
  return x + y + z;
}

f(); // 6

Spécifications

Compatibilité des navigateurs

Voir aussi

• La proposition originale sur ecmascript.org