Existe-t-il un moyen de fournir des paramètres nommés dans un appel de fonction en JavaScript?

Je trouve la fonctionnalité des paramètres nommés en C # très utile dans certains cas.

calculateBMI(70, height: 175);

Que puis-je utiliser si je le souhaite en JavaScript?

Ce que je ne veux pas, c'est ceci:

myFunction({ param1: 70, param2: 175 });

function myFunction(params){
  // Check if params is an object
  // Check if the parameters I need are non-null
  // Blah blah
}

Cette approche que j'ai déjà utilisée. Y a-t-il un autre moyen?

Je peux utiliser n'importe quelle bibliothèque pour ce faire.

ES2015 et versions ultérieures

Dans ES2015, la déstructuration des paramètres peut être utilisée pour simuler des paramètres nommés. Il faudrait que l'appelant passe un objet, mais vous pouvez éviter toutes les vérifications à l'intérieur de la fonction si vous utilisez également des paramètres par défaut:

myFunction({ param1 : 70, param2 : 175});

function myFunction({param1, param2}={}){
  // ...function body...
}

// Or with defaults, 
function myFunc({
  name = 'Default user',
  age = 'N/A'
}={}) {
  // ...function body...
}

ES5

Il existe un moyen de se rapprocher de ce que vous voulez, mais il est basé sur la sortie de Function.prototype.toString ^[ES5] , qui dépend dans une certaine mesure de l'implémentation, de sorte qu'il peut ne pas être compatible avec plusieurs navigateurs.

L'idée est d'analyser les noms de paramètres à partir de la représentation sous forme de chaîne de la fonction afin de pouvoir associer les propriétés d'un objet au paramètre correspondant.

Un appel de fonction pourrait alors ressembler à

func(a, b, {someArg: ..., someOtherArg: ...});

où aetb sont des arguments positionnels et le dernier argument est un objet avec des arguments nommés.

Par exemple:

var parameterfy = (function() {
    var pattern = /function[^(]*\(([^)]*)\)/;

    return function(func) {
        // fails horribly for parameterless functions ;)
        var args = func.toString().match(pattern)[1].split(/,\s*/);

        return function() {
            var named_params = arguments[arguments.length - 1];
            if (typeof named_params === 'object') {
                var params = [].slice.call(arguments, 0, -1);
                if (params.length < args.length) {
                    for (var i = params.length, l = args.length; i < l; i++) {
                        params.push(named_params[args[i]]);
                    }
                    return func.apply(this, params);
                }
            }
            return func.apply(null, arguments);
        };
    };
}());

Que vous utiliseriez comme:

var foo = parameterfy(function(a, b, c) {
    console.log('a is ' + a, ' | b is ' + b, ' | c is ' + c);     
});

foo(1, 2, 3); // a is 1  | b is 2  | c is 3
foo(1, {b:2, c:3}); // a is 1  | b is 2  | c is 3
foo(1, {c:3}); // a is 1  | b is undefined  | c is 3
foo({a: 1, c:3}); // a is 1  | b is undefined  | c is 3 

DEMO

Il y a quelques inconvénients à cette approche (vous avez été prévenu!):

• Si le dernier argument est un objet, il est traité comme un "objet argument nommé"
• Vous obtiendrez toujours autant d'arguments que vous l'avez défini dans la fonction, mais certains d'entre eux peuvent avoir la valeur undefined(ce qui est différent de n'avoir aucune valeur). Cela signifie que vous ne pouvez pas utiliser arguments.lengthpour tester le nombre d'arguments transmis.

Au lieu d'avoir une fonction créant le wrapper, vous pouvez également avoir une fonction qui accepte une fonction et diverses valeurs comme arguments, telles que

call(func, a, b, {posArg: ... });

ou même étendre Function.prototypepour que vous puissiez faire:

foo.execute(a, b, {posArg: ...});

Non - l'approche objet est la réponse de JavaScript à cela. Cela ne pose aucun problème à condition que votre fonction attend un objet plutôt que des paramètres séparés.

Ce problème est une bête noire depuis un certain temps. Je suis un programmeur chevronné avec de nombreuses langues à mon actif. L'une de mes langues préférées que j'ai eu le plaisir d'utiliser est Python. Python prend en charge les paramètres nommés sans aucune astuce .... Depuis que j'ai commencé à utiliser Python (il y a quelque temps), tout est devenu plus facile. Je crois que chaque langue devrait prendre en charge les paramètres nommés, mais ce n'est tout simplement pas le cas.

Beaucoup de gens disent d'utiliser simplement l'astuce "Passer un objet" pour que vous ayez nommé des paramètres.

/**
 * My Function
 *
 * @param {Object} arg1 Named arguments
 */
function myFunc(arg1) { }

myFunc({ param1 : 70, param2 : 175});

Et cela fonctionne très bien, sauf ..... en ce qui concerne la plupart des IDE, beaucoup d'entre nous, développeurs, s'appuient sur des indices de type / argument dans notre IDE. J'utilise personnellement PHP Storm (avec d'autres IDE JetBrains comme PyCharm pour python et AppCode pour Objective C)

Et le plus gros problème avec l'utilisation de l'astuce "Passer un objet" est que lorsque vous appelez la fonction, l'EDI vous donne un indice de type unique et c'est tout ... Comment sommes-nous censés savoir quels paramètres et types doivent entrer dans le objet arg1?

Donc ... l'astuce "Passer un objet" ne fonctionne pas pour moi ... Cela provoque en fait plus de maux de tête lorsque je regarde le docblock de chaque fonction avant de savoir quels paramètres la fonction attend .... Bien sûr, c'est génial pour lorsque vous maintenez le code existant, mais c'est horrible pour écrire du nouveau code.

Eh bien, c'est la technique que j'utilise .... Maintenant, il peut y avoir des problèmes avec cela, et certains développeurs peuvent me dire que je le fais mal, et j'ai un esprit ouvert quand il s'agit de ces choses ... Je suis toujours prêt à chercher de meilleures façons d'accomplir une tâche ... Donc, s'il y a un problème avec cette technique, alors les commentaires sont les bienvenus.

/**
 * My Function
 *
 * @param {string} arg1 Argument 1
 * @param {string} arg2 Argument 2
 */
function myFunc(arg1, arg2) { }

var arg1, arg2;
myFunc(arg1='Param1', arg2='Param2');

De cette façon, j'ai le meilleur des deux mondes ... le nouveau code est facile à écrire car mon IDE me donne tous les conseils d'argument appropriés ... Et, tout en conservant le code plus tard, je peux voir en un coup d'œil, non seulement le valeur passée à la fonction, mais aussi le nom de l'argument. La seule surcharge que je vois est de déclarer vos noms d'argument en tant que variables locales pour éviter de polluer l'espace de noms global. Bien sûr, c'est un peu de frappe supplémentaire, mais trivial par rapport au temps qu'il faut pour rechercher des docblocks lors de l'écriture de nouveau code ou de la maintenance du code existant.

Si vous voulez préciser ce que sont chacun des paramètres, plutôt que d'appeler simplement

someFunction(70, 115);

pourquoi ne pas faire ce qui suit

var width = 70, height = 115;
someFunction(width, height);

Bien sûr, c'est une ligne de code supplémentaire, mais elle gagne en lisibilité.

Une autre façon serait d'utiliser les attributs d'un objet approprié, par exemple comme ceci:

function plus(a,b) { return a+b; };

Plus = { a: function(x) { return { b: function(y) { return plus(x,y) }}}, 
         b: function(y) { return { a: function(x) { return plus(x,y) }}}};

sum = Plus.a(3).b(5);

Bien sûr, pour cet exemple composé, il est quelque peu dénué de sens. Mais dans les cas où la fonction ressemble

do_something(some_connection_handle, some_context_parameter, some_value)

cela pourrait être plus utile. Il pourrait également être combiné avec l'idée "parameterfy" pour créer un tel objet à partir d'une fonction existante de manière générique. C'est-à-dire que pour chaque paramètre, il créerait un membre pouvant évaluer une version partiellement évaluée de la fonction.

Cette idée est bien sûr liée à Schönfinkeling alias Currying.

Il y a une autre manière. Si vous passez un objet par référence, les propriétés de cet objet apparaîtront dans la portée locale de la fonction. Je sais que cela fonctionne pour Safari (je n'ai pas vérifié les autres navigateurs) et je ne sais pas si cette fonctionnalité a un nom, mais l'exemple ci-dessous illustre son utilisation.

Bien que dans la pratique, je ne pense pas que cela offre une valeur fonctionnelle au-delà de la technique que vous utilisez déjà, c'est un peu plus propre sémantiquement. Et cela nécessite toujours de passer une référence d'objet ou un objet littéral.

function sum({ a:a, b:b}) {
    console.log(a+'+'+b);
    if(a==undefined) a=0;
    if(b==undefined) b=0;
    return (a+b);
}

// will work (returns 9 and 3 respectively)
console.log(sum({a:4,b:5}));
console.log(sum({a:3}));

// will not work (returns 0)
console.log(sum(4,5));
console.log(sum(4));

En essayant Node-6.4.0 (process.versions.v8 = '5.0.71.60') et Node Chakracore-v7.0.0-pre8 puis Chrome-52 (V8 = 5.2.361.49), j'ai remarqué que les paramètres nommés sont presque mis en œuvre, mais cet ordre a toujours préséance. Je ne trouve pas ce que dit la norme ECMA.

>function f(a=1, b=2){ console.log(`a=${a} + b=${b} = ${a+b}`) }

> f()
a=1 + b=2 = 3
> f(a=5)
a=5 + b=2 = 7
> f(a=7, b=10)
a=7 + b=10 = 17

Mais l'ordre est requis !! Est-ce le comportement standard?

> f(b=10)
a=10 + b=2 = 12

Fonction d'appel favec des paramètres nommés passés en tant qu'objet

o = {height: 1, width: 5, ...}

appelle essentiellement sa composition f(...g(o))où j'utilise la syntaxe de propagation etg est une carte "contraignante" reliant les valeurs des objets à leurs positions de paramètres.

La carte de liaison est précisément l'ingrédient manquant, qui peut être représenté par le tableau de ses clés:

// map 'height' to the first and 'width' to the second param
binding = ['height', 'width']

// take binding and arg object and return aray of args
withNamed = (bnd, o) => bnd.map(param => o[param])

// call f with named args via binding
f(...withNamed(binding, {hight: 1, width: 5}))

Notez les trois ingrédients découplés: la fonction, l'objet avec des arguments nommés et la liaison. Ce découplage permet une grande souplesse d'utilisation de cette construction, où la liaison peut être arbitrairement personnalisée dans la définition de la fonction et arbitrairement étendue au moment de l'appel de la fonction.

Par exemple, vous voudrez peut-être abréger heightet au widthfur het wà mesure de la définition de votre fonction, pour la rendre plus courte et plus propre, tandis que vous voulez toujours l'appeler avec des noms complets pour plus de clarté:

// use short params
f = (h, w) => ...

// modify f to be called with named args
ff = o => f(...withNamed(['height', 'width'], o))

// now call with real more descriptive names
ff({height: 1, width: 5})

Cette flexibilité est également plus utile pour la programmation fonctionnelle, où les fonctions peuvent être arbitrairement transformées avec leur nom de paramètre d'origine perdu.

Venant de Python, cela m'a dérangé. J'ai écrit un wrapper / Proxy simple pour le nœud qui acceptera les objets positionnels et les mots clés.

https://github.com/vinces1979/node-def/blob/master/README.md

Contrairement à ce que l'on croit généralement, les paramètres nommés peuvent être implémentés en JavaScript standard à l'ancienne (pour les paramètres booléens uniquement) au moyen d'une convention de codage simple et soignée, comme illustré ci-dessous.

function f(p1=true, p2=false) {
    ...
}

f(!!"p1"==false, !!"p2"==true); // call f(p1=false, p2=true)

Avertissements:

• L'ordre des arguments doit être conservé - mais le modèle est toujours utile, car il rend évident quel argument réel est destiné à quel paramètre formel sans avoir à chercher la signature de la fonction ou à utiliser un IDE.

• Cela ne fonctionne que pour les booléens. Cependant, je suis sûr qu'un modèle similaire pourrait être développé pour d'autres types en utilisant la sémantique de coercition de type unique de JavaScript.