JavaScript Functions
Une fonction JavaScript est un bloc de code conçu pour effectuer une tâche particulière.
Une fonction JavaScript est exécutée lorsque « quelque chose » l'invoque (l'appelle).
Exemple
function myFunction(p1, p2) {
return p1 * p2; // La fonction renvoie le produit de p1 et p2
}
Try it Yourself »
Syntaxe de la fonction JavaScript
Une fonction JavaScript est définie avec le mot-clé function, suivi d'un nom, suivi de parenthèses ().
Les noms de fonction peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar (mêmes règles que les variables).
Les parenthèses peuvent inclure des noms de paramètres séparés par des virgules :
(paramètre1, paramètre2, ...)
Le code à exécuter par la fonction est placé entre accolades : {}
function nom(paramètre1, paramètre2, paramètre3) {
// code à exécuter
}
Les paramètres de la fonction sont répertoriés entre parenthèses () dans la définition de la fonction.
Les arguments de la fonction sont les valeurs reçues par la fonction lorsqu'elle est invoquée.
A l'intérieur de la fonction, les arguments (les paramètres) se comportent comme des variables locales.
Une fonction est très similaire à une procédure ou à une sous-routine dans d’autres langages de programmation.
Invocation de fonction
Le code à l'intérieur de la fonction s'exécutera lorsque « quelque chose » invoque (appelle) la fonction :
- Lorsqu'un événement se produit (quand un utilisateur clique sur un bouton)
- Lorsqu'il est invoqué (appelé) à partir du code JavaScript
- Automatiquement (auto-invoqué)
Vous en apprendrez beaucoup plus sur l'invocation de fonction plus tard dans ce didacticiel.
Retour de fonction
Lorsque JavaScript atteint une instruction return, la fonction arrête de s'exécuter.
Si la fonction a été invoquée à partir d'une instruction, JavaScript « retourne » pour exécuter le code après l'instruction d'appel.
Les fonctions calculent souvent une valeur de retour. La valeur de retour est « renvoyée » à l'« appelant » :
Exemple
Calculez le produit de deux nombres et renvoyez le résultat :
let x = myFunction(4, 3); // La fonction est appelée, la valeur de retour se terminera par x
function myFunction(a, b) {
return a * b; // La fonction renvoie le produit de a et b
}
Le résultat dans x sera :
12
Pourquoi des fonctions ?
Vous pouvez réutiliser le code : définissez le code une fois et utilisez-le plusieurs fois.
Vous pouvez utiliser le même code plusieurs fois avec des arguments différents pour produire des résultats différents.
Exemple
Convertir des degrés Fahrenheit en Celsius :
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
Try it Yourself »
L'opérateur () appelle la fonction
En utilisant l'exemple ci-dessus, toCelsius fait référence à l'objet fonction et toCelsius() fait référence au résultat de la fonction.
L'accès à une fonction sans () renverra l'objet fonction au lieu du résultat de la fonction.
Exemple
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
Try it Yourself »
Fonctions utilisées comme valeurs de variables
Les fonctions peuvent être utilisées de la même manière que les variables, dans tous les types de formules, d'affectations et de calculs.
Exemple
Au lieu d'utiliser une variable pour stocker la valeur de retour d'une fonction :
let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";
Vous pouvez utiliser la fonction directement, comme valeur de variable :
let text = "The temperature is " + toCelsius(77) + " Celsius";
Try it Yourself »
Vous en apprendrez beaucoup plus sur les fonctions plus tard dans ce didacticiel.
Variables locales
Les variables déclarées dans une fonction JavaScript deviennent LOCALES pour la fonction.
Les variables locales ne sont accessibles qu'à partir de la fonction.
Exemple
// le code ici ne peut PAS être utilisé carName
function myFunction() {
let carName = "Volvo";
// le code ici PEUT être utilisé carName
}
// le code ici ne peut PAS être utilisé carName
Try it Yourself »
Étant donné que les variables locales ne sont reconnues qu'à l'intérieur de leurs fonctions, les variables portant le même nom peuvent être utilisées dans différentes fonctions.
Les variables locales sont créées au démarrage d'une fonction et supprimées lorsque la fonction est terminée.
