Apprendre l'informatique avec JavaScript partie 4, fonctions

introduction

Supposons que vous ayez un fichier de 82 lignes qui ne comporte qu'une série d'énoncés. (J'espère que ce n'est pas vrai, mais que tout est possible.) Comment pourriez-vous comprendre ce que fait le programme? Comment le modifierais-tu ou l'utiliserais-tu? Il serait un peu difficile de faire quoi que ce soit avec ce code car il n’est pas structuré..  

Pour résoudre ce problème, vous pouvez utiliser des fonctions. Une fonction est un groupe d'instructions qui effectuent une tâche spécifique. Les fonctions nous permettent de diviser un programme en programmes plus petits, rendant notre code plus lisible, réutilisable et testable.

Contenu

  • Fonctions nulles
  • Fonction de retour de valeur
  • Portée
  • Paramètres
  • Modules

Fonctions d'annulation

Ce type de fonction répertorie les étapes à exécuter par le programme. Considérez que nous écrivons un programme pour connecter un utilisateur à un site Web. Le programme peut comporter les tâches suivantes:

  • Obtenez le nom d'utilisateur
  • Obtenez le mot de passe
  • Vérifiez si le nom d'utilisateur et le mot de passe existent
  • Rediriger l'utilisateur vers son tableau de bord

Chacune de ces étapes peut être contenue dans une fonction de connexion. Ceci est un exemple de fonction:

fonction greet () console.log ("Hello, World");  

C'est la forme générale d'une fonction:

function functionName () statement; déclaration; etc. 

Pour exécuter la fonction (également appelée appeler la fonction ou l'invoquer), vous écrivez une instruction qui l'appelle.

saluer(); 

le () est l'endroit où nous passons l'entrée à la fonction. Lorsque nous définissons la fonction, l’entrée est appelée paramètre. Lorsque nous appelons la fonction, l'entrée sera la valeur réelle et s'appellera l'argument. Exemple:

fonction greet (nom) console.log ("Bonjour," + nom);  greet ("Alberta"); // Bonjour l'Alberta 

Avec JavaScript ES6, vous pouvez définir des fonctions à l'aide de la syntaxe en flèche. Voici notre fonction de salutation définie en utilisant la syntaxe de la flèche:

let greet = () => console.log ("Hello, World");

Une fonction avec un paramètre:

let greet = name => console.log ("Hello," + name);

Une fonction avec plus d'un paramètre:

let greet = (fname, lname) => console.log ("Bonjour," + fname + "" + nom); 

Une fonction avec plusieurs déclarations:

let greet = (fname, lname) => let nom = fname + "" + nom; console.log ("Bonjour" + nom); 

Comme une fonction de flèche est une fonction anonyme, nous attribuons un nom à notre fonction en l’affectant à une variable. Les fonctions fléchées peuvent être utiles lorsque votre corps de fonction n'a qu'une déclaration.

Fonction de retour de valeur

Ce type de fonction renvoie une valeur. La fonction doit se terminer par une instruction return. Cet exemple renvoie la somme de deux nombres.

fonction add (x, y) retour x + y; 

C'est la forme générale définissant une fonction renvoyant une valeur:

function functionName () statement; déclaration; etc. retourne une expression;  

La valeur de expression est ce qui est généré par la fonction. Ce type de fonction est utile quand il est stocké dans une variable. 

let nomVariable = nomFonction (); 

Portée

L'étendue d'une variable est la partie du programme où une variable peut être consultée. Une variable peut être locale ou globale. La portée d'une variable locale est à l'intérieur de la fonction dans laquelle elle a été créée. Aucun code en dehors de la fonction ne peut accéder à ses variables locales.. 

Aussi, quand vous utilisez laisser ou const pour déclarer une variable, ils ont une portée de bloc. Un bloc est un ensemble d'instructions qui appartiennent à un groupe. Un bloc pourrait être aussi simple que de mettre notre code entre accolades:

let a = 2; 

La variable une est local au bloc dans lequel il se trouve. Un bloc peut également être une boucle ou une instruction if. Exemple:  

Soit a = 1; si (5> 4) soit a = 2;  console.log (a); //1 

Parce que notre déclaration de console est dans la même portée que notre première variable une, il affiche cette valeur, qui est 1. Il n'a pas accès aux variables à l'intérieur du bloc if. Maintenant, considérons cet exemple:

Soit a = 1; si (5> 4) soit a = 2; console.log (a); // 2

Maintenant 2 sera affiché car la portée des variables auxquelles notre instruction de console a accès se situe dans le bloc if. Les paramètres d'une fonction sont également des variables locales et ne sont accessibles que par code dans la fonction. Les variables globales, quant à elles, peuvent être consultées par toutes les instructions d'un fichier de programme. Exemple:

Soit a = 1; fonction foo () a = 2;  console.log (a); // 1 foo (); console.log (a); // 2

Dans cet exemple, une est une variable globale, et nous y avons accès dans la fonction foo. La première instruction de la console affichera 1. Après avoir appelé foo, la valeur de une est défini sur 2, l'affichage de la deuxième instruction de la console 2. 

Les variables globales doivent être très peu utilisées, idéalement pas du tout. Les variables globales étant accessibles à n’importe quelle partie d’un programme, elles risquent d’être modifiées de manière imprévisible. Dans un grand programme avec des milliers de lignes de code, cela rend le programme plus difficile à comprendre car vous ne pouvez pas voir facilement comment la variable est utilisée. Il est préférable de créer et d'utiliser des variables locales.

Toutefois, si vous devez utiliser une variable à plusieurs endroits de votre programme, vous pouvez utiliser une constante globale. Déclarer une variable avec le const mot-clé l'empêche d'être modifié, ce qui le rend plus sûr à utiliser. Vous devez seulement vous préoccuper de la mise à jour de la valeur de la constante à l'endroit où elle a été déclarée..

Paramètres

Rappelez-vous qu'un paramètre est une variable qu'une fonction utilise pour accepter des données. Le paramètre reçoit la valeur des arguments d'une fonction lors de l'appel de la fonction. A partir de ES6, les paramètres peuvent également recevoir des valeurs par défaut avec le format NomParamètre = valeur. Dans ce cas, vous pouvez appeler une fonction sans argument et utiliser les valeurs par défaut. Exemple:

function greet (name = "world") console.log ("Hello," + name);  greet (); //Bonjour le monde

L'opérateur spread / rest est nouveau pour ES6 et peut être utilisé pour développer un tableau ou un objet en valeurs individuelles ou pour rassembler les paramètres d'une fonction dans un tableau. Voici un exemple d'utilisation d'un paramètre de repos:

fonction foo (… args) console.log (args);  foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Modules

Supposons maintenant que vous ayez un fichier de 1 082 lignes. (J'ai vu cela et vous devriez vous lancer si vous rencontrez un problème de ce genre.) Le fichier est organisé en fonctions, mais il est difficile de voir en quoi elles se rapportent.. 

Pour regrouper les comportements liés, nous devrions placer notre code dans des modules. Un module dans ES6 est un fichier contenant des fonctions et des variables connexes. Les modules nous permettent de masquer les propriétés privées et d'exposer les propriétés publiques que nous souhaitons utiliser dans d'autres fichiers. Le nom de fichier serait le nom du module. Les modules ont également leur propre champ d'application. Pour utiliser des variables en dehors de la portée du module, elles doivent être exportées. Les variables qui ne sont pas exportées seront privées et ne seront accessibles que dans le module..  

Les propriétés individuelles peuvent être exportées comme ceci:

fonction d'exportation foo () console.log («Hello World»);  export let let = 82; exportation laisser baz = [1,2,3];

Sinon, toutes les propriétés peuvent être exportées avec une seule déclaration d'exportation:

function foo () console.log ("Hello World");  let bar = 82; soit baz = [1,2,3]; exportation foo, bar, baz;

Pour utiliser les variables d'un module, vous l'importez dans le fichier. Vous pouvez spécifier ce que vous voulez importer depuis le module comme ceci:

importer foo, bar, baz de "foo"; 

Vous pouvez également renommer votre importation:

importer foo en tant que Foo à partir de "foo"; Foo ();

Ou vous pouvez importer toutes les propriétés du module:

importer * comme myModule de "foo"; myModule.foo ();

La revue

Les fonctions nous permettent de diviser nos programmes en programmes plus petits que nous pouvons facilement gérer. Cette pratique s'appelle la modularisation. Il existe deux types de fonctions: les fonctions vides et les fonctions renvoyant des valeurs. Une fonction vide exécute les instructions qu'il contient. Une fonction de retour de valeur nous renvoie une valeur.  

Scope est la partie du programme où une variable est accessible. Les variables déclarées à l'intérieur d'une fonction, y compris les paramètres de la fonction, sont locales. Les blocs ont également une portée et des variables locales peuvent être créées à l'intérieur de ceux-ci.. 

Les variables non comprises dans un bloc ou un module seront globales. Si vous avez besoin d'une variable globale, il est acceptable d'avoir une constante globale. Sinon, essayez de contenir votre code dans les modules car ceux-ci ont leur propre portée. Mais encore mieux, les modules donnent la structure et l’organisation de votre code.  

Ressources

  • repl.it
  • Spécification ES6
  • Vous ne connaissez pas JS: ES6 et au-delà