Déclaration de fonction en JavaScript : syntaxe et hoisting

Une fonction, c'est un bloc d'instructions qui porte un nom

Dès que vous voulez donner un nom à un bout de logique pour le réutiliser, vous écrivez une fonction. La façon la plus ancienne et la plus directe de faire ça en JavaScript, c'est la déclaration de fonction : le mot-clé function suivi d'un nom.

En lisant de gauche à droite :

• function est le mot-clé qui ouvre une déclaration.
• greet est le nom de la fonction.
• (name) est la liste des paramètres — les entrées que la fonction accepte.
• Le bloc entre accolades, c'est le corps.
• greet("Ada") est un appel. JavaScript exécute le corps avec name qui vaut "Ada".

Attention : définir une fonction ne l'exécute pas. C'est l'appel qui déclenche l'exécution.

Paramètres et arguments

Un paramètre, c'est le nom déclaré dans la définition de la fonction. Un argument, c'est la valeur qu'on passe au moment de l'appel. À l'oral, on mélange souvent les deux, mais la nuance devient utile quand il faut déchiffrer un message d'erreur.

Ici, base et exponent sont les paramètres. 2 et 10 sont les arguments. JavaScript les associe dans l'ordre : le premier argument va au premier paramètre, et ainsi de suite.

Contrairement à certains langages, JavaScript ne râle pas si tu passes le mauvais nombre d'arguments. Ceux qui manquent deviennent undefined, et ceux en trop sont tout simplement ignorés. C'est souple, mais ça peut aussi te piéger — on verra les valeurs par défaut et les rest parameters dans les prochains docs.

return renvoie une valeur à l'appelant

console.log affiche quelque chose dans la sortie. return, lui, renvoie une valeur à l'appelant pour qu'il puisse s'en servir :

Sans return, une fonction renvoie undefined :

return met aussi fin à la fonction immédiatement. Les early returns (ou sorties anticipées) sont la façon standard de gérer les cas limites avant d'attaquer la logique principale :

Les return anticipés évitent que le corps principal ne se transforme en pyramide de if/else.

Hoisting : appeler une fonction avant de la déclarer

Voilà un truc qui surprend vraiment les gens venant d'autres langages. Les déclarations de fonction sont hoistées — autrement dit, JavaScript les remonte en haut de leur portée avant même d'exécuter la moindre ligne de code. Résultat : on peut appeler une fonction sur une ligne située au-dessus de sa déclaration :

Ce code tourne sans problème. Avant de lancer l'exécution, le moteur parcourt la portée, enregistre square comme fonction, et ce n'est qu'ensuite qu'il commence à exécuter les instructions de haut en bas.

C'est une vraie différence de comportement entre la déclaration de fonction et les autres façons de créer une fonction (function expression, fonction fléchée). Ces dernières sont hoistées comme des variables : le nom est connu, mais la valeur n'est affectée qu'au moment où la ligne s'exécute. On revient sur cette distinction juste après.

Cela dit, la plupart des guides de style recommandent de définir les fonctions avant de les appeler. Le hoisting est un filet de sécurité, pas une pratique sur laquelle s'appuyer.

Function expression vs declaration

Une déclaration de fonction est une instruction à part entière. Une expression de fonction, elle, apparaît là où une valeur est attendue — le plus souvent après un signe = dans une affectation :

Toutes les deux produisent des fonctions appelables. Voici ce qui les distingue :

• Les déclarations sont hoistées dans leur intégralité. Les expressions, elles, suivent les règles de hoisting de la variable à laquelle elles sont assignées (const et let restent dans la temporal dead zone jusqu'à l'exécution de la ligne).
• Une déclaration doit obligatoirement porter un nom. Une expression peut être anonyme, même si la nommer facilite grandement la lecture des stack traces.
• Une déclaration ne peut pas apparaître n'importe où. En mode strict, un function foo() {} placé à l'intérieur d'un bloc if se comporte différemment selon les moteurs JavaScript — mieux vaut utiliser une expression dans ce cas.

Pour la plupart des fonctions utilitaires au niveau racine d'un fichier, la déclaration se lit très bien. Pour les fonctions passées en argument ou assignées à une propriété, on préférera généralement une expression de fonction (ou une arrow function).

Bien nommer ses fonctions

Le nom d'une fonction, c'est une promesse sur ce qu'elle fait. Passer quelques secondes de plus à choisir un nom descriptif, c'est un investissement qui se rentabilise dès la première relecture du code par un collègue — ou par soi-même, trois mois plus tard.

Quelques conventions qu'il vaut la peine d'adopter :

• Les noms de fonctions doivent être des verbes : fetchProfile, computeTotal, sendEmail.
• Utilise le camelCase — c'est la norme en JavaScript.
• Les fonctions qui renvoient un booléen commencent souvent par is, has ou can : isValid, hasAccess, canEdit.

L'idée, c'est que l'appel de la fonction se lise presque comme une phrase.

Un petit exemple concret

On rassemble tout ce qu'on a vu — les paramètres, le return anticipé et un nom bien choisi :

Une déclaration, un garde-fou, un return clair. Cette structure couvre la plupart des fonctions que tu écriras.

La suite : les fonctions fléchées

La déclaration, c'est la valeur sûre, mais le JavaScript moderne mise beaucoup sur une syntaxe plus concise — les fonctions fléchées — surtout pour les callbacks et les one-liners. Leur écriture diffère, leur comportement avec this aussi, et c'est justement le sujet de la page suivante.