Tutoriel JavaScript sur la fonction de flèche - Comment déclarer une fonction JS avec la nouvelle syntaxe ES6

Vous avez probablement vu des fonctions fléchées écrites de différentes manières.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

Certains ont des parenthèses autour des paramètres, d'autres non. Certains utilisent des accolades et lereturnmot-clé, d'autres non. L'un s'étend même sur plusieurs lignes, tandis que les autres consistent en une seule ligne.

Fait intéressant, lorsque nous invoquons les fonctions fléchées ci-dessus avec le même argument, nous obtenons le même résultat.

console.log(addTwo(2)); //Result: 4 

Comment savoir quelle syntaxe de fonction fléchée utiliser? C'est ce que cet article va découvrir: comment déclarer une fonction de flèche.

Une différence majeure

Les fonctions fléchées sont une autre façon - plus concise - d'écrire des expressions de fonction. Cependant, ils n'ont pas leur propre liaison avec le thismot clé.

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

Lorsque nous invoquons ces fonctions avec les mêmes arguments, nous obtenons le même résultat.

console.log(addNumbers(1, 2)); //Result: 3 

Il y a une différence syntaxique importante à noter: les fonctions fléchées utilisent la flèche =>au lieu du functionmot - clé. Il y a d'autres différences à prendre en compte lorsque vous écrivez des fonctions fléchées, et c'est ce que nous explorerons ensuite.

Parenthèses

Certaines fonctions fléchées ont des parenthèses autour des paramètres et d'autres non.

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

Il s'avère que le nombre de paramètres d'une fonction de flèche détermine si nous devons ou non inclure des parenthèses.

Une fonction fléchée avec zéro paramètre nécessite des parenthèses.

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

Une fonction de flèche avec un paramètre ne nécessite pas de parenthèses. En d'autres termes, les parenthèses sont facultatives.

const addTwo = num => num + 2; 

Nous pouvons donc ajouter des parenthèses à l'exemple ci-dessus et la fonction de flèche fonctionne toujours.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

Une fonction de flèche avec plusieurs paramètres nécessite des parenthèses.

const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 

Les fonctions de flèche prennent également en charge les paramètres de repos et la déstructuration . Les deux fonctionnalités nécessitent des parenthèses.

Voici un exemple de fonction de flèche avec un paramètre de repos .

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

Et en voici un qui utilise la déstructuration .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

Pour résumer: s'il n'y a qu'un seul paramètre - et que vous n'utilisez pas de paramètres de repos ou de déstructuration - les parenthèses sont facultatives. Sinon, assurez-vous de les inclure.

Le corps de fonction

Maintenant que nous avons les règles de parenthèses couvertes, passons au corps de fonction d'une fonction de flèche.

Un corps de fonction de flèche peut avoir un «corps concis» ou un «corps de bloc». Le type de corps influence la syntaxe.

Premièrement, la syntaxe du «corps concis».

const addTwo = a => a + 2; 

La syntaxe du «corps concis» n'est que cela: elle est concise! Nous n'utilisons pas lereturnmot-clé ou accolades.

Si vous avez une fonction de flèche sur une ligne (comme dans l'exemple ci-dessus), la valeur est renvoyée implicitement. Vous pouvez donc omettre lereturnmot-clé et les accolades.

Regardons maintenant la syntaxe du «corps de bloc».

const addTwo = a => { const total = a + 2; return total; } 

Notez que nous utilisons à la fois des accolades et le returnmot - clé dans l'exemple ci-dessus.

Vous voyez normalement cette syntaxe lorsque le corps de la fonction comprend plus d'une ligne. Et c'est un point clé: enveloppez le corps d'une fonction de flèche multiligne entre accolades et utilisez lereturnmot-clé.

Objets et fonctions fléchées

Il y a une autre nuance de syntaxe à connaître: mettez le corps de la fonction entre parenthèses lorsque vous souhaitez renvoyer une expression littérale d'objet.

const f = () => ({ city:"Boston" }) console.log(f().city) 

Sans les parenthèses, nous obtenons une erreur.

const f = () => { city:"Boston" } //Result: error 

Si vous trouvez la syntaxe de la fonction de flèche un peu déroutante, vous n'êtes pas seul. Il faut du temps pour s'y familiariser. Mais être conscient de vos options et exigences sont des étapes dans cette direction.

J'écris sur l'apprentissage de la programmation et les meilleures façons de s'y prendre ( amymhaddad.com).