Front-end · 6 mondes · 18 étapes

JavaScript

Le langage du web : types, fonctions, tableaux, objets et asynchrone.

Progression

0 %

0/18 étapes terminées

← Décryptages

Intermédiaire · 10 min de lecture

Fonctions et fermetures

Ce qu'une fonction voit, et ce dont elle se souvient

1Définition

Une fonction est une valeur : on la stocke, on la passe, on la renvoie. Elle voit les variables de l'endroit où elle a été créée, et garde cet accès aussi longtemps qu'elle existe — c'est une fermeture.

2Principes fondamentaux

Renvoyer plutôt qu'afficher

Une fonction qui renvoie son résultat se réutilise et se teste ; une fonction qui l'affiche ne sert qu'une fois.

Fléchées et return implicite

(x) => x * 2 renvoie directement ; avec des accolades, il faut écrire return.

Portée de bloc

let et const n'existent qu'entre les accolades où ils sont déclarés.

Les fermetures protègent

Une variable enfermée dans une fabrique n'est accessible que par les fonctions qu'elle renvoie.

3Exemples pratiques

Une fabrique

Exemple

1function creerCompteur(depart = 0) {2  let compte = depart;3  return {4    plus: () => ++compte,5    valeur: () => compte,6  };7}8 9const c = creerCompteur(10);10c.plus();11console.log(c.valeur());   // 11

compte est privé : on ne peut le lire ou le modifier qu'à travers les deux fonctions renvoyées.

Une fonction en argument

Exemple

1const appliquer = (f, valeurs) => valeurs.map(f);2 3console.log(appliquer((x) => x * x, [1, 2, 3]));   // [1, 4, 9]

map, filter, les gestionnaires d'événements et les hooks de React reposent tous sur ce mécanisme.

4Erreurs courantes

Accolades sans return

À éviter

const aire = (l, h) => { l * h; };

À faire

const aire = (l, h) => l * h;

Pourquoi : Avec des accolades, le résultat est calculé puis perdu : la fonction renvoie undefined.

Appeler une fléchée avant sa définition

À éviter

calcul();const calcul = () => 42;

À faire

const calcul = () => 42;calcul();

Pourquoi : Une fléchée dans un const n'est pas remontée : ReferenceError.

Une fonction qui fait tout

À éviter

function traiter() { /* lit, calcule, affiche, enregistre */ }

À faire

// lire(), calculer(), afficher()

Pourquoi : Une responsabilité par fonction : c'est ce qui rend le code testable.

5Subtilités à connaître

◆Les déclarations function sont remontées en haut de leur portée : on peut les appeler avant la ligne où elles sont écrites.
◆this se comporte différemment dans une fonction fléchée (il est hérité) et dans une fonction classique (il dépend de l'appel).
◆Les valeurs par défaut sont réévaluées à chaque appel : pas de piège du défaut partagé comme en Python.

6Vérifie ta compréhension

Question 1/3

Score 0

Que renvoie (x) => { x * 2 } ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.