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, 2); // 10
multiplier(5, 1); // 5
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, 2); // 10
multiplier(5, 1); // 5
multiplier(5); // 5

Exemples

Passer undefined en paramètre

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

function test(num = 1) {
  console.log(typeof num);
}

test();           // number (num vaut 1)
test(undefined);  // number (num vaut 1 également)
test("");         // string (num vaut "")
test(null);       // object (num vaut null)

É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 salutation(nom, salut, message = salut + ' ' + nom){
    return [nom, salut, message];
}

salutation('David', 'Coucou');  
// ["David", "Coucou", "Coucou David"]

salutation('David', 'Coucou', 'Bon anniversaire !'); 
// ["David", "Coucou", "Bon anniversaire !"]

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

Avant Gecko 26 ((Firefox 26 / Thunderbird 26 / SeaMonkey 2.23 / Firefox OS 1.2), le code suivant aurait entraîné une exception SyntaxError. Cela a été corrigé avec le bug bug 777060. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :

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

f();  // [1, undefined]
f(2); // [2, undefined]

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

Il est possible d'utiliser les valeurs par défaut avec la syntaxe de décomposition :

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

f(); // 6

Spécifications

Spécification État Commentaires
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Function Definitions' dans cette spécification.
Standard Définition initiale.
ECMAScript Latest Draft (ECMA-262)
La définition de 'Function Definitions' dans cette spécification.
Projet  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simpleChrome Support complet 49Edge Support complet 14Firefox Support complet 15IE Aucun support NonOpera Support complet 36Safari Support complet 10WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14Firefox Android Support complet 15Opera Android Support complet 36Safari iOS Support complet 10Samsung Internet Android Support complet 5.0nodejs Support complet 6.0.0
Parameters without defaults after default parametersChrome Support complet 49Edge Support complet 14Firefox Support complet 26IE Aucun support NonOpera Support complet 36Safari Support complet 10WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile Support complet 14Firefox Android Support complet 26Opera Android Support complet 36Safari iOS Support complet 10Samsung Internet Android Support complet 5.0nodejs Support complet Oui
Destructured parameter with default value assignmentChrome Support complet 49Edge ? Firefox Support complet 41IE Aucun support NonOpera ? Safari ? WebView Android Support complet 49Chrome Android Support complet 49Edge Mobile ? Firefox Android Support complet 41Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0nodejs Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, theevann, hugohil, masseuro, Chealer, fscholz, Goofy
Dernière mise à jour par : SphinxKnight,