Une fonction, c'est un morceau de programme auquel on donne un nom pour le rejouer autant de fois qu'on veut, avec des données différentes. JavaScript en propose trois écritures.
Le mot-clé function désigne la plus ancienne des trois. Elle a une propriété que les autres n'ont pas, et c'est souvent elle qui tranche.
Définition
Une déclaration function associe un nom, une liste de paramètres et un corps entre accolades. La valeur produite par le corps sort par return ; sans lui, l'appel vaut undefined.
console.log(prixTTC(100)); // 120 : la fonction est déjà disponible
function prixTTC(ht) {
return ht * 1.2;
}L'appel placé avant la déclaration fonctionne. Le moteur lit le fichier d'abord, y repère les déclarations de fonctions et les rend utilisables partout dans leur portée, corps compris. Ce comportement s'appelle la remontée, et il n'existe que pour cette forme.
Trois écritures pour une même idée
function aire(l, h) { return l * h; } // déclaration
const aire2 = function (l, h) { return l * h; }; // expression
const aire3 = (l, h) => l * h; // fonction fléchéeLes trois calculent la même chose. Ce qui les sépare tient en deux points.
| Forme | Disponible avant sa ligne | Valeur de this |
|---|---|---|
| Déclaration | Oui, nom et corps | Dépend de l'appel |
| Expression | Non | Dépend de l'appel |
| Fonction fléchée | Non | Héritée du code autour |
En pratique, la fonction fléchée s'impose pour les fonctions courtes passées en argument, comme celles que reçoivent Array.forEach() ou Array.filter(), parce qu'elle ne redéfinit pas this. La déclaration reste préférable pour les fonctions principales d'un module, appelées sans se soucier de l'ordre des lignes.
Les paramètres
Un paramètre peut recevoir une valeur par défaut, utilisée quand l'appel n'en donne pas. Le dernier peut être précédé de trois points pour absorber les arguments restants dans un tableau : c'est le paramètre Rest (...).
function facture(client, taux = 0.2, ...lignes) {
const ht = lignes.reduce((s, n) => s + n, 0);
return { client, ttc: ht * (1 + taux) };
}
console.log(facture("Alice", 0.2, 12, 30, 8)); // { client: 'Alice', ttc: 60 }Une fonction déclarée avec function dispose aussi de l'objet arguments, qui contient tous les arguments reçus. Il n'a survécu que par compatibilité : ...rest le remplace, en produisant un vrai Array (tableau).
Questions fréquentes
Faut-il préférer function ou la fonction fléchée ?
La fonction fléchée convient partout où la fonction est courte et passée en argument, et sa gestion de this évite une classe entière de bugs. La déclaration function garde l'avantage pour les fonctions nommées d'un module, où la remontée permet de ranger le code par importance plutôt que par ordre d'appel.
Une fonction peut-elle être passée en argument ?
Oui, et c'est un usage central du langage. Une fonction est une valeur comme une autre : elle se range dans une variable, se passe en argument, se renvoie par return. C'est ce qui rend possibles Array.reduce() ou filter, qui reçoivent le traitement à appliquer.
Que se passe-t-il si j'appelle une fonction avec trop peu d'arguments ?
Aucune erreur n'est levée. Les paramètres non fournis valent undefined, et le corps s'exécute quand même, jusqu'à produire un résultat absurde plusieurs étapes plus loin. C'est la raison d'être des valeurs par défaut, et la première chose que typeof permet de vérifier quand un calcul renvoie NaN sans explication. Notre formation JavaScript consacre un chapitre au découpage en fonctions, là où se joue la lisibilité d'un projet qui grossit.