Javascript

ES6 : les paramètres des fonctions

Gérer des valeurs par défaut pour les paramètres des fonctions avec ES5 n’est pas prévu et il faut s’en sortir avec des astuces. D’autre part que se passe-t-il quand on veut passer plus de paramètres que prévu par la fonction ? Là aussi avec ES5 on doit recourir à certaines stratégies assez lourdes.

On va voir que ES6 résout avec élégance ces deux problèmes.

Les valeurs par défaut des paramètres

Une valeur par défaut

ES5 ne prévoit pas de valeur par défaut pour un paramètre absent, alors il faut s’en sortir autrement, une manière de faire est celle-ci :

function ajoute(a, b) {
    b = b || 10;
    return a + b;
}
console.log(ajoute(2)); // 12

L’utilisation de l’opérateur OR permet d’affecter une valeur par défaut parce qu’il retourne automatiquement le second élément si le premier est null ou undefined.

Pour contourner ce problème on préfère utiliser cette stratégie :

function ajoute(a, b) {
    if (b === undefined) b = 10;
    return a + b;
}
console.log(ajoute(2, 0)); // 2

Cette fois ça fonctionne bien même en transmettant la valeur 0.

Avec ES6 ça devient plus simple et facile :

function ajoute(a, b = 10) {
  return a + b;
}
console.log(ajoute(2)); // 12

On se retrouve avec une syntaxe classique qu’on a dans pratiquement tous les autres langages.

Une valeur de paramètre comme valeur par défaut

Regardez maintenant le code un peu modifié :

function ajoute(a, b = a) {
    return a + b;
}
console.log(ajoute(2)); // 4

Pour le deuxième paramètre on prend la valeur du premier si aucune valeur n’est transmise.

On peut aussi définir la valeur par défaut avec une fonction :

function valeur() {
    return 10;  
}
function ajoute(a, b = valeur()) {
    return a + b;
}
console.log(ajoute(2)); // 12

Ce qui permet de faire des choses intéressantes en combinant avec la possibilité vue ci-dessus :

function valeur(a) {
  return a * 2;  
}
function ajoute(a, b = valeur(a)) {
   return a + b;
}
console.log(ajoute(2)); // 6

Avec ES5 on peut passer plus de paramètres que prévu dans une fonction. On dispose de l’objet arguments pour gérer cette situation. Voici un code d’exemple :

function ajoute(a) {
    console.log(arguments.length); // 4
    var total = 2 * a;
    for (var i = 1; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
console.log(ajoute(1, 2, 3, 4)); // 11

On prend le double du premier paramètre et on ajoute tous les suivants.

Avec ES6 on dispose du paramètre du reste qui utilise la syntaxe des trois points :

function ajoute(a, ...valeurs) {
    let total = 2 * a;
    for (let i = 0; i < valeurs.length; i++) {
        total += valeurs[i];
    }
    return total;
}
console.log(ajoute(1, 2, 3, 4)); // 11

L’argument valeurs devient un tableau qui contient les paramètres passés à la fonction après les paramètres nommés.‌

L’opérateur de décomposition utilise la même syntaxe que le paramètre du reste mais il est son opposé.

On a vu que l’opérateur du reste transforme les arguments restants en tableau. Quant à lui, l’opérateur de décomposition transforme un tableau en arguments pour une fonction.

Un bon exemple est celui de la méthode Math.max. Cette méthode retourne la plus grande valeur parmi les arguments transmis :

console.log(Math.max(-10, 6, 12, 4)); // 12

Avec l’opérateur de décomposition ça devient facile :

console.log(Math.max(...[-10, 6, 12, 4])); // 12

Vous pouvez utiliser cet opérateur aussi dans un tableau :

console.log(Math.max(...[-10, ...[6, 12], 4])); // 12

En résumé

  • Avec ES6 on peut prévoir des valeurs par défaut pour les paramètres des fonctions,
  • Avec ES6 on dispose du paramètre du reste pour gérer les arguments supplémentaires,

  • Avec ES6 on dispose de l’opérateur de décomposition pour transformer un tableau en arguments pour une fonction.

Print Friendly, PDF & Email

Laisser un commentaire