Voici un autre cas qui m'a posé des problèmes.
// the "tricky" way
const wrap = (foo) => (bar) => {
if (foo === 'foo') return foo + ' ' + bar;
return 'nofoo ' + bar;
}
Ici, nous définissons une fonction retournant une fonction anonyme. Le point "délicat" est que le corps de la fonction externe (la partie commençant par (bar) => ...) ressemble visuellement à un "bloc", mais ce n'est pas le cas. Comme ce n'est pas le cas, le retour implicite entre en jeu.
Voici comment wrap s'exécuterait:
// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));
// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));
La façon dont j'ai déballé ceci pour m'assurer que je comprenais c'était de "désarrimer" les fonctions.
Voici l'équivalent sémantique du premier bloc de code, faisant simplement que le corps de wrap () fasse un retour explicite. Cette définition produit les mêmes résultats que ci-dessus. C'est là que les points se connectent. Comparez le premier bloc de code ci-dessus avec celui ci-dessous, et il est clair qu'une fonction de flèche elle-même est traitée comme une expression, pas un bloc, et a le retour implicite .
// the explicit return way
const wrap = (foo) => {
return (bar) => {
if (foo === 'foo') return foo + ' ' + bar;
return 'nofoo ' + bar;
}
}
La version entièrement non fléchée de wrap serait comme ça, qui, bien que pas aussi compacte que la version grosse flèche vers le haut, semble beaucoup plus facile à comprendre.
// the "no arrow functions" way
const wrap = function(foo) {
return function(bar) {
if (foo === 'foo') return foo + ' ' + bar;
return 'nofoo ' + bar;
};
};
En fin de compte, pour les autres qui devront peut-être lire mon code, et à l'avenir moi, je pense que je préférerais aller à la version sans flèche qui peut être comprise visuellement à première vue, plutôt que la version flèche qui prend un peu de pensé (et dans mon cas l'expérimentation) à grok.