Tutoriel présentant les nouveautés ECMAScript 6

Les variables et les fonctions

II. 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.

II-A. Les valeurs par défaut des paramètres▲

II-A-1. 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 :

Sélectionnez

1.
2.
3.
4.
5.

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.

Il y a toutefois un petit souci si on transmet la valeur 0 ou une chaîne vide parce que dans les deux cas la valeur est considérée comme false.

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

Sélectionnez

1.
2.
3.
4.
5.

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.

Mais reconnaissez que ce n'est quand même pas très élégant !

Avec ES6 ça devient plus simple et facile :

Sélectionnez

1.
2.
3.
4.

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.

II-A-2. Une valeur de paramètre comme valeur par défaut▲

Regardez maintenant le code un peu modifié :

Sélectionnez

1.
2.
3.
4.

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 ne pourrait pas faire l'inverse à cause de l'ordre des définitions.

II-A-3. Une fonction comme valeur par défaut▲

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

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

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 :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.

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

Ça vous donne des idées ?

II-B. Le paramètre du reste▲

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 :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

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 :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.

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.‌

Il ne peut y avoir qu'un seul paramètre du reste et ce doit être le dernier, ce qui est logique…

II-C. L'opérateur de décomposition (spread operator)▲

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 :

Sélectionnez

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

Mais vous ne pouvez pas transmettre un tableau à cette méthode.

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

Sélectionnez

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

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

Sélectionnez

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

II-D. 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.

Copyright © 2018 Laravel. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.