Comment utiliser les arguments et paramètres ES6

ECMAScript 6 (ou ECMAScript 2015) est la dernière version de la norme ECMAScript et a remarquablement amélioré la gestion des paramètres en JavaScript. Nous pouvons désormais utiliser les paramètres de repos, les valeurs par défaut et la déstructuration, entre autres nouvelles fonctionnalités.

Dans ce didacticiel, nous allons explorer en détail les arguments et les paramètres et voir comment ECMAScript 6 les a mis à niveau.

Arguments contre paramètres

Les arguments et les paramètres sont souvent appelés de manière interchangeable. Néanmoins, pour les besoins de ce tutoriel, nous ferons une distinction. Dans la plupart des normes, les paramètres (ou paramètres formels) sont ce qui est donné dans la déclaration de la fonction, et les arguments (ou paramètres réels) sont ce qui est passé à la fonction. Considérez cette fonction :

 function foo(param1, param2) { // do something } foo(10, 20);

Dans cette fonction, param1 et param2 sont des paramètres de fonction et les valeurs transmises à la fonction ( 10 et 20 ) sont des arguments.

Opérateur de propagation (…)

Dans ECMAScript 5, la méthode apply() est un outil pratique pour passer un tableau comme arguments à une fonction. Par exemple, il est couramment utilisé avec la méthode Math.max() pour trouver la valeur la plus élevée dans un tableau. Considérez ce fragment de code :

 var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50

La méthode Math.max() ne prend pas en charge les tableaux ; il n'accepte que des chiffres. Lorsqu'un tableau est passé à la fonction Math.max() , il génère une erreur. Mais lorsque la méthode apply() est utilisée, le tableau est envoyé sous forme de nombres individuels, de sorte que la méthode Math.max() peut le gérer.

Heureusement, avec l'introduction de l'opérateur spread dans ECMAScript 6, nous n'avons plus besoin d'utiliser la méthode apply() . Avec l'opérateur de propagation, nous pouvons facilement développer une expression en plusieurs arguments :

 var myArray = [5, 10, 50]; Math.max(...myArray); // 50

Ici, l'opérateur de propagation développe myArray pour créer des valeurs individuelles pour la fonction. Bien qu'il soit possible de simuler l'opérateur de propagation à l'aide de apply() dans ECMAScript 5, la syntaxe prête à confusion et manque de la flexibilité de l'opérateur de propagation. L'opérateur de propagation est non seulement plus facile à utiliser, mais offre plus de fonctionnalités. Par exemple, il peut être utilisé plusieurs fois et peut être mélangé avec d'autres arguments dans un appel de function :

 function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25

Un autre avantage de l'opérateur de propagation est qu'il peut facilement être utilisé avec les constructeurs :

 new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Bien sûr, nous pourrions réécrire le code précédent en ECMAScript 5, mais nous aurions besoin d'utiliser un modèle compliqué pour éviter d'obtenir une erreur de type :

 new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)

Répartir la prise en charge du navigateur de l'opérateur dans les appels de fonction

Navigateurs de bureau :

Navigateurs mobiles :

Paramètres de repos

Le paramètre rest a la même syntaxe que l'opérateur spread, mais au lieu de développer un tableau en paramètres, il collecte les paramètres et les transforme en tableau.

 function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]

S'il n'y a pas d'arguments, le paramètre rest sera défini sur un tableau vide :

 function myFunction(...options) { return options; } myFunction(); // []

Un paramètre de repos est particulièrement utile lors de la création d'une fonction variadique (une fonction qui accepte un nombre variable d'arguments). Ayant l'avantage d'être des tableaux, les paramètres de repos peuvent facilement remplacer l'objet arguments (que nous expliquerons plus tard dans ce didacticiel). Considérez cette fonction, écrite en ECMAScript 5 :

 function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

Cette fonction vérifie si une chaîne contient un certain nombre de sous-chaînes. Le premier problème avec cette fonction est que nous devons regarder à l'intérieur du corps de la function pour voir qu'elle prend plusieurs arguments. Le deuxième problème est que l'itération doit commencer à partir de 1 au lieu de 0 , car arguments[0] pointe vers le premier argument. Si nous décidons plus tard d'ajouter un autre paramètre avant ou après la chaîne, nous pourrions oublier de mettre à jour la boucle. Avec les autres paramètres, nous évitons facilement ces problèmes :

 function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true

La sortie de cette fonction est la même que la précédente. Là encore, la string de paramètres est remplie avec l'argument passé en premier, mais le reste des arguments est placé dans un tableau et affecté à la variable keys .

L'utilisation du paramètre rest au lieu de l'objet arguments améliore la lisibilité du code et évite les problèmes d'optimisation en JavaScript. Néanmoins, le paramètre de repos n'est pas sans limites. Par exemple, ce doit être le dernier argument ; sinon, une erreur de syntaxe se produira :

 function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

Une autre limitation est qu'un seul paramètre rest est autorisé dans la déclaration de la function :

 function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter

Prise en charge du navigateur de paramètres de repos

Navigateurs de bureau :

Navigateurs mobiles :

Paramètres par défaut

Paramètres par défaut dans ECMAScript 5

JavaScript ne prend pas en charge les paramètres par défaut dans ECMAScript 5, mais il existe une solution de contournement simple. En utilisant un opérateur logique OR ( || ) à l'intérieur de la fonction, nous pouvons facilement simuler les paramètres par défaut dans ECMAScript 5. Considérez cette fonction :

 function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10

Cette fonction attend deux arguments, mais lorsqu'elle est appelée sans arguments, elle utilise les valeurs par défaut. Dans la fonction, les arguments manquants sont automatiquement définis sur undefined ; ainsi, nous pouvons détecter ces arguments et leur déclarer des valeurs par défaut. Pour détecter les arguments manquants et définir les valeurs par défaut, nous utilisons l'opérateur logique OR ( || ). Cet opérateur examine son premier argument : s'il est véridique, l'opérateur le renvoie ; si ce n'est pas le cas, l'opérateur renvoie son deuxième argument.

Cette approche est couramment utilisée dans les fonctions, mais elle a un défaut. Passer 0 ou null déclenchera également une valeur par défaut, car celles-ci sont considérées comme de fausses valeurs. Donc, si nous devons réellement passer 0 ou null à cette fonction, nous aurions besoin d'un autre moyen de vérifier si un argument est manquant :

 function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10

Dans cette fonction, les types d'arguments passés sont vérifiés pour s'assurer qu'ils ne sont pas définis avant que les valeurs par défaut ne soient affectées. Cette approche nécessite juste un peu plus de code, mais c'est une alternative plus sûre et nous permet de passer 0 et null à la fonction.

Paramètres par défaut dans ECMAScript 6

Avec ECMAScript 6, nous n'avons plus besoin de vérifier les valeurs indéfinies pour simuler les paramètres par défaut. Nous pouvons maintenant mettre les valeurs par défaut directement dans la déclaration de la function :

 function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null

Comme vous pouvez le voir, omettre un argument déclenche la valeur par défaut, mais passer 0 ou null ne le fera pas. Nous pouvons même utiliser des fonctions pour récupérer les valeurs des paramètres par défaut :

 function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)

Notez que la fonction getParam est appelée uniquement si le deuxième argument est omis. Ainsi, lorsque nous appelons la fonction multiply() avec deux paramètres, l'alerte ne sera pas affichée.

Une autre caractéristique intéressante des paramètres par défaut est que nous pouvons faire référence à d'autres paramètres et variables dans la déclaration de la function :

 function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4

Vous pouvez même effectuer des opérations dans la déclaration de function :

 function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36

Notez que, contrairement à certains autres langages, JavaScript évalue les paramètres par défaut au moment de l'appel :

 function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]

Prise en charge du navigateur de paramètres par défaut

Navigateurs de bureau :

Navigateurs mobiles :

Déstructuration

La déstructuration est une nouvelle fonctionnalité d'ECMAScript 6 qui nous permet d'extraire des valeurs de tableaux et d'objets et de les affecter à des variables à l'aide d'une syntaxe similaire aux littéraux d'objet et de tableau. La syntaxe est claire et facile à comprendre et est particulièrement utile lors du passage d'arguments à une fonction.

Dans ECMAScript 5, un objet de configuration est souvent utilisé pour gérer un grand nombre de paramètres facultatifs, en particulier lorsque l'ordre des propriétés n'a pas d'importance. Considérez cette fonction :

 function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);

Ce modèle est couramment utilisé par les développeurs JavaScript, et il fonctionne bien, mais nous devons regarder à l'intérieur du corps de la function pour voir quels paramètres il attend. Avec des paramètres déstructurés, nous pouvons clairement indiquer les paramètres dans la déclaration de la function :

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);

Dans cette fonction, nous avons utilisé un modèle de déstructuration d'objet, au lieu d'un objet de configuration. Cela rend notre fonction non seulement plus concise, mais aussi plus facile à lire.

On peut aussi combiner des paramètres déstructurés avec des paramètres réguliers :

 function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);

Notez qu'une erreur de type sera renvoyée si des paramètres sont omis dans l'appel de function :

 function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'

C'est le comportement souhaité lorsque nous avons besoin de paramètres obligatoires, mais que se passe-t-il si nous voulons qu'ils soient facultatifs ? Pour éviter cette erreur lorsque des paramètres sont manquants, nous devons attribuer une valeur par défaut aux paramètres déstructurés :

 function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error

Dans cette fonction, un objet vide est fourni comme valeur par défaut pour les paramètres déstructurés. Maintenant, si cette fonction est appelée sans aucun paramètre, aucune erreur ne se produira.

On peut aussi attribuer une valeur par défaut à chaque paramètre déstructuré :

 function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }

Dans cet exemple, chaque propriété a un paramètre par défaut, ce qui nous évite d'avoir à vérifier manuellement les paramètres non définis et à attribuer des valeurs par défaut dans le corps de la function .

Déstructuration de la prise en charge du navigateur

Navigateurs de bureau :

Navigateurs mobiles :

Passer des arguments

Il existe deux manières de passer des arguments à une fonction : par référence ou par valeur. La modification d'un argument passé par référence est répercutée globalement, mais la modification d'un argument passé par valeur n'est répercutée qu'à l'intérieur de la fonction.

Dans certains langages, tels que Visual Basic et PowerShell, nous avons la possibilité de spécifier s'il faut passer un argument par référence ou par valeur, mais ce n'est pas le cas avec JavaScript.

Passer des arguments par valeur

Techniquement, JavaScript ne peut passer que par valeur. Lorsque nous passons un argument à une fonction par valeur, une copie de cette valeur est créée dans la portée de la function . Ainsi, toute modification de la valeur n'est reflétée qu'à l'intérieur de la function . Considérez cet exemple :

 var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5

Ici, la modification de l'argument à l'intérieur de la fonction n'a aucun effet sur la valeur d'origine. Ainsi, lorsque la variable est enregistrée depuis l'extérieur de la fonction, la valeur imprimée est toujours 5 .

Passer des arguments par référence

En JavaScript, tout est passé par valeur, mais lorsque nous passons une variable qui fait référence à un objet (y compris des tableaux), la "valeur" est une référence à l'objet, et changer une propriété d'un objet référencé par une variable change le objet sous-jacent.

Considérez cette fonction :

 function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value

Comme vous pouvez le voir, la propriété de l'objet est modifiée à l'intérieur de la fonction, mais la valeur modifiée est visible à l'extérieur de la fonction.

Lorsque nous passons une valeur non primitive telle qu'un tableau ou un objet, derrière la scène, une variable est créée qui pointe vers l'emplacement de l'objet d'origine en mémoire. Cette variable est ensuite transmise à la fonction et sa modification affectera l'objet d'origine.

Vérification de type et paramètres manquants ou supplémentaires

Dans un langage fortement typé, nous devons spécifier le type des paramètres dans la déclaration de la function , mais JavaScript n'a pas cette fonctionnalité. En JavaScript, peu importe le type de données ou le nombre d'arguments que nous passons à une fonction.

Supposons que nous ayons une fonction qui n'accepte qu'un seul argument. Lorsque nous appelons cette fonction, nous ne sommes pas limités à passer un seul argument à la fonction ; nous sommes libres de passer un, deux ou plusieurs arguments ! Nous pouvons même choisir de ne rien passer du tout, et aucune erreur ne se produira.

Le nombre d'arguments et de paramètres peut différer de deux manières :

• Moins d'arguments que de paramètres .
  Les paramètres manquants seront égaux à undefined .
• Plus d'arguments que de paramètres .
  Les paramètres supplémentaires seront ignorés mais peuvent être récupérés via les arguments de variable spéciaux de type tableau (voir ci-dessous).

Arguments obligatoires

Si un argument manque dans un appel de function , il sera défini sur undefined . Nous pouvons tirer parti de ce comportement et générer une erreur si un argument est omis :

 function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }

Dans ECMAScript 6, nous pouvons aller plus loin et utiliser des paramètres par défaut pour définir des arguments obligatoires :

 function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter

Arguments Objet

La prise en charge des paramètres de repos a été ajoutée à ECMAScript 4 avec l'intention de remplacer l'objet arguments , mais ECMAScript 4 n'a jamais abouti. Avec la sortie d'ECMAScript 6, JavaScript prend désormais officiellement en charge les autres paramètres. Il a également annulé le projet d'abandonner la prise en charge de l'objet arguments .

L'objet arguments est un objet de type tableau qui est disponible dans toutes les fonctions. Il permet aux valeurs de l' argument passées à la fonction d'être récupérées par numéro, plutôt que par nom. L'objet nous permet de passer n'importe quel nombre d'arguments à une fonction. Considérez le fragment de code suivant :

 function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);

Cette fonction s'attend à recevoir un seul argument. Lorsque nous l'appelons avec deux arguments, le premier argument est accessible dans la fonction par le nom de paramètre param1 ou l'objet arguments[0] , mais le second argument n'est accessible que par arguments[1] . Notez également que l'objet arguments peut être utilisé conjointement avec des arguments nommés.

L'objet arguments contient une entrée pour chaque argument passé à la fonction, et l'index de la première entrée commence à 0 . Si nous voulions accéder à plus d'arguments dans l'exemple ci-dessus, nous écririons arguments[2] , arguments[3] et ainsi de suite.

Nous pourrions même ignorer complètement la définition des paramètres nommés et utiliser simplement l'objet arguments :

 function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6

En fait, les paramètres nommés sont une commodité, pas une nécessité. De même, les paramètres rest peuvent être utilisés pour refléter les arguments passés :

 function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);

L'objet arguments est un objet de type tableau, mais il lui manque des méthodes de tableau telles que slice() et foreach() . Afin d'utiliser des méthodes de tableau sur l'objet arguments , l'objet doit d'abord être converti en un tableau réel :

 function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

Dans cette fonction, Array.prototype.slice.call() est utilisé comme un moyen rapide de convertir l'objet arguments en un tableau. Ensuite, la méthode sort() trie les éléments du tableau et les renvoie.

ECMAScript 6 a une méthode encore plus simple. Array.from() , un nouvel ajout dans ECMAScript 6, crée un nouveau tableau à partir de n'importe quel objet de type tableau :

 function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]

La propriété de longueur

Bien que l'objet arguments ne soit pas techniquement un tableau, il a une propriété length qui peut être utilisée pour vérifier le nombre d'arguments passés à une fonction :

 function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3

En utilisant la propriété length , nous avons un meilleur contrôle sur le nombre d'arguments passés à une fonction. Par exemple, si une fonction nécessite deux arguments pour fonctionner, nous pourrions utiliser la propriété length pour vérifier le nombre d'arguments passés et générer une erreur s'ils sont moins nombreux que prévu :

 function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }

Les paramètres de repos sont des tableaux, ils ont donc une propriété de length . Dans ECMAScript 6, le code précédent peut être réécrit avec des paramètres de repos :

 function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }

Propriétés de l'appelé et de l'appelant

La propriété callee fait référence à la fonction en cours d'exécution et l' caller fait référence à la fonction qui a appelé la fonction en cours d'exécution. En mode strict ECMAScript 5, ces propriétés sont obsolètes et tenter d'y accéder provoque une TypeError.

La propriété arguments.callee est utile dans les fonctions récursives (une fonction récursive est une fonction régulière qui se réfère à elle-même par son nom), en particulier lorsque le nom de la fonction n'est pas disponible (une fonction anonyme). Parce qu'une fonction anonyme n'a pas de nom, la seule façon de s'y référer est par arguments.callee .

 var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24

Objet d'arguments en modes strict et non strict

En mode non strict d'ECMAScript 5, l'objet arguments a une caractéristique inhabituelle : il conserve ses valeurs en synchronisation avec les valeurs des paramètres nommés correspondants.

Considérez le fragment de code suivant :

 function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500

Dans cette fonction, une nouvelle valeur est affectée à arguments[0] . Étant donné que les valeurs des arguments restent toujours synchronisées avec les valeurs des paramètres nommés, la modification de arguments[0] modifiera également la valeur de param . En fait, ce sont comme deux noms différents pour la même variable. En mode strict ECMAScript 5, ce comportement déroutant de l'objet arguments a été supprimé :

 "use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200

Cette fois, changer arguments[0] n'affecte pas param et la sortie est comme prévu. La sortie de cette fonction dans ECMAScript 6 est la même qu'en mode strict ECMAScript 5, mais gardez à l'esprit que lorsque des valeurs par défaut sont utilisées dans la déclaration de la function , l'objet arguments n'est pas affecté :

 function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');

Dans cette fonction, même si param3 a une valeur par défaut, elle n'est pas égale à arguments[2] car seuls deux arguments sont passés à la fonction. En d'autres termes, la définition de valeurs par défaut n'a aucun effet sur l'objet arguments .

Conclusion

ECMAScript 6 a apporté des centaines de petites et grandes améliorations à JavaScript. De plus en plus, les développeurs utilisent les fonctionnalités ECMAScript 6, et bientôt ces fonctionnalités seront incontournables. Dans ce didacticiel, nous avons appris comment ECMAScript 6 a amélioré la gestion des paramètres dans JavaScript, mais nous n'avons fait qu'effleurer la surface d'ECMAScript 6. De nombreuses autres fonctionnalités nouvelles et intéressantes du langage valent la peine d'être vérifiées.

Liens

• Tableau de compatibilité ECMAScript 6, Juriy Zaytsev
• « Spécification du langage ECMAScript 2015 », ECMA International