Un tutoriel sur les fonctions de flèche JavaScript

Les fonctions de flèche sont l'un des changements les plus percutants dans ES6 / ES2015, et elles sont largement utilisées de nos jours. Ils diffèrent légèrement des fonctions régulières. Trouver comment

Les fonctions de flèche ont été introduites dans ES6 / ECMAScript 2015, et depuis leur introduction, elles ont changé à jamais l'apparence (et le fonctionnement) du code JavaScript.

À mon avis, ce changement a été si accueillant que vous voyez maintenant rarement l'utilisation dufunctionmot-clé dans les bases de code modernes. Bien que cela ait toujours son usage.

Visuellement, c'est un changement simple et bienvenu, qui vous permet d'écrire des fonctions avec une syntaxe plus courte, à partir de:

const myFunction = function() {
  //...
}

à

const myFunction = () => {
  //...
}

Si le corps de la fonction ne contient qu'une seule instruction, vous pouvez omettre les crochets et tout écrire sur une seule ligne:

const myFunction = () => doSomething()

Les paramètres sont passés entre parenthèses:

const myFunction = (param1, param2) => doSomething(param1, param2)

Si vous avez un (et un seul) paramètre, vous pouvez omettre complètement les parenthèses:

const myFunction = param => doSomething(param)

Grâce à cette syntaxe courte, les fonctions fléchéesencourager l'utilisation de petites fonctions.

Retour implicite

Les fonctions fléchées vous permettent d'avoir un retour implicite: les valeurs sont renvoyées sans avoir à utiliser lereturnmot-clé.

Cela fonctionne quand il y a une instruction sur une ligne dans le corps de la fonction:

const myFunction = () => 'test'

myFunction() //‘test’

Autre exemple, lorsque vous retournez un objet, n'oubliez pas de placer les accolades entre parenthèses pour éviter qu'il ne soit considéré comme les crochets du corps de la fonction d'habillage:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: ‘test’}

Commentthisfonctionne dans les fonctions fléchées

thisest un concept qui peut être compliqué à appréhender, car il varie beaucoup en fonction du contexte et varie également en fonction du mode de JavaScript (mode strictou non).

Il est important de clarifier ce concept car les fonctions fléchées se comportent très différemment des fonctions régulières.

Lorsqu'il est défini comme une méthode d'un objet, dans une fonction régulièrethisfait référence à l'objet, vous pouvez donc faire:

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

appelcar.fullName()reviendra"Ford Fiesta".

Lethisla portée avec les fonctions fléchées esthéritédu contexte d'exécution. Une fonction de flèche ne se lie pasthisdu tout, donc sa valeur sera recherchée dans la pile d'appels, donc dans ce codecar.fullName()ne fonctionnera pas et renverra la chaîne"undefined undefined":

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

Pour cette raison, les fonctions fléchées ne sont pas adaptées en tant que méthodes objet.

Les fonctions fléchées ne peuvent pas non plus être utilisées comme constructeurs, lors de l'instanciation d'unTypeError.

C'est là que les fonctions régulières doivent être utilisées à la place,quand le contexte dynamique n'est pas nécessaire.

C'est également un problème lors de la gestion des événements. Ensemble d'écouteurs d'événement DOMthisêtre l'élément cible, et si vous comptez surthisdans un gestionnaire d'événements, une fonction régulière est nécessaire:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: