En bref
Les fonctions JavaScript ont une particularité qui explique toute la personnalité du langage : ce sont des valeurs à part entière, qu’on range dans des variables, qu’on passe en argument et qu’on renvoie, le fondement des callbacks qui font réagir les pages web. Trois écritures cohabitent, la déclaration classique avec le mot-clé function, l’expression de fonction rangée dans une variable, et la fonction fléchée, la syntaxe compacte devenue omniprésente, chacune avec ses nuances de hissage et de this. La portée moderne, délimitée par les blocs grâce à let et const, s’accompagne du mécanisme le plus fascinant du langage, la closure : une fonction emporte avec elle les variables de son lieu de naissance, ce qui permet compteurs, fabriques de fonctions et états privés. Les bonnes pratiques stabilisent le tout : petites fonctions pures autant que possible, paramètres par défaut, rest et spread pour la souplesse, et un premier regard sur l’asynchrone, où les fonctions sont les passagères de toutes les promesses.
En JavaScript, les fonctions ne sont pas qu’un outil d’organisation : elles sont la monnaie du langage, celle qu’on échange à chaque clic, chaque requête et chaque animation. Comprendre les fonctions JavaScript, leurs trois écritures et leurs superpouvoirs, c’est comprendre pourquoi le web se comporte comme il le fait. Voici le guide pratique complet, en prolongement de comprendre une fonction, du guide apprendre le JavaScript et du guide complet pour apprendre à coder.
Trois écritures pour un même outil
La déclaration classique ouvre le bal : function calculerTotal(prix, quantite) { return prix * quantite; }, le mot-clé function, un nom, des paramètres, un corps entre accolades et un return qui renvoie le résultat, faute de quoi la fonction rend undefined, la valeur qui signifie rien d’assigné. Cette forme possède une propriété singulière, le hissage : le moteur la charge avant d’exécuter le fichier, si bien qu’on peut l’appeler au-dessus de sa définition, un confort qui autorise à organiser ses fichiers avec les fonctions principales en tête. La deuxième écriture, l’expression de fonction, range une fonction anonyme dans une variable, const calculer = function(prix) { ... };, et révèle d’emblée la grande vérité du langage : la fonction est une valeur, au même titre qu’un nombre ou une chaîne, stockable, transportable, remplaçable. Cette vérité n’est pas une curiosité de théoricien, c’est le mécanisme central du JavaScript vivant, comme les bases du langage le laissent entrevoir dès les premiers événements.
La troisième écriture est devenue le visage moderne du langage : la fonction fléchée, const doubler = (n) => n * 2;, compacte au point de tenir sur une ligne, le return étant implicite quand le corps se réduit à une expression. Sa concision l’a rendue omniprésente dans les callbacks et le code des frameworks comme React, mais elle n’est pas qu’un raccourci : elle diffère de ses aînées sur un point technique fameux, elle ne possède pas son propre this, ce mot-clé contextuel qui désigne l’objet courant, et hérite de celui de son environnement, ce qui résout élégamment de vieux pièges et en crée un neuf, ne pas l’utiliser comme méthode d’objet quand this doit désigner l’objet. Le conseil pratique pour débuter est simple et fait consensus : déclarations classiques pour les fonctions nommées structurantes de ton programme, fléchées pour les fonctions courtes passées en argument, et une règle transversale, toujours const pour ranger une fonction, une fonction n’ayant aucune raison d’être réassignée par accident.
Callbacks, portée et closures : les superpouvoirs
Puisque les fonctions sont des valeurs, on peut les passer en argument à d’autres fonctions, et ce geste a un nom qui structure tout l’écosystème : le callback, la fonction confiée pour être rappelée au bon moment. Le web entier fonctionne ainsi : bouton.addEventListener("click", reagir) confie la fonction reagir, sans parenthèses, on passe la recette, on ne la cuisine pas, et le navigateur l’appellera à chaque clic ; les méthodes de tableaux qui font l’élégance du langage moderne, map qui transforme, filter qui sélectionne, en sont l’autre visage quotidien, chacune recevant la petite fonction fléchée qui dit quoi faire de chaque élément. Maîtriser ce va-et-vient, écrire des fonctions qui en reçoivent d’autres, est le cap décisif de l’apprentissage JavaScript, celui que les exercices corrigés travaillent systématiquement, car il sépare ceux qui subissent la syntaxe de ceux qui la font danser.
La portée moderne obéit à la règle des blocs : les variables déclarées avec let et const vivent dans leurs accolades, chaque fonction voyant les siennes et celles des niveaux englobants, et l’antique var, aux frontières plus laxistes, appartient au passé qu’on lit encore mais qu’on n’écrit plus. De cette visibilité en poupées russes naît le mécanisme le plus fascinant du langage : la closure, ou fermeture. Une fonction née dans une autre emporte avec elle, durablement, les variables de son lieu de naissance : la fonction interne qui incrémente un compteur défini dans la fonction externe continue d’y accéder après que l’externe a terminé, le compteur survivant, privé, inaccessible autrement, entre les appels. Ce prodige discret est partout : les fabriques de fonctions, creerMultiplicateur(3) renvoyant une fonction qui triple, les états privés des modules, les callbacks qui se souviennent du contexte de leur création. Nul besoin d’en maîtriser la théorie au premier mois ; il suffit de savoir la reconnaître, car le jour où une variable semble magiquement persister, ce n’est pas de la magie, c’est une closure qui fait son travail.
Souplesse moderne, bonnes pratiques et porte de l’asynchrone
L’outillage moderne des signatures rend les fonctions accueillantes. Les paramètres par défaut d’abord, function saluer(nom = "visiteur"), qui évitent les gardes fastidieuses contre l’undefined. Le paramètre rest ensuite, function total(...nombres), qui ramasse tous les arguments dans un vrai tableau, prêt pour les méthodes de calcul ; son jumeau inversé, l’opérateur spread, déplie à l’appel un tableau en arguments, total(...valeurs), le duo couvrant tous les besoins d’arité variable. La déstructuration enfin, ce motif idiomatique qui simule les arguments nommés : une fonction recevant un objet d’options, function configurer({ theme, langue }), s’appelle avec des propriétés explicites et lisibles, l’équivalent culturel des appels par mot-clé d’autres langages, massivement employé par les bibliothèques. À quoi s’ajoute la valeur de retour multiple à la mode JavaScript, renvoyer un objet ou un tableau qu’on déstructure à la réception, et voilà des signatures qui se lisent comme des phrases, l’objectif constant du code durable, servi aussi par des noms soignés.
Les bonnes pratiques rejoignent celles de tous les langages, avec un accent local : privilégier les fonctions pures, celles qui, à entrées égales, rendent toujours la même sortie sans toucher au monde extérieur, car elles se testent et se raisonnent sans surprise, et isoler les effets, manipulation de page, requêtes, dans des fonctions dédiées ; garder les fonctions courtes, une responsabilité chacune ; et retourner tôt plutôt qu’imbriquer, les gardes en tête de fonction évitant les pyramides de conditions. Reste la porte que ce guide entrouvre sans la franchir : l’asynchrone, le régime temporel du web, où les fonctions révèlent leur dernier visage, les callbacks d’événements que tu connais déjà, puis les promesses et les fonctions async, marquées d’un mot-clé et capables d’attendre sans bloquer, tout un monde déplié dans comprendre l’asynchrone. Le fil conducteur, lui, ne changera pas : en JavaScript, tout ce qui arrive, arrive à travers une fonction, et chaque heure investie ici, des projets d’un week-end aux applications sérieuses, est une heure investie dans le cœur même du langage, celui que TypeScript viendra plus tard typer sans jamais le remplacer.
Questions fréquentes
Quelles sont les trois façons d’écrire une fonction en JavaScript ?
La déclaration classique avec le mot-clé function, hissée en tête d’exécution ; l’expression de fonction rangée dans une variable ; et la fonction fléchée, compacte, au return implicite sur une ligne, sans this propre. Usage conseillé : déclarations pour les fonctions structurantes, fléchées pour les callbacks courts.
C’est quoi un callback en JavaScript ?
Une fonction passée en argument à une autre, pour être rappelée au bon moment : la fonction confiée à addEventListener s’exécute à chaque clic, celles confiées à map ou filter s’appliquent à chaque élément. C’est possible parce que les fonctions JavaScript sont des valeurs à part entière.
C’est quoi une closure, expliqué simplement ?
Une fonction emporte avec elle les variables de son lieu de naissance : née dans une autre fonction, elle continue d’accéder à leurs variables même après la fin de celle-ci. C’est ce qui permet les compteurs persistants, les états privés et les fabriques de fonctions.
Pourquoi une fonction fléchée n’a-t-elle pas de this ?
Par conception : elle hérite du this de son environnement au lieu d’en créer un, ce qui résout les vieux pièges des callbacks où this changeait de sens. Revers de la médaille : on évite la fléchée comme méthode d’objet quand this doit désigner l’objet lui-même.
Sources
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.