Que fait exactement la fonction JavaScript anonyme f => f?

101

J'utilise une bibliothèque tierce qui a une fonction qui prend des fonctions comme arguments. Je fais des vérifications conditionnelles pour décider d'ajouter ou non une fonction particulière en tant que paramètre et dans certains cas, je ne veux pas fournir de fonction. Fournir null dans ce cas génère une erreur.

J'ai trouvé ce code qui fonctionne, mais je ne comprends pas complètement ce qui se passe.

compose(__DEV__ ? devTools() : f => f)

Est-ce f => féquivalent à () => {}une fonction anonyme vide?

javascript lambda ecmascript-6

— Quelque chose sur
source

3

Il renvoie un objet littéral de f, selon MDN

— Eli Sadoff

4

pas vide anonyme, c'est identité.

— Davin Tryon

17

FWIW, vous pouvez souvent coller des constructions comme celle-ci dans babel pour voir quels sont les équivalents dans les anciennes versions d'ECMAscript.

— James Thorpe

1

Possible duplication de Quelle est la signification de "=>" (une flèche formée de égale et supérieure à) en JavaScript?

— Leonid Vasilev

Cette réponse à stackoverflow.com/questions/24900875/… ne répond pas directement à cette question. Je savais que f => f était une fonction anonyme que je ne comprenais tout simplement pas exactement ce qu'elle faisait. Je pense que cette question est un cas particulier et les informations fournies par Felix King sur les fonctions d'identité sont propres à cette question.

— SomethingOn

114

f => f est similaire à function(f){ return f; }

Si proche, mais pas tout à fait ce à quoi vous vous attendiez.

_{* - comme cela a été souligné dans les commentaires, il existe des différences subtiles, mais pour le bien de votre question, je ne pense pas qu'elles soient particulièrement pertinentes. Ils sont très pertinents dans d'autres situations.}

— Jamiec
source

2

Je peux penser à au moins deux différences entre f => fet function(f) { return f; }:)

— Benjamin Gruenbaum

6

@BenjaminGruenbaum cool, allez-y - mettez même à jour cette réponse si vous pensez que c'est pertinent.

— Jamiec

4

Je ne pense pas que ce soit très pertinent, juste un pédant: les new (f => f)lancers, cela a un autre toStringet pour une raison quelconque, je ne peux pas vraiment grok les (f => f).argumentslancers dans Chrome mais pas FF ou Edge.

— Benjamin Gruenbaum

5

@BenjaminGruenbaum la manipulation de thisest également différente. (bien que la différence ne soit peut-être pas observable si elle thisn'apparaît pas dans le corps de la fonction ... je ne suis pas sûr)

— Gregory Nisbet

184

f => fest la fonction d'identité . Il renvoie simplement l'argument qui a été transmis.

Cette fonction est souvent utilisée comme valeur par défaut pour les processus de transformation, car elle n'effectue aucune transformation.

Est-ce f => féquivalent à () => {}une fonction anonyme vide?

Non. La fonction vide ne renvoie rien. La fonction d'identité renvoie l'argument passé.

— Félix Kling
source

43

A + pour fournir un nom, une explication et un cas d'utilisation, et répondre à la question réelle.

— Merci

19

Si vous voulez savoir ce que f => fsignifie, le côté gauche est le paramètre et le côté droit est la valeur de retour. Par exemple f => f*2,, équivaut à:

function(f) { 
  return f * 2; 
}

Le code que vous décrivez renvoie tout ce qui lui est fourni en entrée.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

— Yathi
source

9

D'autres ont déjà mentionné ce que f => ffait, alors je ne vais pas approfondir cela. Je vais juste expliquer le reste de la fonction, car il y a une petite différence entre f => fet__DEV__ ? devTools() : f => f

L'opérateur ternaire vérifie si __DEV__est une valeur de vérité, et si c'est le cas, il renvoie la fonction devTools(). sinon, il renvoie la fonction d'identité f => fqui ne fait rien. En d'autres termes: ce code active certaines fonctions du mode développement. Sans le code restant, il est difficile de dire ce que ce mode ajoute, mais vraisemblablement, il activera des informations de journalisation supplémentaires et moins d'obscurcissement.

— Nzall
source

__DEV__ ? devTools() : f => fn'attribue rien à f. Avez-vous omis quelque chose de l'exemple de code?

— Felix Kling

2

Il ne retournera pas la fonction, il retournera le résultat de la fonction

— Stephan Bijzitter

1

Votre avatar m'ennuie et dérange ma journée. J'ai l'impression que les années 90 et mon modem ont perdu la connexion. Toujours, +1 quand même, pour une bonne réponse.

— Konrad Viltersten

@KonradViltersten Vous n'êtes pas le premier à commenter mon avatar. Vous êtes le premier à ne pas aimer ça. La plupart des gens ont apprécié le facteur nostalgique et la petite subversion des attentes qu'il invoque.

— Nzall

1

J'espère que vous avez l'ironie, mon pote. C'était une blague, bien sûr. Évidemment, je l'aime et je le trouve d'une originalité rafraîchissante.

— Konrad Viltersten

9

À tout moment avec le même dilemme, vous pouvez utiliser Babel pour obtenir la réponse.

Il est revenu comme ceci:

"use strict";

(function (f) {
  return f;
});

BTW, => vous avez utilisé la fonction ES6 appelée expression de flèche . L'autre manifestation d'intérêt

() => {};  // es6

se convertirait en:

(function () {});

Étant donné que les expressions de fonction fléchée sont toujours anonymes, il est logique que vous ajoutiez le nom à la fonction:

let empty = () => {}; // es6

se convertirait en

var empty = function empty() {};

— prosti
source