Fonctions fléchées, portée et template literals

Maîtrisez la syntaxe fléchée, la portée de bloc et les closures, puis composez des chaînes dynamiques avec les template literals.

8 min · 3 questions

Les fonctions fléchées sont partout dans le code moderne : callbacks de map et filter, écouteurs d'événements, promesses. Leur force : une syntaxe compacte avec return implicite quand le corps tient sur une expression. Dès que vous ouvrez des accolades, le return redevient obligatoire.

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

La portée détermine où une variable est visible. Avec let et const, une variable déclarée dans un bloc (if, for, accolades) n'existe que dans ce bloc. Autre mécanisme essentiel : une fonction conserve l'accès aux variables de la portée où elle a été créée, même après la fin de cette portée. C'est une closure, et c'est ce qui fait fonctionner compteurs, caches et gestionnaires d'état.

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Les template literals, délimités par des accents graves, remplacent avantageusement la concaténation. Vous injectez une expression avec ${...} et les retours à la ligne sont conservés tels quels, ce qui est idéal pour composer des messages ou des fragments HTML.

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Bonjour ${user.firstName}, vous
avez ${user.cartCount} articles dans votre panier.`;

console.log(message);

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quelle écriture retourne correctement un objet depuis une fonction fléchée en return implicite ?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. Une variable déclarée avec let à l'intérieur d'un bloc if est-elle accessible après ce bloc ?
   • Oui, comme avec var
   • Non, sa portée est limitée au bloc
   • Seulement si elle a été initialisée
3. Quel caractère délimite un template literal ?
   • L'apostrophe simple
   • Le guillemet double
   • L'accent grave (backtick)