Très souvent, nous devons effectuer une action similaire à de nombreux endroits du script. Par exemple, nous devons montrer un message attractif lorsqu'un visiteur commence session, déconnectez-vous et peut-être ailleurs.
Les fonctions sont les principaux "blocs de construction" du programme. Ils permettent au code d'être appelé plusieurs fois sans répétition.
Nous avons déjà vu des exemples de fonctions intégrées, telles que alerte (message), invite (message, par défaut) y confirmer (question). Mais nous pouvons également créer nos propres fonctions.
Déclaration des fonctions
Pour créer une fonction, nous pouvons utiliser une déclaration de fonction.
Est-ce que ça ressemble à ça:
function showMessage () {alert ('Bonjour à tous!'); }
La Mot-clé une fonction vient en premier, puis le nom de la fonction, puis une liste de paramètres entre parenthèses (vide dans l'exemple ci-dessus) et enfin le code de la fonction, également appelé "le corps de la fonction", entre accolades.
Notre nouvelle fonction peut être appelée par son nom: voir le message ().
Par exemple:
function showMessage {alert ('Bonjour à tous!'); } voir le message (); voir le message ();
L'appel voir le message () exécute le code de fonction. Ici, nous verrons le message deux fois.
Cet exemple montre clairement l'un des principaux objectifs des fonctions: éviter la duplication de code.
Si jamais on a besoin de changer le message ou la façon dont il est affiché, il suffit de modifier le code en un seul endroit: la fonction qui le génère.
Variables locales
Une variable déclarée dans une fonction n'est visible que dans cette fonction.
Par exemple:
function showMessage () {let message = "Salut, je suis JavaScript!"; // alerte de variable locale (message); } voir le message (); // Bonjour, je suis JavaScript! alerte (message); // <- Erreur! La variable est locale dans la fonction
Variables externes
Une fonction peut également accéder à une variable externe, par exemple:
laissez username = 'Maria'; function showMessage () {let message = 'Bonjour,' + nom d'utilisateur; alerte (message); } voir le message (); // Bonjour Maria
La fonction a un accès complet à la variable externe. Vous pouvez également le modifier.
Par exemple:
laissez username = 'Maria'; function showMessage () {nom d'utilisateur = "Bob"; // (1) a changé la variable externe let message = 'Hello,' + username; alerte (message); } alert (nom d'utilisateur); // Maria avant l'appel de fonction showMessage (); alert (nom d'utilisateur); // Bob, la valeur a été modifiée par la fonction
La variable externe n'est utilisée que s'il n'y a pas de variable locale. Donc, une modification occasionnelle peut se produire si nous oublions let.
Si une variable du même nom est déclarée à l'intérieur de la fonction, elle masque la variable externe. Par exemple, dans le code ci-dessous, la fonction utilise le nom d'utilisateur local. L'extérieur est ignoré:
laissez username = 'Maria'; function showMessage () {let username = "Bob"; // déclare une variable locale let message = 'Hello,' + username; // Bob alert (message); } // la fonction créera et utilisera son propre nom d'utilisateur variable displayMessage (); alert (nom d'utilisateur); // Maria, pas de changements, la fonction n'a pas accédé à la variable externe
Variables globales
Variables déclarées en dehors de toute fonction, comme externe nom d'utilisateur dans le code ci-dessus, ils sont appelés globaux.
Les variables globales sont visibles depuis n'importe quelle fonction (à moins qu'elles ne soient ombrées par les locaux).
Habituellement, une fonction déclare toutes les variables spécifiques à sa tâche. Les variables globales ne stockent les données qu'au niveau du projet, donc lorsqu'il est important que ces variables soient accessibles de n'importe où. Le code moderne a peu ou pas de globes globaux. La plupart des variables résident dans leurs fonctions.
Paramètres
Nous pouvons transmettre des données arbitraires aux fonctions en utilisant des paramètres (également appelés arguments de fonction).
Dans l'exemple suivant, la fonction a deux paramètres: depuis y texte.
function showMessage (from, text) {// arguments: from, text alert (from + ':' + text); } showMessage ('Ann', 'Bonjour!'); // Ann: Salut! (*) showMessage ('Ann', "Qu'est-ce qui ne va pas?"); // Ann: Quoi de neuf? (**)
Lorsque la fonction est appelée sur les lignes (*) et (**), les valeurs données sont copiées dans les variables locales depuis y texte. Ensuite, la fonction les utilise.
Voici un autre exemple: nous avons une variable depuis et nous le transmettons à la fonction. Remarque: les changements de fonction depuis, mais le changement n'est pas vu à l'extérieur, car une fonction obtient toujours une copie de la valeur:
function showMessage (from, text) {from = '*' + from + '*'; // donne une meilleure apparence à "de" alerte (de + ':' + texte); } let from = "Ann"; showMessage (de, "Bonjour"); // * Ann *: Hello // la valeur de "from" est la même, la fonction a modifié une alerte de copie locale (from); // Ann
Valeurs prédéterminées
Si aucun paramètre n'est fourni, sa valeur devient indéfini.
Par exemple, la fonction showMessage mentionnée ci-dessus (from, text) peut être appelée avec un seul argument:
showMessage ("Ann");
Ce n’est pas une erreur. Un tel appel sortirait "Ann: indéfini". Il n'y a pas de texte donc c'est censé texte === non défini.
Si nous voulons utiliser un texte "par défaut" dans ce cas, nous pouvons le spécifier après =:
function showMessage (from, text = "no text") {alert (from + ":" + text); } showMessage ("Ann"); // Ann: no text Maintenant si le paramètre text n'est pas passé, vous obtiendrez la valeur "no text"
Il y a une chaîne «sans texte» ici, mais il peut s'agir d'une expression plus complexe, évaluée et affectée uniquement si le paramètre est manquant. Par conséquent, cela est également possible:
function showMessage (from, text = otherFunction ()) {// otherFunction () n'est exécutée que si aucun texte n'a été donné // son résultat devient la valeur du texte}
Paramètres par défaut de l'ancien style
Las ediciones antiguas de JavaScript no soportaban los parámetros por defecto. Así que hay formas alternativas de apoyarlos, que puede encontrar principalmente en los scripts antiguos.
Par exemple, une vérification explicite pour être indéfinie:
function showMessage (from, text) {if (text === undefined) {text = 'no text'; } alerte (de + ":" + texte); } ... ou alors
L'opérateur ||:
function showMessage (from, text) {// si le texte est faux, alors le texte obtient la valeur "par défaut" text = text || 'pas de texte'; ...}
Renvoyer une valeur
Une fonction peut renvoyer une valeur au code appelant en conséquence.
L'exemple le plus simple serait une fonction qui ajoute deux valeurs:
function sum (a, b) {retourne a + b; } laissez résultat = somme (1, 2); alerte (résultat); // 3
Directif revenir il peut être n'importe où dans la fonction. Lorsque l'exécution l'atteint, la fonction s'arrête et la valeur est renvoyée au code appelant (affecté au résultat ci-dessus).
Il peut y avoir plusieurs apparences dans une même fonction. Par exemple:
function checkAge (age) {if (age> 18) {return true; } else {return confirm ('Avez-vous l'autorisation parentale?'); }} let age = prompt ('Quel âge avez-vous?', 18); if (checkAge (age)) {alert ('Accès autorisé'); } else {alert ('Accès refusé'); }
Il est possible d'utiliser revenir sans valeur. Cela provoque la fermeture immédiate de la fonction.
Par exemple:
function viewMovie (age) {if (! viewMovie (age)) {return; } alert ("Vous montre le film"); // (*) // ...}
Dans le code ci-dessus, si vérifier l'âge (âge) Il est retourné faux, voir le film ne procédera pas à alerte.
Une fonction avec un retour vide ou sans retour indéfini.
Si une fonction ne renvoie pas de valeur, c'est la même chose que si elle retourne indéfini:
function noHacerNada() { /* vacío*/ }
alert( noHacerNada() === undefined ); // true
UNE revenir vide est aussi le même que retourne undefined:
function doNothing () {return; } alert (doNothing () === undefined); // vrai
N'ajoutez jamais de nouvelle ligne entre le retour et la valeur
Pour une expression de retour longue, il peut être tentant de la mettre sur une ligne distincte, comme ceci:
return (un + long + expression + ou + quel que soit + soit * f (a) + f (b))
Cela ne fonctionne pas, car JavaScript suppose un point-virgule après revenir. Cela fonctionnera de la même manière que:
revenir; (un + long + expression + ou + quel que soit + soit * f (a) + f (b))
Par conséquent, cela devient effectivement un retour vide. Nous devrions plutôt mettre la valeur sur la même ligne.
