Maîtrisez les fonctions fléchées JavaScript (ES6) pour booster vos compétences en développement

JavaScript ES6 a révolutionné le développement web avec des fonctionnalités innovantes. Parmi elles, les fonctions fléchées se distinguent par leur simplicité et leur puissance.

Ces fonctions offrent une syntaxe alternative aux expressions de fonction classiques, facilitant la création de code concis et efficace dans vos applications.

Si vous maîtrisez déjà les fonctions traditionnelles, les fléchées demandent un léger ajustement. Découvrez leur fonctionnement, leurs avantages et des exemples concrets pour les adopter.

Que sont les fonctions fléchées JavaScript ?

Introduites dans ECMAScript 6 (ES6), les fonctions fléchées sont des expressions anonymes similaires aux fonctions classiques, mais avec une syntaxe allégée.

Elles diffèrent par leur liaison de this et leur simplicité. Elles utilisent l'opérateur flèche =>, rappelant les lambdas de Python.

Règles clés :

• Pas de mot-clé function
• return implicite pour les expressions sur une ligne
• Accolades et parenthèses optionnelles selon le contexte

Comparons avec une fonction classique.

Comment utiliser les fonctions fléchées ?

Elles s'intègrent facilement. Prenons une fonction additionnant deux nombres :

// Fonction classique
let addnum = function(num1, num2) {
  return num1 + num2;
};
addnum(1, 2); // 3

Version fléchée :

let addnum = (num1, num2) => num1 + num2;
addnum(1, 2); // 3

Syntaxe épurée, même résultat avec moins de boilerplate.

Caractéristiques des fonctions fléchées

Elles brillent par leur polyvalence.

Fonctions standards

Pour un argument, pas de parenthèses :

let square = x => x * x;
square(2); // 4

Sans argument, parenthèses vides :

let helloFunction = () => console.log("Bonjour lecteur !");
helloFunction(); // Bonjour lecteur !

Gestion de this

Les fléchées héritent de this de la portée englobante, évitant les pièges classiques.

Exemple classique verbeux :

function Personne() {
  var that = this;
  this.age = 0;
  setInterval(function() {
    that.age++;
  }, 1000);
}

Avec fléchée, plus simple :

function Personne() {
  this.age = 0;
  setInterval(() => {
    this.age++;
  }, 1000);
}

Attention : évitez-les comme méthodes d'objet, car this ne pointe pas sur l'objet.

let pizza = {
  toppings: 5,
  removeTopping: () => {
    this.toppings--; // Ne fonctionne pas
  }
};
pizza.removeTopping(); // toppings reste 5

Travail avec les tableaux

Idéales pour map(), filter(), etc. :

let myArray = [1, 2, 3, 4];
myArray.map(el => el + 1); // [2, 3, 4, 5]

Création de littéraux d'objet

Pour retourner un objet, entourez d'accolades dans des parenthèses :

let createArrowObject = (first, last) => ({ first, last });

Fonctions fléchées JavaScript et au-delà

Elles simplifient la syntaxe, améliorent this, facilitent les tableaux et objets. ES6 élève JavaScript au rang de langage incontournable.

Approfondissez avec nos ressources sur les frameworks JavaScript, l'aide-mémoire JS et les bases pour exceller en développement web.