Les fonctions JavaScript

Introduction aux fonctions JavaScript

Une fonction est un bloc de code réutilisable qui effectue une tâche spécifique. Au lieu de répéter les mêmes instructions partout, vous les écrivez une seule fois, vous leur donnez un nom, et vous les exécutez quand vous en avez besoin en appelant la fonction. Les fonctions sont l'un des blocs de construction essentiels de JavaScript : elles permettent d'organiser le code, d'éviter les répétitions et de construire des programmes complexes à partir de petites pièces testables.

Ce chapitre explique comment définir des fonctions, leur transmettre des données avec des paramètres, récupérer des données avec return, et les trois formes principales que vous rencontrerez dans du vrai code : les déclarations de fonctions, les expressions de fonctions et les fonctions fléchées. Il explique également le hoisting et la portée — deux comportements qui surprennent les débutants.

Définir une fonction

Syntaxe de base d'une fonction

Une déclaration de fonction utilise le mot-clé function, suivi d'un nom, d'une liste de paramètres séparés par des virgules entre parenthèses, et d'un corps d'instructions entre accolades. Le corps s'exécute uniquement lorsque la fonction est appelée — ce qui s'écrit avec le nom de la fonction suivi de parenthèses.

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

greet(); // call the function → Outputs: Hello, World!

Définir une fonction ne fait rien en soi ; rien ne s'affiche tant que greet() n'est pas exécuté.

Hoisting des fonctions

Les déclarations de fonctions sont hissées (hoisted) : le moteur les enregistre avant toute exécution du code, vous pouvez donc appeler une déclaration même sur une ligne au-dessus de l'endroit où elle est écrite.

Cela ne s'applique pas aux expressions de fonctions ni aux fonctions fléchées (présentées ci-dessous) — celles-ci ne sont disponibles qu'après l'exécution de la ligne qui les assigne. Les appeler avant provoque une ReferenceError ou une TypeError. Pour en savoir plus sur la raison de ce comportement, consultez la portée des variables.

Paramètres et arguments des fonctions

Un paramètre est un nom listé dans la définition de la fonction ; un argument est la valeur réelle que vous passez lors de l'appel. À l'intérieur du corps, les paramètres se comportent comme des variables locales.

Passer des paramètres

Si vous appelez une fonction avec moins d'arguments que de paramètres, les arguments manquants sont undefined plutôt qu'une erreur :

Paramètres par défaut

Pour éviter undefined, ES6 vous permet de donner à un paramètre une valeur par défaut, utilisée uniquement quand aucun argument (ou undefined) n'est passé.

Paramètres rest

Un paramètre rest (écrit ...name) collecte un nombre quelconque d'arguments restants dans un vrai array, permettant à une fonction d'accepter un nombre variable d'entrées. Il doit être le dernier paramètre.

Les paramètres rest partagent la syntaxe avec l'opérateur spread mais font le travail inverse. Consultez les paramètres rest et la syntaxe spread pour une présentation complète.

L'instruction return

Une fonction peut renvoyer une valeur à son appelant avec return. La valeur renvoyée peut être stockée dans une variable ou utilisée directement dans une expression.

return arrête également la fonction immédiatement — tout code qui la suit est ignoré. Une fonction sans return (ou avec un simple return;) renvoie undefined.

Fonctions anonymes et expressions de fonctions

Expressions de fonctions

Une expression de fonction stocke une fonction dans une variable. Contrairement à une déclaration, la fonction est créée lorsque l'exécution atteint cette ligne, elle n'est donc pas hissée — vous ne pouvez l'appeler qu'après.

Fonctions anonymes

La fonction ci-dessus n'avait pas de nom — c'est une fonction anonyme. Elles sont courantes comme arguments d'autres fonctions, par exemple en tant que callbacks passés aux méthodes d'array comme forEach ou à setTimeout. (Voir introduction aux callbacks.)

Les fonctions fléchées en ES6

Syntaxe des fonctions fléchées

ES6 a introduit les fonctions fléchées, une syntaxe concise pour les expressions de fonctions. Lorsque le corps est une expression unique, vous pouvez supprimer les accolades et le mot-clé return — la valeur de l'expression est renvoyée automatiquement.

Les fonctions fléchées n'ont pas leur propre this

Les fonctions fléchées ne lient pas leur propre this ; elles l'héritent de la portée environnante. Cela les rend idéales comme callbacks à l'intérieur de méthodes d'object, où une fonction ordinaire perdrait le this de l'object.

Pour en savoir plus sur la résolution de this à l'intérieur des méthodes, lisez les méthodes d'object, this.

Choisir la bonne forme

• Déclaration de fonction (function foo() {}) — hissée, idéale pour les utilitaires nommés de niveau supérieur que vous pouvez appeler depuis n'importe où.
• Expression de fonction (const foo = function() {}) — créée sur place ; utile quand vous souhaitez assigner ou passer une fonction de manière conditionnelle.
• Fonction fléchée (const foo = () => {}) — syntaxe la plus courte, pas de this propre ; préférée pour les callbacks courts.

Les fonctions sont également le fondement de patrons plus avancés tels que les closures et la récursion.

Conclusion

Les fonctions vous permettent d'encapsuler une logique une fois et de la réutiliser partout. Vous avez vu comment les définir, passer des arguments (y compris les valeurs par défaut et les paramètres rest), renvoyer des résultats, et les différences entre déclarations, expressions et fonctions fléchées — ainsi que les comportements de hoisting et de this qui les distinguent. Maîtriser ces formes est une étape fondamentale vers l'écriture d'un JavaScript propre et maintenable.

Pratique