Fonctions JavaScript, portée et fermetures

Une fonction donne un nom à une tâche et enregistre les instructions nécessaires pour l’accomplir. La définir n’exécute pas ces instructions. Un appel les exécute, et un autre appel les exécute à nouveau avec de nouvelles entrées.

Écris la définition

Une déclaration comporte le mot-clé function, un nom, des parenthèses pour les paramètres et des accolades pour le corps :

function greet(name) {
  console.log("Hello, " + name + "!");
}

Ici, name est un paramètre : un nom local pour l’entrée fournie par chaque appel. Le corps joint cette entrée au texte qui l’entoure et affiche le résultat. L’accolade fermante marque la fin de la définition ; l’exécution se poursuit avec l’instruction suivante à l’extérieur de celle-ci.

Une fonction sans entrée a tout de même besoin de parenthèses. Par exemple, function sayHi() { console.log("Hi"); } définit une tâche avec une liste de paramètres vide. Les accolades appartiennent à la définition ; les parenthèses après un nom figurent à la fois dans les définitions et dans les appels, avec des rôles différents.

Exécute la tâche

greet("Amira");
greet("Li");

Le premier appel donne à name la valeur "Amira" et affiche « Hello, Amira! ». Le second lance un nouvel appel avec name égal à "Li" et affiche « Hello, Li! ». La définition est partagée ; l’entrée appartient à chaque appel.

greet seul fait référence à la valeur de la fonction. Il n’exécute pas le corps. Cette distinction compte lorsqu’une ligne semble ne rien faire : sayHi; lit une valeur de fonction et l’ignore, tandis que sayHi(); affiche « Hi ».

Remplace les instructions copiées

Supposons que plusieurs rapports aient besoin d’un titre entouré de lignes :

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

Le premier appel affiche une ligne, « Report », puis une autre ligne. Le second affiche le même encadrement autour de « Totals ». Pour changer le style des lignes, modifie les deux instructions qui les affichent dans cette seule définition. Sans la fonction, chaque titre copié devrait être corrigé séparément.

Choisis un nom qui indique ce que fait un appel. printHeading décrit une action ; isValidEmail nomme une vérification dont la réponse est oui ou non. Utilise camelCase, avec un premier mot en minuscules et une majuscule au début des mots suivants. Si un nom proposé relie deux tâches distinctes par « et », envisage de donner à chaque tâche sa propre fonction.

Lis du code qui appelle une déclaration avant son emplacement

Les déclarations sont mises en place avant l’exécution du code qui les entoure. Ce comportement s’appelle la remontée des déclarations :

sayHi();
function sayHi() {
  console.log("Hi");
}

L’appel fonctionne dans la portée de la déclaration, même si la définition est écrite plus loin. La remontée des déclarations n’exécute pas le corps plus tôt ; elle rend la fonction disponible pour un appel.

Vérifie l’orthographe et les majuscules lorsqu’un appel échoue. Greet() et greet() sont des noms différents. Appeler un greeet() non déclaré provoque une ReferenceError ; oublier les parenthèses d’appel peut échouer silencieusement, car lire une fonction existante est un code valide.

Les fonctions sont des valeurs. Tu peux en conserver une dans une variable, copier sa référence, la passer à une autre fonction ou la renvoyer. Une expression de fonction crée cette valeur là où une expression est attendue.

Stocke une fonction

const square = function (n) {
  return n * n;
};

const answer = square(4);

L’expression après = crée une fonction. L’affectation la stocke dans square ; l’appel qui suit renvoie 16. Cette instruction se termine par un point-virgule, conformément à la convention de mise en forme utilisée ici.

La position de function distingue les formes. Une définition écrite seule sous la forme function square(n) { ... } est une déclaration. Une fonction écrite après = ou directement comme argument d’un appel est une expression. Les deux formes de fonction ordinaire peuvent accepter des paramètres et renvoyer des valeurs.

Utilise const pour une variable contenant une fonction lorsque sa valeur doit rester la même. Appeler square(5) est autorisé ; l’affectation square = 5; provoque une TypeError. La constante protège la variable contre son remplacement. Elle n’empêche pas les appels répétés.

Conserve une fonction ou son résultat

const sq = square;
const result = square(3);

sq fait référence à la même fonction que square. Appeler sq(3) renvoie 9. result contient le nombre 9 renvoyé par un appel. Il ne peut pas être appelé comme une fonction. typeof square et typeof sq valent "function" ; typeof result vaut "number".

Lire une affectation de droite à gauche aide à la comprendre : détermine d’abord si son membre de droite crée une fonction, fait référence à une fonction existante ou en appelle une. La variable de gauche reçoit cette valeur. Copier la référence ne crée pas une deuxième implémentation indépendante.

Attends l’exécution de l’affectation

Une déclaration et une expression stockée ne deviennent pas appelables au même moment :

Avec const ou let, le nom ne peut pas être utilisé avant l’initialisation. Avec var, le nom existe dès le début, mais la valeur de fonction n’est affectée que lorsque l’exécution atteint l’expression. La remontée de la variable ne fait pas remonter l’affectation.

Donne un nom interne à une expression

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

Le nom extérieur est factorial. Le nom fact appartient à la fonction et lui permet de s’appeler elle-même ; le code extérieur ne peut pas utiliser directement ce nom interne. Le nom de l’expression peut aussi faciliter la lecture des traces de pile. Par exemple, factorial(3) calcule 3 fois 2 fois 1 et renvoie 6.

Les déclarations conviennent bien aux principales tâches nommées d’un script. Les expressions conviennent aux endroits où le code a besoin d’une valeur de fonction, comme une affectation à une variable ou un argument. Choisir une expression change la manière dont la valeur est créée et stockée, mais pas la manière dont les parenthèses l’appellent.

Les fonctions fléchées sont des expressions de fonction dont l’écriture est plus courte. Ce qu’elles renvoient dépend de ce qui suit la flèche : examine donc le corps avant de déterminer ce que produit un appel.

Choisis la forme des paramètres

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

Sans paramètre, des parenthèses vides sont nécessaires. Avec un seul paramètre simple, les parenthèses peuvent être omises. À partir de deux paramètres, elles sont obligatoires. Un paramètre par défaut ou du reste exige aussi des parenthèses : (n = 1) => n * 2 et (...nums) => nums.length sont valides.

La flèche sépare les entrées du corps. const double = n => n * 2; crée la fonction et la stocke ; double(6) l’appelle ensuite et renvoie 12. Comme toute variable const contenant une expression de fonction, double ne peut pas être lue avant l’exécution de sa ligne d’initialisation.

Renvoie une expression ou écris un bloc

Un corps concis renvoie automatiquement son expression. Des accolades ouvrent un bloc d’instructions. Dans un bloc, évaluer une expression ne la renvoie pas au code appelant ; écris return explicitement.

Utilise un bloc lorsque la tâche nécessite des étapes intermédiaires :

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

Pour describe(7), la condition est fausse, donc kind prend la valeur "odd". L’instruction de retour réunit ensuite le nombre et les mots pour former « 7 is odd ». Supprimer ce retour conserverait le calcul local, mais fournirait undefined au code appelant.

Renvoie un littéral d’objet

Un littéral d’objet utilise lui aussi des accolades. Entoure-le de parenthèses pour que l’analyseur syntaxique le traite comme une expression :

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) renvoie un objet dont x vaut 2 et y vaut 5. Sans les parenthèses, la première accolade ouvre un bloc. La forme à une propriété () => { value: 1 } renvoie undefined ; la forme similaire à deux propriétés séparées par une virgule produit une erreur de syntaxe. Les parenthèses changent la manière dont le corps est interprété.

Connais les limites de la forme courte

Les fonctions fléchées n’ont pas leur propre this ni leur propre arguments, et elles ne peuvent pas être appelées avec new pour construire des objets. Pour un calcul simple qui n’utilise ni this ni arguments, une fonction fléchée et une expression de fonction ordinaire se comportent de la même manière. Remplacer toutes les fonctions ordinaires par des fonctions fléchées peut modifier le comportement du code qui dépend de ces caractéristiques.

Les fonctions fléchées courtes sont particulièrement lisibles comme fonctions de rappel. [1, 2, 3].map(n => n * 10) transmet une fonction qui renvoie un élément transformé, ce qui produit [10, 20, 30]. La remplacer par n => { n * 10; } fait perdre silencieusement chaque valeur de retour.

Les paramètres d’une fonction donnent des noms aux valeurs fournies par un appel. Pour suivre un appel, fais d’abord correspondre les entrées selon leur position, puis suis les opérations dans le corps.

Fais correspondre les positions et les types

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width et height sont des paramètres ; 4 et 2,5 sont des arguments. Pendant cet appel, width contient 4 et height contient 2,5 : le résultat est donc 10. Les noms des paramètres ne correspondent pas à ceux des variables du code appelant. Avec divide(a, b), remplacer divide(10, 2) par divide(2, 10) fait passer le résultat de 5 à 0,2.

JavaScript n’impose pas de nombre d’arguments. area(4) laisse height à undefined ; multiplier par cette valeur produit NaN. area(4, 2, 99) renvoie 8 parce que ce corps n’utilise pas le troisième argument. Une fonction peut choisir de regrouper les arguments supplémentaires, mais ceux qui ne sont pas utilisés ne provoquent pas automatiquement d’erreur.

Les types comptent aussi, même lorsque l’appel est accepté. area("4", 2) renvoie 8 parce que la multiplication convertit le texte. Une fonction d’addition se comporte différemment : add("4", 2) renvoie « 42 » lorsque son corps est return a + b;. Si le texte représente un nombre, add(Number("4"), 2) renvoie 6.

Réaffecte un paramètre local

Chaque paramètre est local à son appel. Lui affecter un nouveau nombre ne réaffecte pas la variable du code appelant :

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

L’appel copie la valeur 5 dans s. L’affectation donne à s la valeur 0, et score reste égal à 5. Les nombres, les chaînes de caractères et les booléens suivent cette règle de copie de valeur. Le code extérieur ne peut pas lire s directement ; une fonction imbriquée peut en conserver l’accès grâce à une fermeture.

Modifie un tableau à travers une référence copiée

Une valeur de tableau est une référence à un tableau. Transmettre cette valeur copie la référence, de sorte que le code appelant et le paramètre peuvent accéder au même tableau :

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

list vaut maintenant [1, 2, 3]. La fonction n’a pas réaffecté list ; elle a modifié le tableau auquel les deux noms donnent accès. Une déclaration const empêche de remplacer la référence stockée, mais pas de modifier le contenu du tableau.

Compare avec une réaffectation locale :

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

Cela fait pointer uniquement arr vers un nouveau tableau vide. list donne toujours accès à [1, 2, 3]. Demande-toi si une opération modifie un tableau existant, comme le fait push, ou donne une autre valeur à un nom, comme le fait =.

Renvoie un nouveau tableau lorsque l’entrée doit rester intacte

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) produit un nouveau tableau, [1, 2, 3]. Le tableau d’entrée reste [1, 2]. Cela rend la fonction utile lorsque le code appelant a besoin à la fois de l’ancienne liste et de la liste complétée. Indique par le nom et le comportement d’une fonction les modifications qu’elle est censée apporter à ses entrées, afin que le code appelant puisse l’utiliser de manière prévisible.

Les valeurs par défaut rendent une entrée facultative ; les paramètres du reste permettent à un appel de fournir de nombreuses entrées. La syntaxe de décomposition relie un tableau existant à une fonction qui attend des arguments distincts.

Applique une valeur par défaut uniquement pour undefined

function greet(name = "friend") {
  return "Hello, " + name;
}

greet() et greet(undefined) renvoient tous deux « Hello, friend ». greet(null) renvoie « Hello, null » et greet("") renvoie « Hello, ». Une valeur par défaut est utilisée pour undefined, mais pas pour toute valeur qui semble vide.

Les valeurs par défaut sont évaluées lorsqu’un appel en a besoin. Elles peuvent utiliser les paramètres précédents : function makeBox(width, height = width) { return width * height; } renvoie 9 pour makeBox(3) et 12 pour makeBox(3, 4). Le deuxième argument explicite remplace la valeur par défaut pour cet appel.

Place d’abord les entrées obligatoires. Avec function total(amount, rate = 0.25) { return amount + amount * rate; }, total(80) renvoie 100 et total(80, 0.5) renvoie 120. Inverser les paramètres obligerait à écrire total(undefined, 80) pour effectuer l’appel courant qui utilise le taux par défaut.

Le code ancien peut utiliser level = level || 50;. Cela remplace aussi 0, false et une chaîne vide, car ce sont des valeurs fausses. Un paramètre par défaut conserve ces valeurs : function setVolume(level = 50) { return level; } renvoie 0 pour setVolume(0) et 50 pour setVolume(undefined).

Regroupe les arguments avec le reste

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) place [1, 2, 3] dans numbers et renvoie 6. sum() lui fournit un tableau vide : la boucle n’ajoute donc rien et la fonction renvoie 0. Un paramètre du reste est un véritable tableau, prêt à être parcouru ou utilisé avec les méthodes de tableau.

Une entrée fixe peut précéder le reste : dans function log(label, ...values) { console.log(label, values); }, log("scores", 7, 9) donne à label la chaîne « scores » et à values le tableau [7, 9]. Un seul paramètre du reste est autorisé et il doit être placé en dernier ; sinon, JavaScript ne peut pas affecter les arguments restants sans ambiguïté avec cette syntaxe.

Décompose les arguments

Math.max(...[3, 7, 2]) reçoit trois nombres et renvoie 7. Math.max([3, 7, 2]) reçoit un tableau et renvoie NaN. Les trois points sont identiques à l’écrit, mais la syntaxe qui les entoure indique leur rôle.

Les fonctions ordinaires possèdent aussi un objet arguments contenant les arguments qui leur sont transmis. Il ressemble à un tableau, avec des entrées indicées et une longueur, mais ce n’est pas un véritable tableau et il ne possède pas ses propres méthodes map ou filter. Les fonctions fléchées n’ont pas leur propre arguments. Pour un nouveau code qui a besoin d’une liste d’entrées de longueur variable, privilégie un paramètre du reste.

Une valeur de retour est la sortie que le code reçoit d’un appel. L’affichage peut montrer la même valeur à l’écran, mais il donne au code appelant un résultat différent, sauf si la fonction renvoie aussi cette valeur.

Utilise l’appel comme une valeur

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) renvoie 10 : l’affectation calcule donc 10 plus 1 et stocke 11. Un appel peut apparaître partout où une valeur appropriée est nécessaire. double(double(3)) obtient d’abord 6 de l’appel intérieur, puis renvoie 12 depuis l’appel extérieur. Math.round(double(2.3)) double la valeur pour obtenir 4,6 et l’arrondit à 5.

return termine aussi immédiatement l’appel en cours. Une clause de garde traite un cas particulier avant le traitement principal :

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) renvoie null et n’atteint jamais la division. safeDivide(6, 2) passe la clause de garde et renvoie 3. Place la condition avant l’opération qu’elle protège.

Distingue le résultat de l’affichage

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) affiche 5, mais sa valeur de retour est undefined. Par conséquent, addLog(2, 3) * 2 affiche 5 et vaut NaN. Une fonction qui atteint sa fin sans retour ou exécute un simple return; renvoie undefined. L’affichage dans la console est un effet de bord, et non le résultat numérique exploitable de l’appel.

Si le code appelant a besoin d’une somme, écris return a + b;. Il peut alors choisir de l’afficher, de la stocker ou de l’utiliser dans un autre calcul. Les décisions d’affichage restent ainsi séparées d’un calcul réutilisable.

Garde l’expression renvoyée sur la même ligne

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript termine l’instruction return au passage à la ligne. La fonction renvoie undefined ; l’expression suivante n’est jamais atteinte. Pour une longue expression, commence-la ou ouvre une parenthèse sur la ligne de return, puis poursuis en dessous.

Regroupe plusieurs résultats dans une valeur

Un appel renvoie une valeur, mais cette valeur peut être un tableau :

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

Le tableau renvoyé est [1, 9]. La déstructuration affecte son premier élément à low et son second à high. Il y a toujours une seule valeur renvoyée, qui contient deux résultats utiles.

Une fonction pure calcule sa sortie à partir de ses arguments et ne modifie rien à l’extérieur d’elle-même. double est pure. Afficher une valeur, mettre à jour une variable extérieure et modifier un tableau d’entrée sont des effets de bord. Les calculs purs sont faciles à vérifier avec des exemples d’entrées et de sorties ; place les effets de bord dans des fonctions clairement nommées là où le programme a besoin de changements visibles.

Lorsqu’une fonction en appelle une autre, la fonction appelante se met en pause jusqu’au retour de cet appel. La pile d’appels conserve la trace du travail inachevé pour que l’exécution puisse reprendre au bon endroit.

Ajoute et retire des cadres de pile

Chaque appel actif possède un cadre de pile qui contient ses paramètres, ses variables locales et l’endroit où reprendre après son retour. Un nouvel appel est placé au sommet de la pile ; un retour retire ce cadre supérieur.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

D’abord, sumOfSquares commence avec a égal à 3 et b égal à 4. Elle appelle square(3), qui renvoie 9 et se termine. Puis square(4) s’exécute et renvoie 16. L’addition en pause peut alors se terminer : 9 plus 16, et sumOfSquares renvoie 25. Les deux appels de square ne se chevauchent pas dans ce suivi.

Chaque appel reçoit des paramètres et des variables locales créés pour lui. Appeler deux fois la même fonction ne réutilise pas l’état numérique local d’un appel précédent. Même lorsqu’une fonction s’appelle elle-même, le nouvel appel possède son propre cadre.

Réduis un problème par récursivité

Une fonction récursive s’appelle elle-même. Un cas de base se termine sans nouvel appel à elle-même ; un cas récursif se rapproche de ce cas de base.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

Pour des entrées entières positives ou nulles, cette fonction multiplie les entiers jusqu’à 1. Suis factorial(4) dans les deux sens :

1. factorial(4) attend factorial(3).
2. Cet appel attend factorial(2).
3. Cet appel attend factorial(1).
4. Le cas de base renvoie 1.
5. Les appels en attente renvoient 2, puis 6, puis 24.

La multiplication dans l’appel où n vaut 4 a lieu après le retour de l’appel portant sur le problème plus petit. Son propre n est resté égal à 4 pendant l’attente.

Un cas de base doit pouvoir être atteint. Utiliser seulement n === 1 échoue pour une entrée initiale de 0 si chaque appel récursif soustrait 1 : les valeurs deviennent négatives et n’atteignent jamais 1. n <= 1 prend en compte à la fois 0 et 1. Sans chemin permettant l’arrêt, les appels répétés épuisent la pile. Chrome et Node.js indiquent « RangeError: Maximum call stack size exceeded » ; Firefox utilise « InternalError: too much recursion ».

Reconnais une version plus petite de la même tâche

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) renvoie 5. Pour chaque tableau imbriqué, la même question de comptage se pose sur une liste plus petite. Une boucle convient aussi pour une factorielle simple ; la récursivité est particulièrement utile lorsque les données elles-mêmes sont imbriquées.

Si un appel échoue, lis la trace de pile en commençant par l’appel le plus récent, en haut. Les entrées suivantes montrent quels appels encore inachevés y ont conduit. Des entrées répétées pour une fonction peuvent révéler une récursivité qui ne s’est pas arrêtée.

La portée d’une variable est la partie du code où son nom peut être utilisé. La portée permet aux fonctions de garder leurs données de travail séparées tout en utilisant des entrées et des valeurs du code environnant.

Délimite les portées des déclarations

let et const ont une portée de bloc. Un bloc est une partie du code entre accolades, comme un corps if, un corps de boucle ou un corps de fonction :

if (true) {
  const msg = "hi";
  console.log(msg);
}

L’affichage fonctionne à l’intérieur du bloc. Ajouter console.log(msg); après celui-ci provoque une ReferenceError, car ce code extérieur ne peut pas accéder à cette déclaration. Une autre déclaration extérieure portant le même nom désignerait une variable différente.

Les paramètres et les variables à l’intérieur d’une fonction sont locaux à celle-ci. Dans function f() { let temp = 1; }, le code extérieur ne peut pas lire temp. Deux fonctions peuvent chacune avoir une variable locale total sans la partager. Chaque appel commence avec de nouvelles variables locales ; une fonction imbriquée renvoyée peut ensuite en conserver l’accès grâce à une fermeture.

Lis les anciennes déclarations avec var

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() renvoie 1 parce que var ignore la limite du bloc if. Le remplacer par let x = 1; fait échouer le retour : le x du bloc n’est pas disponible à cet endroit. De même, for (let i = 0; i < 3; i++) {} garde i dans la boucle, tandis qu’un var i reste disponible dans la fonction ou le script qui l’entoure après la boucle et vaut 3.

Cherche vers l’extérieur depuis l’endroit où la fonction est écrite

Les portées s’imbriquent. Une fonction intérieure peut utiliser les noms des portées qui l’entourent, mais le code extérieur ne peut pas chercher dans les variables locales d’une fonction intérieure. C’est la portée lexicale : l’endroit où le code est écrit détermine les noms disponibles.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() renvoie « global ». show a été définie en dehors de run, donc la portée qui l’entoure contient le level extérieur. L’appeler depuis run ne lui donne pas accès au level local de la fonction appelante.

Gère volontairement l’état partagé

Une variable de niveau supérieur dans un script classique est globale et les fonctions de ce script peuvent y accéder. Les variables globales partagées peuvent amener des tâches indépendantes à agir les unes sur les autres ; les scripts d’une même page peuvent aussi entrer en conflit sur les noms. Transmettre des entrées et renvoyer des sorties rend les dépendances visibles.

Déclare chaque variable. En mode strict, count = 5; provoque une ReferenceError si aucune déclaration accessible n’existe. Sans mode strict, une telle affectation peut créer une variable globale par accident. Un script peut activer le mode strict avec "use strict"; à son début ; les modules l’activent automatiquement. Privilégie const pour les valeurs qui ne sont pas réaffectées et let lorsqu’une réaffectation est nécessaire.

Un même nom peut apparaître dans plusieurs portées. JavaScript trouve la déclaration pertinente en cherchant vers l’extérieur à partir du code courant et en s’arrêtant à la première correspondance.

Suis la chaîne de portées

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() renvoie 2. La déclaration locale masque le x extérieur : la recherche s’arrête donc dans f. La valeur extérieure reste égale à 1. Un paramètre peut masquer un nom de la même manière. Si aucune portée de la chaîne ne déclare un nom, sa lecture provoque une ReferenceError.

Une affectation ne déclare pas de nouvelle variable. Avec let count = 0; function add() { count = count + 1; }, add trouve la déclaration extérieure et la modifie. Insérer let change le sens : cela crée un nouveau nom local, qui peut masquer la valeur même que tu voulais lire.

Distingue l’enregistrement de l’initialisation

La remontée des déclarations décrit la manière dont les déclarations sont enregistrées avant l’exécution de leur portée. Leur comportement au début diffère :

Par exemple, console.log(a); var a = 5; affiche undefined. L’affectation de 5 n’a pas encore eu lieu. console.log(b); let b = 5; échoue en revanche. La période pendant laquelle le nom lexical existe mais n’est pas accessible est sa zone morte temporaire, souvent abrégée en TDZ.

Suis le masquage avant une ligne de déclaration

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

Le n intérieur masque le nom extérieur dans tout le corps de la fonction, y compris avant la ligne où la déclaration est écrite. À console.log(n), ce nom intérieur est encore dans sa zone morte temporaire : l’appel provoque donc une ReferenceError. JavaScript n’ignore pas une déclaration locale non initialisée pour utiliser la valeur extérieure 10.

Le même problème apparaît dans let count = count + 1; à l’intérieur de add. Le membre de droite lit le nouveau count local avant son initialisation. Si l’intention est de mettre à jour un compteur extérieur, utilise une affectation sans nouvelle déclaration. Si l’intention est de calculer une valeur distincte, donne-lui un nom différent et lis explicitement le compteur extérieur.

Distingue la réaffectation de la mutation

let et const ne peuvent pas déclarer à nouveau le même nom dans une portée ; cela provoque une SyntaxError. Une portée intérieure peut déclarer son propre nom : c’est le masquage. var autorise les déclarations répétées dans sa portée, ce qui rend la réutilisation accidentelle d’un nom plus difficile à remarquer.

const empêche la réaffectation de sa variable. Il ne fige pas un tableau :

const list = [];
list.push(1);

La référence stockée dans list reste la même tandis que le tableau devient [1]. list = []; tenterait de remplacer la référence stockée et échouerait.

Place une déclaration dans la plus petite portée où elle est nécessaire. Des noms distincts pour des tâches distinctes réduisent le besoin de suivre mentalement le masquage, et initialiser les variables avant leur utilisation évite les erreurs liées à la zone morte temporaire.

Une fonction conserve un lien vers la portée où elle a été créée. La fonction et cet accès conservé forment une fermeture. Ce lien devient particulièrement utile lorsqu’une fonction imbriquée est renvoyée puis appelée après la fin de son appel extérieur.

Donne une mémoire à une fonction renvoyée

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

L’appel de makeCounter crée count, crée une fonction intérieure, puis renvoie cette fonction. Il n’exécute pas encore le corps intérieur. counter contient maintenant la valeur de la fonction. Son premier appel fait passer le count conservé de 0 à 1 et renvoie 1. Son appel suivant donne à la même variable la valeur 2 et renvoie 2.

Le cadre de pile de l’appel extérieur s’est terminé, mais la variable capturée reste accessible. Une variable locale qui n’a plus aucune utilisation accessible peut être libérée ; ici, la fonction intérieure appelable en a encore besoin. L’accès par la fermeture subsiste après un retour sans rendre la variable globale.

Crée des mémoires indépendantes avec des appels distincts

const a = makeCounter();
const b = makeCounter();
a();
a();
b();

Les résultats sont 1, 2 et 1. Chaque appel de la fabrique a créé un count différent. Les deux fonctions renvoyées par des appels distincts ont le même code, mais des environnements conservés différents.

Copier une référence à une fonction renvoyée fonctionne autrement. Avec const alias = a;, alias() utilise le compteur existant de a ; il n’appelle pas makeCounter et ne crée pas un autre environnement.

Conserve les variables, et non des instantanés

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() renvoie « Hello ». La fermeture lit la variable lorsqu’elle s’exécute : une mise à jour ultérieure est donc visible. Elle ne stocke pas une copie figée de « Hi » au moment de sa création.

Le code extérieur ne peut pas accéder directement au count local, et counter.count vaut undefined. Seul le code qui a accès à cet environnement lexical peut le lire ou le mettre à jour. Appeler le compteur depuis une autre fonction ne change pas le compteur qu’il utilise.

Partage un état au sein d’un même appel extérieur

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() renvoie 70 parce que les deux fonctions renvoyées ont été créées lors du même appel et font référence au même balance. Un autre appel de makeWallet() crée un solde distinct.

Une fabrique de fonctions utilise l’accès conservé par une fermeture pour créer des fonctions dotées de leurs propres réglages ou de leur propre état. Le code appelant fournit la configuration une fois, puis utilise la fonction renvoyée à plusieurs reprises.

Configure une fonction avec un paramètre

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) renvoie 10 et triple(5) renvoie 15. Chaque fonction fléchée renvoyée conserve le factor de son propre appel de fabrique. La fonction extérieure configure le comportement ; la fonction intérieure effectue le travail répété.

La forme compacte est const makeMultiplier = (factor) => (n) => n * factor;. Deux flèches signifient deux créations de fonctions, et non deux calculs consécutifs sur un même nombre. makeMultiplier(4)(5) renvoie d’abord une fonction configurée avec 4, puis l’appelle avec 5 pour obtenir 20.

Fais respecter une règle autour d’un état privé

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

Les trois premiers appels renvoient true et incrémentent used. Le quatrième renvoie false avant l’incrémentation. used est locale à l’appel de la fabrique : le code extérieur ne peut donc pas la réinitialiser sous ce nom. La fonction renvoyée contrôle les modifications possibles. Un autre limiteur aurait sa propre variable used et son propre maximum.

Analyse les fonctions créées dans des boucles

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

La boucle crée trois fonctions, mais un seul var i. Après la boucle, cette variable vaut 3. Appeler n’importe quelle fonction stockée renvoie alors 3 parce que chaque fermeture lit la même liaison courante. Créer une fonction n’évalue pas son corps et ne prend pas un instantané du i courant.

Remplacer l’en-tête par let i = 0 donne à la boucle une liaison distincte pour chaque itération. Les fonctions stockées renvoient alors 0, 1 et 2. La même distinction explique l’affichage différé : une fonction de rappel setTimeout qui lit var i après la boucle voit la valeur finale, tandis que la version avec let conserve la valeur de chaque itération.

Reconnais une expression immédiatement invoquée

Le code ancien crée souvent une portée de fonction privée et l’exécute immédiatement :

(function () {
  var hidden = 1;
  console.log(hidden);
})();

C’est une expression de fonction immédiatement invoquée, ou IIFE. Les parenthèses extérieures produisent une expression de fonction ; les parenthèses finales l’appellent. hidden appartient à cette fonction et reste ainsi hors de la portée globale environnante. C’est un motif courant dans le code écrit avant les déclarations à portée de bloc et les modules.

L’accès conservé a aussi un effet sur la mémoire. Une fermeture appelable qui a besoin d’un grand tableau garde ces données accessibles. Lorsque la fonction et ses données capturées ne sont plus accessibles, elles peuvent être libérées. Stocke les fermetures de longue durée de manière réfléchie lorsque leur mémoire fait partie de la tâche.

Une fonction de rappel est une fonction fournie comme argument pour qu’une autre fonction l’appelle. Elle permet à la fonction qui la reçoit de gérer la tâche générale tandis que le code appelant fournit une action ou un test particulier.

Passe une action à une boucle

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat contient la boucle et choisit les valeurs 0, 1 et 2. La fonction fléchée définit quoi faire de chaque valeur : l’afficher. Chaque action(i) appelle la fonction fournie avec le numéro de l’itération.

Tu peux transmettre une fonction existante ou en écrire une directement sur place. repeat(2, sayHi) transmet la fonction nommée. repeat(2, (i) => console.log("Round " + (i + 1))) affiche « Round 1 » et « Round 2 ». Une fonction de rappel peut ignorer les arguments dont elle n’a pas besoin.

Transmets la valeur sans appeler la fonction trop tôt

repeat(3, sayHi()) évalue sayHi() pendant la préparation des arguments. Si sayHi ne fait qu’afficher du texte, sa valeur de retour est undefined : repeat reçoit donc cette valeur comme action. L’appel ultérieur action(i) échoue avec une TypeError parce que undefined n’est pas appelable.

Utilise repeat(3, sayHi) pour transmettre la fonction. Si l’appel final nécessite des arguments choisis, transmets une fonction enveloppante comme () => sayHi() afin que l’appel ait lieu dans le corps de la fonction de rappel. La création et l’invocation d’une fonction sont deux étapes distinctes.

Vérifie les arguments fournis par la fonction qui reçoit la fonction de rappel

Les fonctions de rappel des tableaux reçoivent souvent plusieurs arguments : l’élément, l’indice et le tableau entier. Transmettre une fonction existante n’est sûr que si ces entrées correspondent au sens de ses paramètres.

["1", "2", "3"].map(parseInt);

Cela renvoie [1, NaN, NaN]. parseInt accepte un deuxième argument pour la base de numération : l’indice du tableau change donc son comportement. Utilise ["1", "2", "3"].map((s) => parseInt(s, 10)) pour choisir explicitement la base 10, ou .map(Number) pour convertir ces chaînes.

Renvoie une réponse à la fonction qui reçoit la fonction de rappel

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) renvoie 3. La fonction de rappel répond à une question pour chaque élément ; countIf utilise chaque réponse pour décider s’il faut incrémenter le compteur. Compare avec repeat, dont la boucle ignore la valeur de retour de la fonction de rappel. Le code ou la documentation de la fonction qui reçoit la fonction de rappel indique les arguments et le rôle du résultat.

Les fonctions de rappel peuvent s’exécuter immédiatement ou plus tard. repeat et les méthodes de tableau les appellent de manière synchrone avant de renvoyer leur résultat. setTimeout(sayHi, 2000) en planifie une pour plus tard tandis que le code suivant continue immédiatement. L’expression « fonction de rappel » décrit la manière dont une fonction est fournie, et non le moment où elle doit s’exécuter.

Une fonction d’ordre supérieur accepte une fonction, renvoie une fonction, ou les deux. La valeur de fonction fournit un comportement, tandis que la fonction d’ordre supérieur gère un schéma réutilisable.

Écris le schéma une seule fois

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) renvoie [1, 4, 9]. La boucle et la construction du tableau de sortie restent les mêmes ; la fonction de rappel décide comment chaque élément change. Un filtre correspondant ajoute un élément uniquement lorsque test(item) est une valeur vraie. Avec [4, 7, 10, 3] et (n) => n % 2 === 0, ce schéma conserve [4, 10].

Choisis le contrat de fonction de rappel dont tu as besoin

map, filter et find ne modifient pas elles-mêmes le tableau d’entrée, mais les fonctions de rappel peuvent tout de même le modifier. Le fait qu’une méthode renvoie un nouveau tableau ne rend pas pure toute fonction de rappel fournie.

Fais évoluer un résultat par réduction

[5, 10, 15].reduce((total, n) => total + n, 0);

L’accumulateur initial vaut 0. La fonction de rappel renvoie 5 pour le premier élément, 15 pour le deuxième et 30 pour le troisième. Chaque valeur renvoyée devient le total de l’appel suivant. La méthode renvoie 30 après le dernier élément. Un tableau vide sans accumulateur initial fait que reduce provoque une TypeError ; une valeur initiale explicite définit aussi un résultat utile pour une entrée vide.

Le renvoi de tableaux rend le chaînage possible. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) conserve d’abord [8, 12, 5], puis le transforme en [16, 24, 10]. Lis la chaîne dans l’ordre d’exécution, de gauche à droite.

Fournis une règle de tri numérique

Sans comparateur, sort compare les éléments comme des chaînes de caractères. [10, 9, 1].sort() produit donc [1, 10, 9]. Pour un ordre numérique croissant, utilise .sort((a, b) => a - b). Une valeur de retour négative place a en premier, une valeur positive place b en premier et zéro laisse les deux éléments équivalents pour le tri. Contrairement à map et filter, sort réorganise son tableau d’entrée.

Vérifie les valeurs renvoyées

[1, 2, 3].map((n) => { n * 2; }) produit [undefined, undefined, undefined] parce que le bloc n’a pas de retour. Utiliser forEach pour construire un nouveau résultat par affectation échoue aussi si tu attends que la méthode elle-même renvoie un tableau. Choisis map pour une transformation et forEach pour les actions dont les sorties n’ont pas besoin d’être regroupées.

Une méthode d’ordre supérieur exprime clairement un schéma connu. Une simple boucle reste utile lorsque le traitement a besoin de break ou ne correspond pas au contrat de la méthode.

Une fonction peut renvoyer une nouvelle fonction qui conserve une fonction existante en mémoire. Les fonctions enveloppantes, la composition et l’application partielle utilisent ce schéma pour adapter un comportement sans copier le corps de la fonction d’origine.

Enveloppe un appel et préserve son résultat

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) crée une fonction qui conserve add sous le nom fn. Appeler logged(add)(2, 3) regroupe les arguments, les transmet à add, affiche la valeur renvoyée et renvoie 5. Le reste regroupe les entrées de la fonction enveloppante ; la décomposition les transmet. Le retour final garde la sortie disponible pour les calculs ultérieurs.

logged(add(2, 3)) transmet à la place le nombre 5. Appeler ensuite cette fonction enveloppante tente d’appeler 5 et provoque une TypeError. Il y a deux étapes : configurer la fonction enveloppante avec une fonction, puis appeler la fonction renvoyée avec des entrées.

Conserve un état autour d’une opération

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

Pour une opération qui se termine normalement, le premier appel exécute fn et stocke son résultat. Les appels suivants renvoient cette valeur stockée sans exécuter à nouveau fn, même si leurs arguments diffèrent. Le booléen indique si l’opération a été exécutée ; vérifier si le résultat est une valeur vraie serait incorrect lorsqu’un résultat valide est 0 ou false. Chaque appel de once crée son propre indicateur booléen et son propre résultat stocké.

Transmets un résultat à une autre fonction

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) exécute d’abord addOne(3), puis élève 4 au carré pour renvoyer 16. compose(addOne, square)(3) élève d’abord 3 au carré, puis ajoute 1 et renvoie 10. La fonction la plus proche de l’entrée s’exécute en premier : l’ordre des arguments de compose compte donc.

Fixe certains arguments à l’avance

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") appelle greetWith("Hello", "Ana") et renvoie « Hello, Ana ». Cette fonction auxiliaire d’application partielle place d’abord les arguments fixés, puis les arguments ultérieurs ; changer cet ordre modifie l’appel sous-jacent.