Très souvent, nous devons effectuer une action similaire à de nombreux endroits du script.
Par exemple, nous devons afficher un joli message lorsqu’un visiteur se connecte, se déconnecte 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, comme alert(message), prompt(message, default) et confirm(question). Mais nous pouvons aussi créer nos propres fonctions.,
Déclaration de la Fonction
Pour créer une fonction, nous pouvons utiliser une déclaration de fonction.
Il ressemble à ceci:
function showMessage() { alert( 'Hello everyone!' );}Le function mot clé va d’abord, puis le nom de la fonction, puis une liste de paramètres entre parenthèses (séparées par des virgules, vide dans l’exemple ci-dessus) et enfin, le code de la fonction, également nommé « le corps de la fonction”, entre accolades.,
function name(parameters) { ...body...}Notre nouvelle fonction peut être appelée par son nom: showMessage().
Par exemple:
function showMessage() { alert( 'Hello everyone!' );}showMessage();showMessage();L’appel showMessage() exécute le code de la 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 nous avons besoin de changer le message ou la façon dont il est affiché, il suffit de modifier le code au même endroit: la fonction qui le sort.
les variables Locales
Une variable déclarée à l’intérieur d’une fonction est uniquement visible à l’intérieur de cette fonction.
Par exemple:
Extérieur des variables
Une fonction peut accéder à une variable externe ainsi, par exemple:
let userName = 'John';function showMessage() { let message = 'Hello, ' + userName; alert(message);}showMessage(); // Hello, JohnLa fonction a accès à l’extérieur variable. Il peut également le modifier.,
Par exemple:
La variable externe n’est utilisée que s’il n’y en a pas de variable locale.
Si une variable du même nom est déclarée à l’intérieur de la fonction, elle fait de l’ombre à la variable externe. Par exemple, dans le code ci-dessous la fonction utilise la locale userName. L’extérieur est ignoré:
les Variables déclarées en dehors de toute fonction, telles que l’extérieur userName dans le code ci-dessus, sont appelées globales.
Les variables globales sont visibles à partir de n’importe quelle fonction (sauf si elles sont ombragées par les locaux).,
C’est une bonne pratique afin de minimiser l’utilisation de variables globales. Code moderne a peu ou pas de variables globales. La plupart des variables résident dans leurs fonctions. Parfois, cependant, ils peuvent être utiles pour stocker des données au niveau du projet.
Paramètres
Nous pouvons transmettre des données arbitraires à des fonctions en utilisant des paramètres (également appelés arguments de fonction) .
Dans l’exemple ci-dessous, la fonction a deux paramètres: from et text.,
Lorsque la fonction est appelée dans les lignes (*) et (**), les valeurs données sont copiées à des variables locales from et text. Ensuite, la fonction utilise.
Voici un autre exemple: nous avons une variablefrom et la transmettons à la fonction., Remarque: la fonction change from, mais la modification n’est pas visible à l’extérieur, car une fonction obtient toujours une copie de la valeur:
valeurs par défaut
Si un paramètre n’est pas fourni, sa valeur devient undefined.
Par exemple, cette fonction showMessage(from, text) peut être appelée avec un argument simple:
showMessage("Ann");ce n’est pas une erreur. Un tel appel produirait "*Ann*: undefined"., Il n’y a pas de text, donc on suppose que text === undefined.,
Si l’on veut utiliser un « défaut” text dans ce cas, alors nous pouvons spécifier après =:
function showMessage(from, text = "no text given") { alert( from + ": " + text );}showMessage("Ann"); // Ann: no text givenMaintenant, si le text paramètre n’est pas passé, il obtiendra la valeur de "no text given"
Ici "no text given" est une chaîne de caractères, mais il peut être une expression plus complexe, qui n’est d’évaluer et d’attribuer si le paramètre est manquant., Donc, c’est aussi possible:
En JavaScript, un paramètre par défaut est évalué chaque fois que la fonction est appelée sans paramètre.
Dans l’exemple ci-dessus, anotherFunction() est appelée à chaque fois showMessage() est appelé sans le text paramètre.
paramètres par défaut alternatifs
parfois, il est logique de définir des valeurs par défaut pour les paramètres non pas dans la déclaration de fonction, mais à un stade ultérieur, lors de son exécution.,paramètre, nous pouvons le comparer avec des undefined:
function showMessage(text) { if (text === undefined) { text = 'empty message'; } alert(text);}showMessage(); // empty message…Ou on peut utiliser la balise || opérateur:
// if text parameter is omitted or "" is passed, set it to 'empty'function showMessage(text) { text = text || 'empty'; ...}Moderne moteurs JavaScript soutenir le nullish la coalescence de l’opérateur ??, c’est mieux quand falsy de valeurs telles que le 0, sont considérés comme réguliers:
Retour d’une valeur
une fonction peut renvoyer Une valeur de retour dans le code d’appel comme le résultat.,
l’exemple Le plus simple serait une fonction qui calcule la somme de deux valeurs:
function sum(a, b) { return a + b;}let result = sum(1, 2);alert( result ); // 3La directive return peut être dans n’importe quel endroit de la fonction. Lorsque l’exécution l’atteint, la fonction s’arrête et la valeur est renvoyée au code appelant (attribué à result ci-dessus).
Il peut y avoir plusieurs occurrences de return dans la même fonction. Par exemple:
Il est possible d’utiliser des return sans valeur., That causes the function to exit immediately.
For example:
function showMovie(age) { if ( !checkAge(age) ) { return; } alert( "Showing you the movie" ); // (*) // ...}In the code above, if checkAge(age) returns false, then showMovie won’t proceed to the alert.,
return et la valeurPour une longue expression dans return, il peut être tentant de le mettre sur une ligne distincte, comme ceci:
return (some + long + expression + or + whatever * f(a) + f(b))cela ne fonctionne pas, parce que JavaScript suppose un point-virgule après return. Qui fonctionnent de la même aussi:
return; (some + long + expression + or + whatever * f(a) + f(b))Donc, elle devient une de retour à vide.,
Si nous voulons que l’expression renvoyée soit enroulée sur plusieurs lignes, nous devrions La Démarrer sur la même ligne quereturn. Ou au moins mettre de l’ouverture des parenthèses il y a comme suit:
return ( some + long + expression + or + whatever * f(a) + f(b) )Et il fonctionnera comme nous le prévoyons, pour.
la dénomination d’une fonction
les Fonctions sont des actions. Si leur nom est généralement un verbe. Il doit être bref, aussi précis que possible et décrire ce que fait la fonction, afin que quelqu’un lisant le code obtienne une indication de ce que fait la fonction.,
c’est une pratique répandue de commencer une fonction avec un préfixe verbal qui décrit vaguement l’action. Il doit y avoir un accord au sein de l’équipe sur la signification des préfixes.
Par exemple, les fonctions qui commencent par "show" habituellement montrer quelque chose.
fonction commençant par…
exemples de tels noms:
avec des préfixes en place, un coup d’œil sur un nom de fonction permet de comprendre quel type de travail il fait et quel type de valeur il renvoie.,
Une fonction doit faire exactement ce qui est suggéré par son nom, pas plus.
Deux actions indépendantes généralement méritent deux fonctions, même si elles sont généralement appelées ensemble (dans ce cas, nous pouvons faire une 3ème fonction qui appelle ces deux).
quelques exemples de violation de cette règle:
-
getAge– ce serait mauvais si il montre unalertavec l’âge (si seulement obtenir)., -
createForm– serait mauvais s’il modifie le document, en y ajoutant un formulaire (devrait seulement le créer et le retourner). -
checkPermission– serait mauvais s’il affiche le messageaccess granted/denied(ne devrait effectuer que la vérification et renvoyer le résultat).
Ces exemples supposent des significations communes des préfixes. Vous et votre équipe êtes libres de vous mettre d’accord sur d’autres significations, mais généralement elles ne sont pas très différentes. Dans tous les cas, vous devez avoir une compréhension ferme de ce que signifie un préfixe, de ce qu’une fonction préfixée peut et ne peut pas faire., Toutes les fonctions préfixées doivent obéir aux règles. Et l’équipe devrait partager les connaissances.
les Fonctions qui sont utilisées très souvent, parfois ultra noms.
Par exemple, le framework jQuery définit une fonction avec $. La bibliothèque Lodash a sa fonction principale nommée _.
ce sont des exceptions. Généralement, les noms des fonctions doivent être concis et descriptifs.
les Fonctions == Commentaires
les Fonctions doivent être courtes et ne exactement une chose., Si cette chose est grande, cela vaut peut-être la peine de diviser la fonction en quelques fonctions plus petites. Parfois, suivre cette règle n’est peut-être pas si facile, mais c’est certainement une bonne chose.
Une fonction distincte est non seulement plus facile à tester et à déboguer – son existence même est un excellent commentaire!
Par exemple, de comparer les deux fonctions showPrimes(n) ci-dessous. Chacun génère des nombres premiers jusqu’à n.,
La première variante utilise une étiquette:
function showPrimes(n) { nextPrime: for (let i = 2; i < n; i++) { for (let j = 2; j < i; j++) { if (i % j == 0) continue nextPrime; } alert( i ); // a prime }}La seconde variante utilise une fonction supplémentaire isPrime(n) pour tester la primalité:
La deuxième variante est plus facile à comprendre, n’est-ce pas? Au lieu de la pièce de code, nous voyons un nom de l’action (isPrime). Parfois, les gens se réfèrent à un tel code comme auto-décrivant.
ainsi, des fonctions peuvent être créées même si nous n’avons pas l’intention de les réutiliser. Ils structurent le code et le rendent lisible.,
Résumé
Une déclaration de fonction ressemble à ceci:
function name(parameters, delimited, by, comma) { /* code */}- les Valeurs passées à une fonction en tant que paramètres sont copiés à ses variables locales.
- Une fonction peut accéder à des variables externes. Mais cela ne fonctionne que de l’intérieur. Le code en dehors de la fonction ne voit pas ses variables locales.
- une fonction peut renvoyer Une valeur. Si ce n’est pas le cas, son résultat est
undefined.,
Pour rendre le code propre et facile à comprendre, il est recommandé d’utiliser principalement des variables et des paramètres locaux dans la fonction, pas des variables externes.
Il est toujours plus facile de comprendre une fonction qui obtient des paramètres, travaille avec eux et renvoie un résultat qu’une fonction qui n’obtient aucun paramètre, mais modifie des variables externes comme effet secondaire.
Dénomination de la fonction:
- Un nom doit décrire clairement ce que fait la fonction. Lorsque nous voyons un appel de fonction dans le code, un bon nom nous donne instantanément une compréhension de ce qu’il fait et retourne.,
- Une fonction est une action, donc les noms de fonction sont généralement verbaux.
- Il existe de nombreux bien connue de la fonction des préfixes comme
create…,show…,get…,check…et ainsi de suite. Utilisez-les pour indiquer ce que fait une fonction.
Les fonctions sont les principaux éléments constitutifs des scripts. Maintenant, nous avons couvert les bases, nous pouvons donc commencer à les créer et à les utiliser. Mais ce n’est que le début du chemin. Nous allons y revenir plusieurs fois, en approfondissant leurs fonctionnalités avancées.
Laisser un commentaire