function
Déclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
Exemple
#function calculateLevel(points) {
return Math.floor(points / 100) + 1
}
console.log(calculateLevel(0))
console.log(calculateLevel(250))Définition et utilisation
#Une déclaration function crée une fonction portant le nom donné. Une fonction est une recette enfermée dans un bloc : elle reçoit des données par des paramètres, exécute des instructions et peut renvoyer un résultat avec return. Une fois écrite, vous l’appelez autant de fois que vous voulez.
Les paramètres peuvent avoir des valeurs par défaut, utilisées quand un argument n’est pas fourni. Le paramètre du reste ...rest rassemble tous les arguments excédentaires dans un tableau. Une fonction qui n’exécute jamais return renvoie undefined.
Les déclarations de fonction sont entièrement remontées (hoisting), donc vous pouvez appeler une fonction plus haut dans le fichier qu’à l’endroit où elle est écrite. Cela ne s’applique pas aux expressions de fonction, par ex. const add = function () {}, qui ne fonctionnent qu’à partir de la ligne d’affectation.
Syntaxe
#function name(param1, param2) {
// instructions
return value
}
function name(param = defaultValue, ...rest) {}Plus d’exemples
#function summary(student = 'Invité', ...scores) {
const total = scores.reduce((sum, score) => sum + score, 0)
return `${student}: ${total} pts`
}
console.log(summary('Léa', 10, 20, 30))
console.log(summary())console.log(double(21))
function double(n) {
return n * 2
}function applyBonus(points, rule) {
return rule(points)
}
function doubleBonus(points) {
return points * 2
}
console.log(applyBonus(40, doubleBonus))
console.log(applyBonus(40, (points) => points + 5))Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Nommez les fonctions avec des verbes qui disent ce qu’elles font :
calculateTotal,formatDate,isValid. Le code se lit alors presque comme des phrases. - Une fonction devrait faire une seule chose. Si la décrire a besoin du mot « et », envisagez de la diviser en deux plus petites.
- Les arguments manquants reçoivent la valeur
undefined, et les arguments excédentaires sont ignorés. JavaScript ne signale pas d’erreur pour un mauvais nombre d’arguments, donc cela vaut la peine de valider les données reçues.
Entrées associées
#- () => {} vs functionUne fonction ordinaire a son propre this et arguments, et peut être appelée avec new. Une fonction fléchée est plus courte et prend son this de l’environnement.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
- returnTermine l’exécution d’une fonction et transmet une valeur à l’endroit où la fonction a été appelée.
- classDéfinit une classe, c’est-à-dire un modèle pour créer des objets avec les mêmes champs et méthodes.
- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- function*Déclare un générateur : une fonction qui livre des valeurs successives via yield et se met en pause entre elles.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.