Fonctions fléchées en JavaScript : quand utiliser des parenthèses ou des accolades ?

Fonctions fléchées : quand utiliser les parenthèses et les accolades

Les fonctions fléchées, introduites dans ES6, sont une syntaxe concise pour définir des fonctions. Ils utilisent une « grosse flèche » (=>) pour représenter le corps de la fonction. Cependant, il convient de noter que les fonctions fléchées utilisent parfois des accolades ({}), tandis que d'autres utilisent des parenthèses (()).

Parenthèses pour les expressions de retour sur une seule ligne

Lorsque le corps de la fonction flèche est constitué d'une seule expression, des parenthèses sont utilisées pour encadrer l'expression, indiquant que la fonction flèche renvoie uniquement cette valeur. Par exemple :

const a = (who) => `hello ${who}!`;

Ce code définit une fonction de flèche qui renvoie une chaîne. Les parenthèses autour de « bonjour ${who} ! » indique qu'il s'agit d'une expression unique.

Accolades pour les blocs de code multilignes

Les accolades sont utilisées lorsque le corps de la fonction flèche contient plusieurs lignes de code. Chaque ligne représente une instruction et le corps entier devient un bloc de code. Par exemple :

const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
};

Ce code définit un gestionnaire d'événements qui contient deux instructions, d'où la nécessité d'accolades.

Exemples pratiques

Considérez les exemples suivants qui illustrent la différence :

const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);

Parenthèses dans l'objet Littéraux

Une autre utilisation des parenthèses dans les fonctions fléchées consiste à entourer des littéraux d'objet. Ceci est fait pour empêcher l'analyseur de traiter l'objet comme un bloc de code.

const y = () => ({}); // returns an object

Ce code définit une fonction de flèche qui renvoie un objet vide. Les parenthèses garantissent que l'analyseur l'interprète comme un objet littéral, et non comme un bloc de code.

Par conséquent, l'utilisation d'accolades ou de parenthèses dans les fonctions fléchées dépend du fait que le corps de la fonction contient une expression sur une seule ligne ou plusieurs lignes de code. Les parenthèses sont utilisées pour les expressions simples, tandis que les accolades sont utilisées pour les blocs de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!