Master JavaScript Section 4 : Principes des fonctions

1. Introduction: Nous abordons une nouvelle section et des sujets passionnants. Dans cette section, nous traiterons de certains sujets qui sont vraiment essentiels à JavaScript. Tous ces sujets sont centrés sur les fonctions et la nature des fonctions. Ces concepts ont donné naissance à de nombreux modèles qui ont défini un haut niveau d'expertise en matière de développement. Et il est important que vous compreniez et que vous soyez capable d'appliquer ce qui se trouve dans cette section dans votre propre codage. Nous allons d'abord parler la nature des fonctions en JavaScript. La fonction JavaScript est très puissante car c'est un citoyen de première classe. Et les fonctions peuvent être utilisées de manière supérieure. Nous examinerons la fermeture, une fonctionnalité qui, selon moi, est l'une des fonctionnalités les plus utiles et les plus puissantes du langage JavaScript. Nous traiterons de l'invocation immédiate des fonctions et du modèle qui s'y rapporte. Nous avons donc beaucoup de choses à couvrir. Commençons donc. 2. Les fonctions sont des citoyens de première classe: Plus tôt dans ce cours, j'ai expliqué comment les objets sont omniprésents dans JavaScript, l' exception des primitives, tout le reste est un objet. Ainsi, comme nous en avons discuté à l' époque, les fonctions sont des objets. Le fait que les fonctions soient des objets est une caractéristique très importante. Cela permet aux fonctions de devenir des citoyens de première classe en JavaScript. Maintenant, l'idée que les fonctions sont de première classe signifie simplement que les fonctions sont traitées comme des valeurs qui peuvent être transmises. Et comme les fonctions sont des objets, c'est ce qui rend cela possible. Ainsi, lorsque nous pensons à une valeur, nous pensons normalement à quelque chose comme une chaîne ou un nombre. n'importe quel endroit, une valeur telle qu'une chaîne ou un nombre peut être utilisée. Une fonction peut également être utilisée parce qu'elle est traitée comme des valeurs, ce qui la rend de première classe. Pour consolider cette idée, examinons plusieurs exemples où des valeurs traditionnelles peuvent être utilisées et montrons qu' une fonction peut être utilisée au même endroit. Maintenant, les deux premiers exemples sont assez évidents. Nous pouvons attribuer une valeur telle qu'un nombre à une variable. Eh bien, nous pouvons également attribuer une fonction à une variable. Et nous l'avons déjà fait de nombreuses fois à chaque fois que nous créons une expression de fonction comme celle illustrée ici. Nous affectons cette fonction à une variable. C'est assez courant. Ce n'est pas étrange pour nous à ce stade. Maintenant, avant de montrer ce deuxième exemple, qui est également assez évident, je voudrais montrer quelque chose sur fonctions ici et la façon dont elles sont attribuées à la variable. On s'amuse bien dix. Et si je faisais quelque chose comme ça ? Et si je créais une autre variable ? Et c'est amusant dix a et ça équivaut à en financer dix. Alors, que se passe-t-il ici ? Puisque les fonctions sont des objets, ce qu'elles font, c'est attribuer une référence à cette même fonction ici. Attribuer une autre référence au fonds a. Cela ne revient pas à invoquer la fonction et placer un dix dans Fontan. N'oubliez pas que c'est une nette différence. Nous devons utiliser des parenthèses pour invoquer une fonction. Regardons donc cela très rapidement. Si nous devions regarder Fun Ten a sur la console, laissez-moi l'ouvrir. Nous voyons que c'est une fonction. C'est ce que nous affichons ici en tant que fonction. Cependant, si nous devions invoquer Fontan a en mettant des impressions après elle, nous obtenons le dix renvoyé, ce que cette fonction est censée faire. C'est un point très important à propos de l' utilisation de la variable à laquelle une fonction est affectée. Si nous ne mettons pas de parenthèses après elle, elle n'invoquera pas cette fonction. Très bien, maintenant, le deuxième exemple que nous voulons examiner, je vais juste le faire défiler ici, c' est qu'une fonction peut être affectée à une propriété d'un objet. Maintenant, nous l'avons déjà vu de nombreuses fois. C'est pourquoi celui-ci est également évident. En gros, const OBJ et définissez-le comme égal à un objet comme celui-ci. Et puis, si nous faisons des deux-points amusants, voici où nous placerions la fonction qui y est assignée. Et celui-ci va juste m'amuser. Maintenant, n'oubliez pas de l'invoquer, nous utilisons la syntaxe à points. Nous faisons simplement un point OBJ et ensuite, quelle que soit la propriété à laquelle il est attribué, dans ce cas, amusant. Une fois de plus, nous utilisons les doubles caractères pour l'invoquer. D'accord ? Comme nous l'avons déjà vu, cela peut être fait avec une méthode de raccourci comme celle-ci. Cela permettrait d'accomplir la même chose, en y mettant en place une fonction. Et on s'amuse en se connectant à la console. Je vais le fermer un peu pour que nous puissions régler la console. Très bien, donc c'est le deuxième. Ceux-là étaient trop évidents. Donc, le troisième, peut-être pas aussi évident. Et celle-ci est une fonction qui peut être stockée dans un tableau. Configurons donc un tableau ici. Et nous allons y mettre un numéro. Une valeur peut entrer dans un tableau, nous le savons déjà, mais pouvons-nous également y mettre une fonction  ? Eh bien, oui, nous le pouvons. Et cette fois, je vais utiliser une fonction flèche. En gros, il va juste en renvoyer dix, comme nous l'avons fait par le passé. Nous avons donc maintenant une fonction en deuxième position de ce tableau. Et nous pouvons l'invoquer à nouveau en utilisant les tendances. Nous devons donc indiquer la position dans le tableau comme ça. Ensuite, nous mettrons des amis après cela, nous l'invoquerons. Cela devrait donc en renvoyer dix. Donc, si nous le connectons à la console, comme ça, nous devrions en avoir dix sur la console. Et nous y voilà. J'ai commenté celui-ci ici, donc il n'y a que la seule chose que nous voyons là-haut. Ainsi, une valeur peut être stockée dans un tableau et une fonction peut être stockée dans un tableau. Désormais, une fonction peut faire partie d' une expression tout comme une valeur. Jetons un coup d'œil à celui-ci. Je vais faire une simple connexion à la console à l'intérieur de là. Je vais mettre une expression pour que nous puissions voir les résultats de cette expression. Voici l'expression. Je vais juste en faire 30 et plus quoi ? Eh bien, nous allons organiser une fonction. Je vais donc déclarer une fonction ici. Et je vais le faire revenir dix heures. Maintenant. Pour le moment, cela n'ajoutera 30 plus dix car cette fonction n'est pas invoquée. Nous venons de le déclarer ici. Donc, si nous devions enregistrer cela, permettez-moi de faire remarquer que si nous devions l'enregistrer, cela concatène simplement le texte de cette fonction au nombre 30. Cependant, si nous devions l'invoquer et cela revient à l'invoquer immédiatement. Et c'est un sujet que nous aborderons plus en détail dans cette section plus tard. Mais si je mets des doubles caractères juste après, voyons maintenant ce qui se passe. Maintenant. Il invoque la fonction, renvoie un tan, puis ajoute 30 à dix. Nous plaçons donc une fonction dans une expression, comme nous pourrions le faire pour n'importe quelle autre valeur. Maintenant, pour faire la même chose, juste pour que vous sachiez faire la même chose avec une fonction flèche, vous devez faire quelque chose comme ça, 30 ou plus. Et puis voici notre fonction de flèche. Et si nous y définissons cette grosse flèche qui indique le retour de dix, c'est génial, sauf que nous ne pouvons pas immédiatement placer les marques après cela. Nous devons mettre le tout entre parenthèses, comme ceci. Ensuite, nous pouvons mettre des parenthèses après. Nous devrions maintenant passer aux déclarations du journal de la console à 40. Et nous y voilà. C'est ainsi que vous procéderiez avec une fonction flèche. Maintenant, dans l'exemple suivant, nous pouvons transmettre des valeurs à une fonction. Un nombre peut être transmis à une fonction de chaîne, peut être transmis dans la fonction. Eh bien, les fonctions peuvent-elles être transmises en fonctions ? Pensez donc aux rappels. Nous avons fait beaucoup de choses avec les rappels. Et c'est un exemple de passage d' une fonction à une autre fonction. exemple le plus courant que nous avons probablement donné dans ce cours est donc l'utilisation de setTimeout. SetTimeout possède donc deux paramètres. L'une est une fonction que nous transmettons et l'autre est le temps en millisecondes. Ce serait donc 1 s. Ce premier paramètre n'est qu'une fonction que nous transmettons. Et je peux y faire une fonction flèche pour celui-ci. Et nous allons simplement enregistrer des points sur la console. Le temps est écoulé, quelque chose comme ça. Nous passons donc ici une fonction dans une autre fonction. Donc, si nous disons cela, nous obtenons le 240. Une seconde plus tard l'heure est affichée sur la console. Maintenant, le dernier exemple que nous voulons examiner est qu'une fonction peut être renvoyée à partir d'une fonction. Donc, en bas. Ainsi, tout comme nous pouvons transmettre une fonction dans une fonction, nous pouvons également en renvoyer une. Alors laisse-moi organiser quelque chose, amuse-toi. Réglez cette valeur comme égale. Nous déclarons une fonction ici. Et qu'allons-nous rendre ? Ce que nous allons renvoyer est une fonction. Je vais le déclarer ici après le relevé de retour, et nous n'aurons qu' un journal de console. Voyons voir, j'ai été renvoyé. Comment faire ça ? C'est donc notre déclaration de retour. Et que retournons-nous ? Eh bien, nous pourrions renvoyer un nombre, nous pouvons renvoyer une chaîne, nous pouvons renvoyer une fonction car elle est traitée comme une valeur. Maintenant, avec cette configuration, si nous créons un nouveau fonds, nous allons stocker la fonction renvoyée ici et la mettre à égalité pour nous amuser et utiliser le prince pour l'invoquer. Allez-y, sauvegardez ça. Voici les journaux de console que nous avons là-haut. Mais voyons maintenant ce que contient le nouveau fonds. Maintenant, si je mets du fun ici sans les marques, verrai le texte de cette fonction. Mais si je m'amuse avec les marques et que je les fais invoquer, alors nous obtenons la valeur de retour. Nous avons l'instruction du journal de la console, pas la valeur de retour. Nous renvoyons donc une fonction. Maintenant, nous pouvons faire quelque chose ici. J'ai assigné la fonction de retour à une variable, mais je pourrais aussi simplement appeler, m'amuser comme ça. Et cela va renvoyer une fonction. Et si nous voulions invoquer cette fonction renvoyée ? Nous pouvons simplement saisir un autre ensemble de plans juste après. Ces premiers tirages agissent donc sur la fonction get fun. L'ensemble de marques suivant agit sur cette fonction renvoyée et provoque son appel. Alors maintenant, si nous continuons et sauvegardons cela, nous devrions voir que j'ai été renvoyé sur la console. Et voilà, notre œil est revenu. Voici notre déclaration de journal de console SetTimeout. Il y a donc six exemples au total de la façon dont nous pouvons utiliser une fonction, comme nous utiliserions n'importe quelle autre valeur, telle qu'un nombre ou une chaîne, car une fonction en JavaScript est traitée comme une valeur et c'est pourquoi elle est de première classe. C'est pourquoi nous appelons les fonctions en JavaScript de première classe. Bien, maintenant que nous avons examiné ces deux derniers exemples, nous allons les aborder plus en détail dans la prochaine rubrique, lorsque nous parlerons des fonctions d'ordre supérieur. 3. Fonctions d'ordre supérieur: Dans la rubrique précédente, nous avons montré comment les fonctions en JavaScript sont traitées comme première classe, car elles sont traitées comme les autres valeurs. Dans cette rubrique, nous allons développer cette idée en parlant de fonctions d' ordre supérieur. Les fonctions d'ordre supérieur sont simplement des fonctions qui agissent sur d'autres fonctions soit en les prenant comme argument, soit en renvoyant une fonction. Nous en avons vu des exemples dans la rubrique précédente. En fait, les deux derniers exemples montraient des fonctions d'ordre supérieur. Le fait que JavaScript supporte des fonctions de première classe permet de créer des fonctions d'ordre supérieur. Le concept de fonctions de première classe explique donc comment les fonctions sont traitées en JavaScript comme des valeurs. Le concept de fonctions d' ordre supérieur explique comment nous les utilisons. Voici maintenant les deux derniers exemples que nous avons utilisés dans la rubrique précédente. Nous avons un délai d'attente défini et nous transmettons une fonction ici. Et nous avons également un autre paramètre qui est le temps. Ainsi, le fait que nous puissions utiliser une fonction comme paramètre et la transmettre fait que cette fonction agit sur la fonction setTimeout sur d'autres fonctions. C'est celui qui a été transmis et qui agit. pourquoi il s'agit d'une fonction d'ordre supérieur. Ici en bas. Cela devient une fonction amusante. Celle-ci renvoie une fonction et elle agit sur d'autres fonctions, il s'agit d'une fonction d'ordre supérieur. Donc, en gros, les fonctions d'ordre supérieur prennent des fonctions comme paramètre ou les renvoient. Nous comprenons donc ce que sont les fonctions d' ordre supérieur, mais pourquoi sont-elles si importantes ? Désormais, l' application la plus courante des fonctions d' ordre supérieur en JavaScript est le rappel. Il existe plusieurs méthodes en JavaScript qui nous permettent de transmettre une fonction qui sera utilisée dans le cadre de cette méthode ou fonction. Il sera donc rappelé. Chaque fois que nous créons un écouteur d'événements, nous configurons un rappel. Et ils sont donc assez courants en JavaScript. Maintenant, je veux utiliser la fonction setTimeout comme exemple et expliquer pourquoi elle est meilleure en tant que fonction d'ordre supérieur, qu'est-ce qui la rend meilleure ? Je vais donc maintenant accéder à un autre fichier de code où deux fonctions setTimeout ont déjà été créées. Maintenant, je voudrais d'abord me concentrer sur le dernier paramètre, qui est le nombre de millisecondes que le setTimeout exécute. Nous y transmettons donc des données. En transmettant des données à cette fonction setTimeout, cela la rend plus flexible. Au lieu d'appeler une fonction setTimeout qui s'exécute toujours pendant 3 s, nous pouvons transmettre le nombre de millisecondes que nous voulons qu'elle s'exécute. Et il fonctionnera pour ce numéro. Ainsi, en étant capable de transmettre des données, cela rend la fonction plus flexible. Cela nous aide également à éviter de répéter du code. Si nous devions avoir une fonction setTimeout qui fonctionne pendant 3 s et une autre qui fonctionne pendant 4 s. Elles font essentiellement des choses très similaires, mais un laps de temps différent. Ainsi, en étant en mesure de transmettre des données comme nous l'avons fait ici, nous nous en tenons à ce principe sec. Ne vous répétez pas. Ne répétez pas le code. Pour ce faire, nous transmettons un paramètre. Eh bien, on peut dire la même chose pour transmettre une fonction, pour créer une fonction d' ordre supérieur. Les données que nous transmettons contrôlent leur flexibilité. Par quelles données il peut agir. La fonction que nous avons transmise contrôle sa flexibilité en affectant son aspect fonctionnel. Prenons donc ces deux exemples. J'ai un setTimeout qui, après une seconde, se connecte simplement à la console. C'est un exemple. J'ai un setTimeout ici qui, après 2 s, se connecte ou renvoie deux plus deux. C'est un autre exemple. Maintenant, il est possible que pour répondre à ces deux exigences fonctionnelles, nous ayons créé une fonction de nous ayons créé journalisation setTimeout qui, chaque fois elle était appelée journal quelque chose sur la console, nous avons simplement transmis les données que nous voulions enregistrer. Et nous pouvons créer une fonction d' ajout setTimeout qui, à chaque fois qu' elle est appelée, ajoute des chiffres une fois le délai écoulé. s'agirait de deux fonctions distinctes. Et nous répéterions le code. Mais comme setTimeout est d'ordre supérieur, nous pouvons transmettre une fonction capable de tout faire. Il est donc plus flexible. Certains diront que c'est plus complexe. Et je pense que c'est lorsque vous l'apprenez pour la première fois, que vous avez découvert les fonctions d' ordre supérieur et que vous avez compris comment les utiliser. Mais une fois que vous les connaissez, ce n'est vraiment pas beaucoup plus difficile. Ce n'est vraiment pas le cas. Et la flexibilité devient très puissante. Donc, ne vous répétez pas, tout ce concept de séchage est l'une des raisons pour lesquelles nous voulons avoir des fonctions d'ordre supérieur. Maintenant, comme je l'ai mentionné, JavaScript regorge de fonctions d'ordre supérieur. Les méthodes utilisées dans de nombreux types différents sont des fonctions d'ordre supérieur. Par exemple, les tableaux ont plusieurs méthodes d'ordre supérieur. Ils acceptent une fonction comme paramètre , puis font quelque chose en utilisant la fonction transmise. Mais je tiens simplement à souligner et à vous faire prendre conscience que les fonctions d'ordre supérieur se trouvent partout dans JavaScript. Je pense que certaines personnes qui découvrent JavaScript ou qui débutent dans le domaine de JavaScript les évitent parce que cela semble complexe, mais on ne peut pas les éviter. Ils sont si puissants. Très bien, passons au sujet suivant. 4. Créer votre propre fonction d'ordre supérieur: Il existe de nombreuses méthodes en JavaScript qui tirent parti de fonctions d' ordre supérieur. Ils résolvent les problèmes en utilisant des modèles qui tirent parti de ces fonctions d'ordre supérieur. Et nous pouvons en tirer des leçons et l'utiliser dans notre propre couleur. titre d'exemple, examinons cette méthode de tri disponible pour les tableaux. Ici, j'ai deux tableaux, l'un avec des noms et l'autre avec des chiffres, et nous allons les trier. Faisons donc les noms et aussi les chiffres comme celui-ci. Jetez ensuite un coup d'œil aux résultats. Donc, si nous sauvegardons ça, laissez-moi revenir à la console. Et maintenant, nous examinons ces deux tableaux, les noms et les nombres. Nous pouvons voir qu'avec les noms, les choses sont triées correctement. Ils sont triés par ordre alphabétique. Mais ce que fait la méthode de tri avec les nombres, c'est qu'elle les convertit en chaîne, puis trie par ordre alphabétique en fonction de la chaîne. Nous avons donc des choses vraiment étranges ici avec des chiffres. Et le tri en lui-même n'est donc pas idéal pour les chiffres. Cependant, la méthode de tri a été configurée pour prendre comme paramètre une fonction d' ordre supérieur, une fonction de comparaison. Nous pouvons transmettre une fonction dans la méthode de tri. Il utilisera cette fonction pour effectuer une comparaison entre les éléments. Il analysera chaque élément deux à la fois dans le tableau et les comparera en fonction de la fonction que nous transmettons. Ensuite, cela déterminera l'ordre de tri. Maintenant, cela fonctionne si le premier argument est transmis. Ainsi, lorsque nous créons notre fonction, elle transmet les deux premiers éléments. Si le premier argument doit apparaître avant le deuxième argument, nous devons nous assurer que notre fonction renvoie un nombre inférieur à zéro. Si le deuxième argument doit précéder le premier argument d'un nombre supérieur à zéro, il doit être renvoyé. Maintenant, réfléchissez à l' avantage de cela. Nous allons le faire dans une minute. Mais pensez à l'avantage que cette méthode de tri ne se limite plus au simple tri des chaînes de caractères. Nous pouvons maintenant lui demander de trier d'autres choses car il accepte une fonction comme l'un de ses paramètres. Et il utilise cette fonction et l'appelle, dans ce cas, deux éléments à la fois au fur et à mesure qu'il les transmet. Essayons donc avec des nums. Je vais donc transmettre une fonction. Et comme je l'ai dit, cette fonction doit accepter deux paramètres. Il va accepter les deux premiers éléments, et ainsi de suite au fur et à mesure qu'il parcourt ce tableau. Maintenant, comme nous devons renvoyer un nombre inférieur à zéro, si le premier argument doit être, doit précéder le deuxième argument, nous pouvons faire quelque chose comme ceci, renvoyer a moins b. Et cela fera un ordre de tri. Du plus petit au plus grand. La semaine pourrait inverser la tendance dans l'autre sens. Parce que regardez, si 100 est transmis et que 95 est transmis pour a et B, 100 -95 équivaut à cinq. Il s'agit donc d'un nombre supérieur à zéro. Cela signifie que le deuxième argument viendra avant le premier argument, donc 95 seront placés avant 100. Maintenant, il va comparer tous ces chiffres ensemble et les classer par ordre de tri. Je sais comment faire. Tout ce que nous avons à faire, c'est transmettre la fonction comme nous l'avons fait ici. Donc, si nous sauvegardons ce chiffre et que nous examinons à nouveau les chiffres, nous constatons qu'il est de plus en plus petit. De nombreuses méthodes en JavaScript en tirent parti. La capacité d'accepter une fonction et de l'appeler en cas de besoin. Et nous pouvons faire la même chose dans notre code. Nous pouvons également en profiter. Disons que je voulais créer une fonction qui traite les chaînes de caractères. Permettez-moi de le copier ici, puis nous en reparlerons. Voici ma fonction qui traite les chaînes. Nous autorisons la transmission d'une chaîne, puis nous la convertissons automatiquement en majuscules. C'est ce que nous faisons dans cette fonction de chaîne de processus. J'essaie de rester simple afin que nous puissions garder ces informations de rappel au centre de nos préoccupations. Il va donc le convertir en majuscules. Cependant, si nous envoyons un rappel, il fera plus. Il fera tout ce que nous indiquerons avec une fonction. Donc, tout à coup, cette fonction est beaucoup plus puissante. Il peut faire bien plus encore. Remarquez maintenant comment nous traitons le rappel. Nous créons une nouvelle chaîne avec deux majuscules. Mais ensuite, nous vérifions si le type de rappel est égal à fonction. Donc, si quelque chose a été transmis et qu'il s'agit d'une fonction, nous l'invoquons. Et transmettez cette nouvelle chaîne que nous avons déjà faite, la conversion en majuscules. Ce rappel fait tout ce dont il a besoin et le renvoie. Ensuite, nous renvoyons cette valeur. S'il n'y a pas de rappel, nous renvoyons simplement la nouvelle chaîne que nous avons créée. Cela peut donc vous donner une idée, un modèle pour créer des fonctions beaucoup plus flexibles, beaucoup plus puissantes. Maintenant, allons-y et essayons ceci. Utilisons-le simplement pour voir comment cela fonctionne. Très bien, je vais faire un journal de console. Je souhaite donc enregistrer les résultats de ce qui est renvoyé par la chaîne traitée ou par la chaîne traitée à la console. J'appelle donc process stream, cette fonction juste là. Et je vais vous transmettre une ficelle. Alors allons-y et établissons une chaîne ici. Const STR 1. Je vais juste mettre cela comme égal à. C'est une chaîne, quelque chose de simple comme ça. Nous voulons donc transmettre cela dans STR one à cette fonction de flux de processus. Nous voulons maintenant passer un rappel. Et je vais configurer ce rappel ici. Donc je saisis la fonction, ce sera une fonction anonyme. Il existe un corset frisé maintenant je peux définir à quoi il sert. Mais une chose que nous devons faire est de nous assurer mettre une variable ici pour le paramètre que je vais juste appeler cette voyelle pour valeur. Parce que regardez ce qui se passe ici. Il transmet ce nouveau flux à ces fonctions de rappel. Nous devons donc nous assurer de l'accepter, accepter, puis d'en faire quelque chose. Eh bien, disons que tout ce que nous voulons faire, c'est simplement créer un tableau à partir de cette chaîne qui sera divisée sur l'espace. Nous utilisons donc la méthode du split et du split sur l'espace. Nous le rendrons donc une fois que nous l'aurons fait. Alors voici la méthode de fractionnement. Ensuite, nous y avons simplement mis de l'espace sur lequel nous voulons nous partager. Donc, ce que nous devrions obtenir, que devrait enregistrer sur la console, c'est cette chaîne est en majuscules ? À l'intérieur d'un tableau, chaque mot sera dans le sien, il y aura son propre élément dans le tableau. Nous avons donc rendu le fonctionnement de notre flux de processus plus puissant et plus flexible en le plaçant à un niveau supérieur. Alors allons-y, sauvegardons ça et regardons-y. Et là, nous obtenons un tableau. Tout en majuscules, chaque mot, son propre élément dans le tableau. Donc, ce que je veux que vous en retiriez, c' est la puissance des fonctions d' ordre supérieur. fonctions d'ordre supérieur sont utilisées dans tout JavaScript. Nous pouvons également tirer parti de cette fonctionnalité dans notre propre code. Et avec cet exemple simple, c'est ce que nous avons fait. Bien, passons à la section suivante. 5. Début de l'exercice : créer une fonction d'ordre supérieur: Tout au long du cours, nous avons déjà vu de nombreux exemples de fonctions d'ordre supérieur lorsque nous avons parlé du modèle de rappel. Comme je l'ai dit, ce sont toutes des fonctions d'ordre supérieur. Nous venons d'examiner quelques autres exemples dans les derniers sujets. Je pense donc qu'il est temps maintenant de faire un exercice dans le cadre duquel je vous demande de créer une fonction d' ordre supérieur. Je pense qu'une fois que vous en avez créé un vous-même, cela contribue à renforcer le pouvoir de cette idée. Je pense qu'il est important de cimenter, c'est quelque chose à retenir à propos de JavaScript. Cette lentille vers JavaScript, l' une des fonctionnalités qui le rend si puissant. Voici ce que j'aimerais que tu fasses. J'ai une variable déclarée votre message d'accueil, puis j'appelle une fonction. Et remarquez que je transmets trois paramètres. L'un est un message d'accueil, parce que cette fonction permet de créer accueil va créer un accord pour nous, autre en tant que nom. Et puis la troisième est une fonction. Donc, j'aimerais que vous créiez la fonction de création d'un message d'accueil et qu'elle prenne trois paramètres. Si seuls deux paramètres sont fournis, il renvoie simplement un message d'accueil. Mais si un troisième paramètre est fourni, savoir la fonction avant qu'elle ne renvoie ce message d'accueil en associant le terme et le nom, cette fonction devrait agir sur ce message d'accueil. Il doit donc d'abord assembler ces deux éléments , puis vérifier si la fonction existe et agir en conséquence. Créer un message d'accueil sera donc une fonction d' ordre supérieur. Cela va nous donner un peu plus de flexibilité. Non seulement nous serons en mesure de transmettre des données et de leur renvoyer un message d'accueil compilé, mais nous serons également en mesure de transmettre une fonction qui nous obligera à faire différentes choses avec ce message d'accueil. s'agit maintenant d'un exemple simple, mais il montre le modèle d' une fonction d'ordre supérieur ou le modèle d'utilisation d'un rappel pour rendre la fonction que vous créez plus flexible afin de lui donner de fonctionnalité afin que vous ne vous répétiez pas. Très bien, vas-y, essaie. Ensuite, lorsque vous serez prêt, passez au sujet suivant et nous l'examinerons ensemble. 6. Fin d'exercice : créer une fonction d'ordre supérieur: OK. Comment t'en es-tu sortie ? Je vais y aller et le faire ici. Cela vous donne l' occasion de comparer ce que j'ai fait avec ce que vous avez fait. Peut-être aussi apprendre d'autres choses. Donc ci-dessus, je vais commencer par configurer Function, créer, saluer. Juste comme ça. Nous voulons maintenant trois paramètres. Je vais les appeler Turn Greeks puis fn pour la fonction qui pourrait être transmise. D'accord. Maintenant, je vais déclarer une variable, et ce sera le message d'accueil initial, en rassemblant simplement les deux, le terme et le nom. Et il semblerait que je ne le savais pas. Je ne sais pas pourquoi j'y ai mis la salutation au lieu du nom. On y va. Il va donc associer le terme et le nom. Et il va placer cela dans cette variable. Je vais utiliser un modèle de chaîne. J'utilise donc une coche arrière, puis j'utilise le signe du dollar et les accolades pour une variable. La première variable, je veux inclure son terme, puis je veux un espace entre elles. Ensuite, je vais inclure la variable suivante, qui est un nom comme ça. Nous avons donc créé notre message d'accueil et celui-ci pourrait être renvoyé. S'il n'y a aucune fonction, nous la renverrons. Donc, la façon dont je vais procéder est de vérifier si cette valeur transmise est égale à une fonction. Si c'est le cas, nous allons exécuter la fonction dessus et renvoyer les résultats. Sinon, j' aurai juste un relevé de retour après le relevé if. Si l'instruction if ne s' exécute pas , l'instruction return s'exécute et renvoie ce message d'accueil. Voyons donc comment nous procédons. Je vais juste si alors tapez. C'est ainsi que nous découvrons si quelque chose est un type de fonction Fn triple égal et puis à l'intérieur d'une fonction entre guillemets. Donc, s'il s'agit d'une fonction, cette partie du code est assez simple. Nous voulons simplement renvoyer l' invocation de cette fonction. Mais lorsque nous l'invoquons, nous voulons le transmettre en guise de salutation. Voyons maintenant comment cela fonctionne. Ainsi, une fonction est transmise et placée dans cette variable. Puisque nous pouvons traiter les fonctions comme des valeurs, depuis la première classe, nous pouvons les stocker dans une variable. Maintenant que cette fonction contient cette variable, nous pouvons l'invoquer en utilisant parenthèses et nous transmettons un paramètre ici. Nous pouvons également vérifier s'il s'agit d'une fonction en utilisant le type de et qui doit être un point-virgule . Alors laisse-moi régler ça. Cette partie n'est vraiment pas si difficile. Parfois, ce qui est plus difficile, c'est ce que vous transmettez, la fonctionnalité que vous transmettez dans manière dont vous voulez accomplir quelque chose. Très bien, allons-y et finissons ça. Donc, si cela n'est pas exécuté, si cette partie n'est pas exécutée, nous voulons quand même renvoyer un message d'accueil. Donc, à la ligne suivante, je vais juste mettre «  retour », « salutation ». Et de cette façon, je peux l'utiliser avec ou sans fonction. Cela le rend d'autant plus flexible pour moi. Très bien, alors allons-y et sauvegardons ça. Et sautons d' ici et Sue ouvrira la console ici. Et j'ai déclaré une variable de salutation. Voyons ce qu'il y a dedans maintenant. Remarquez que nous avons bonjour Anika. C'est donc le terme utilisé au nom de cette personne transmise. Et puis ces points d'exclamation ont été ajoutés en fonction de la fonction. Je les passe, je vais juste revenir à cet appel. Donc, le terme, nom et il y a une fonction vont prendre le message d'accueil, puis voici à nouveau la chaîne du modèle. Il va donc prendre ce qui est terminé parce que ce message d'accueil est transmis ici, y est transmis, si riche qu'il le reçoit dans cette variable. Ensuite, nous utilisons cette variable dans une chaîne de modèle avec des points d'exclamation après elle. Très bien, donc ça fonctionne pour nous. Maintenant, permettez-moi de donner un exemple de création de notation sans transmettre de fonction. Je vais y aller. Maintenant, je vais simplement utiliser mon nom ici. Et cela fonctionne toujours parce que nous avons fait ce type de vérification. Nous faisons cela si l'instruction fonctionne toujours si nous ne transmettons pas de fonction. Maintenant, juste pour montrer la flexibilité de cette simple fonction d'ordre supérieur, permettez-moi d'en faire une autre. Je vais remplir une fonction différente ici. Je peux taper correctement ici. Et maintenant, pour cette fonction particulière, encore une fois, nous avons besoin d'une variable pour accepter un message d'accueil qui lui est transmis. fais à nouveau une fonction flèche, et je vais juste la convertir en majuscules. Donc quelque chose de simple comme ça. Voici donc un autre exemple. Maintenant, si j'appuie sur retour, j'obtiens cette syntaxe. Tu peux te voir ? Remarquez que j'ai oublié la virgule juste là. Donc je vais y retourner et je vais juste revenir ici. Le message est donc mal formé, fonction flèche. La raison est mal formée, c'est que nous n'avions pas de virgule de séparation. Donc, une fois qu'elle y est arrivée, elle a considéré que cela en faisait également partie. Et considérez donc que le métal se forme. Donc maintenant, si j'appuie sur Retour et que tout est en majuscules, cela montre simplement un exemple de ce que nous pouvons faire avec cette fonction très flexible. Très bien, j'espère que c' était un bon exercice pour vous qui vous a permis d'appliquer l'idée même de fonctions d'ordre supérieur. Très bien, passons à autre chose. 7. Fermetures: Nous en sommes arrivés à ce que je pense être l'un des concepts les plus importants de JavaScript. Fermeture. Vous devez comprendre et utiliser la fermeture pour être un développeur JavaScript sérieux. Maintenant, la fermeture n'est pas comprise par les nouveaux développeurs JavaScript. Je me souviens de la première fois où j'ai eu l'idée ou compris l'idée de clore la question. C'était un moment ah pour moi. Ensuite, j'ai pu le voir dans beaucoup de code et l'utiliser pour résoudre des problèmes particuliers. Je voudrais donc d'abord examiner une définition. Cela vient de Kyle Simpson. Il affirme que la fermeture se produit lorsqu'une fonction est capable de se souvenir d'un accès à sa portée lexicale, même lorsque cette fonction s'exécute en dehors de sa portée lexicale. Les variables et les fonctions de sa portée lexicale sont toujours accessibles à une fonction, même si cette étendue lexicale ne correspond pas à l'environnement en cours d'exécution. Maintenant, ces variables et fonctions sont conservées en mémoire car le moteur JavaScript voit qu'il y a encore quelque chose qui peut les référencer. Maintenant, quand est-ce que ce genre de chose se produit ? Quand une fonction est-elle exécutée en dehors de son champ lexical ? Eh bien, c'est très fréquent, mais pour le savoir et mieux l'expliquer, il faut commencer par regarder quelques exemples. Le premier exemple que je veux regarder, je vais appeler cette fonction « message d'accueil différé ». Et nous allons voir comment cela fonctionne. Ensuite, je vais expliquer ce qui se passe et quelle fermeture est en cours. Nous avons donc ici une fonction que nous pouvons transmettre à un nom de paramètre. Cela va nous faire une salutation. Nous allons déclarer deux variables à l'intérieur de cette fonction. L'un d'eux est le message d'accueil. Bonjour, nous ferons un espace par la suite. Ensuite, je vais utiliser un saut pour déclarer les deux. L'autre est une variable pompée pour la ponctuation. Et nous allons simplement définir cela un point d'exclamation. C'est tout. Voici donc nos deux variables. Maintenant, tout ce que nous allons ajouter est un setTimeout. Nous l'avons beaucoup utilisé par le passé, ce sera donc une excellente façon d'illustrer la clôture. Settimeout se fait transmettre une fonction. Comme nous le savons, cette fonction ne sera invoquée qu'après l'expiration du délai. Et lorsque le délai est écoulé, si vous vous en souvenez, la fonction est placée dans la file d'attente. Et puis, une fois qu'aucun autre JavaScript n'est en cours d'exécution, est ajouté à la pile et exécuté. Voici maintenant ce que nous allons enregistrer. Nous allons simplement enregistrer la variable grecque plus le nom transmis en m plus. Bien, maintenant allons-y et réglons ça à 5 s. Comme ça. Très bien, maintenant, permettez-moi d' en parler en termes de clôture avant de le regarder. Et laisse-moi y aller et faire un visionnage différé avec un diplôme ici pour qu'il l'invoque. Mais pour ce qui est de la fermeture, nous chargeons donc ce fichier JavaScript et la fonction. Et lorsque nous commençons à exécuter le code, nous rencontrons ceci, nous y ajoutons une fonction. Et puis nous rencontrons cela qui invoque. Cette fonction est ensuite placée sur la pile et commence à travailler sur le code qu'elle contient, crée un contexte d'exécution, contexte pour ce code. Ainsi, cette variable cette variable et cette variable sont toutes accessibles par le code contenu dans la fonction. Eh bien, il rencontre un délai d'attente défini et setTimeout est géré par le navigateur, comme nous le savons. Le navigateur commence donc à compter à rebours les 5 s. Eh bien, cette fonction est terminée. Avant que ce compte à rebours ne soit terminé. C'est fait et retiré de la pile. Qu'advient-il donc de ces variables ? Sont-ils toujours accessibles par cette fonction ? Comme cette fonction ne permet même pas encore de l'ajouter à la file d'attente, nous comptons toujours à rebours les 5 s. Ensuite, il est ajouté à la file d'attente. Et puis quand il y a de la place, elle est ajoutée à la pile. Et puis il commence à exécuter le code qu'il contient. Voici donc le code qu'il contient. Et maintenant, il faut saisir la salutation, nom et le punk, mais cette fonction a déjà été supprimée de la pile. Alors, que se passe-t-il ? Eh bien, c'est là que la fermeture intervient car le moteur JavaScript sait que cette fonction contient toujours une référence à ces variables qui font partie de son champ lexical. Lexical où il est écrit. Et c'est le champ d'application ici. Il y a donc toujours accès. Ils sont conservés en mémoire. Même si l'exécution de cette fonction est terminée et qu'elle est supprimée de la pile, ces variables ne sont pas nettoyées lorsqu'elles sont stockées en mémoire. Cette fonction est donc en mesure d'y accéder car ils faisaient partie de son champ lexical. Le moteur Javascript en sait assez pour les conserver afin de pouvoir les utiliser. C'est donc la clôture. Une fermeture est créée autour ces variables afin que cette fonction puisse toujours y accéder ultérieurement. Une fonctionnalité très puissante si vous y réfléchissez bien, nous pouvons faire exécuter et terminer quelque chose tout en ayant accès aux variables. Très puissant. OK, donc je veux enregistrer ça. Alors je vais le réduire un peu. Allons-y, ouvrons la console. Voilà mon premier retour. Je ne veux pas mettre de nom là-dedans. Pourquoi n'ai-je pas mis un nom sur un appel aussi correct, Steve, comme ça. Très bien, maintenant nous allons le sauvegarder. La fonction a disparu. C'est un compte à rebours, un compte à rebours, un compte à rebours. 5 s, c'est terminé. Bonjour, Steve, et nous avons accès à toutes ces variables en raison de la fermeture. Donc, au fur et à mesure que nous restons ou comme je l'ai indiqué, la fonction est supprimée de la pile. Malgré cela, les variables sont toujours conservées en mémoire car le moteur ou autre chose peut les référencer. Il peut donc s'agir de variables qui pourraient être une fonction que cette fonction appelle. Ils sont tous conservés en mémoire afin que leur accès, tant que cela fait partie du champ lexical, y ait accès et ils ne soient pas nettoyés par le moteur JavaScript. Très bien, prenons un autre exemple. Je vais accéder au fichier HTML ici, et je vais ajouter deux boutons. Et je veux que le premier bouton ait l'identifiant d'un bouton. J'utilise donc le raccourci pour le faire. M, Il s'agit d'un plug-in pour Visual Studio Code. Lorsque j'appuie sur la touche Tab, le bouton est créé pour moi avec le bon identifiant de bouton. Et je vais donner un nom au bouton. Cliquez sur Moi comme ceci. OK, maintenant nous allons mettre un autre bouton ici. Et je veux que celui-ci ait aussi un identifiant, mais celui-ci sera BTM pour le faire, Click Me too, comme ça. donc les deux boutons que nous avons ajoutés. Enregistrez ça. Voyons s' ils apparaissent. Oui, ils sont là. Et puis nous recevons ce message, ce code fonctionne toujours. Donc, si nous venons ici, je vais faire un commentaire à ce sujet pendant je vais faire un commentaire à ce sujet une minute pendant que nous faisons autre chose. Donc, ce que je veux faire, c'est créer une fonction d'initialisation. C'est une fonction que nous allons exécuter lorsque cette page se chargera et qui initialisera certaines choses, principalement les auditeurs d'événements. Je vais donc appeler cela une niche. Elle ment. Ensuite, je vais mettre quelques variables ici. Vous pouvez peut-être avoir une idée de ce que je fais ici avec Closure. Je vais configurer deux variables. Et ces deux variables seront toujours accessibles même une fois cette fonction d'initialisation sera complètement terminée. La fonction d'initialisation va donc s'exécuter en premier. Cela va configurer les auditeurs de l'événement que je fais actuellement. Voyons voir. Btn, l'un d'entre eux est l'un de ceux que je veux faire. Ajoutez un écouteur d'événements. Et nous allons utiliser l'événement Click pour les configurer et ensuite tout sera terminé. Mais même si cela sera terminé, nous aurons toujours accès à ces variables et nous verrons comment y faire face. Donc, l'une des choses que nous allons faire, c'est C et T. Nous allons simplement y incrémenter la première variable, puis nous connecter à la console C et T. C'est ce que nous allons faire dans cette première variable comme ça. Et laissez-moi continuer point-virgule là, et un point-virgule là. Et je vais juste copier celui-ci et faire le même genre de chose pour le suivant ici. Mais cette fois, nous allons faire des bits et deux, et cette fois nous allons augmenter le nombre, mais nous allons nous contenter du montant de l'augmentation. Nous allons donc faire des incréments plus égaux comme ça. Ensuite, nous enregistrerons à nouveau le décompte sur la console. Très bien, nous avons cette configuration. Maintenant, lorsque la page se charge, je vais appeler initialize. va donc fonctionner et il va être retiré de la pile. Cependant, ces variables seront conservées en mémoire car elles sont référencées par ces fonctions ici, ces fonctions anonymes qui font partie de l'écouteur d'événements. Alors, qui sait combien de temps cela prendra fois cette fonction terminée, avant que ces boutons ne soient cliqués ou même que vous n'ayez cliqué. Peu importe combien de temps cela peut prendre des années. Tant que cette page restera active, elle les conservera en mémoire et y aura accès. Très bien, alors sauvegardons ça. Et maintenant, il est évident que cette fonction initialisée est déjà terminée. Allons-y, faisons Click Me et nous serons connectés à la console. Cliquons sur celui-ci ici. Va-t-il se souvenir de ce nombre qui a été incrémenté ici ? C'est le cas. Il en ajoute deux autres. Et je clique dessus quand il en ajoute un. Donc deux fonctions différentes, mais qui ont la même portée lexicale. Ils s'adressent donc à la même variable. Et en raison de la fermeture, ces variables sont conservées. Ces deux fonctions permettent d'y accéder. Tu peux te faire une idée. Maintenant, le pouvoir que la fermeture peut apporter à JavaScript est vraiment une fonctionnalité importante de JavaScript. Nous avons fourni les premiers exemples de fermeture à l'aide de setTimeout et également à l'aide de AddEventListener. Eh bien, ce que je veux faire ensuite dans le sujet suivant, c'est que nous allons utiliser une fonction d'ordre supérieur pour afficher également l'application de la fermeture. Passons donc au sujet suivant. 8. Utilisation de la fermeture avec des fonctions retournées: Lorsque nous parlions de fonctions d'ordre supérieur, l'une des choses qui rendaient une fonction d'ordre supérieur est si elle redevient fonction. En combinant cette fonctionnalité avec la fermeture, nous avons une construction assez puissante. Parce que tout à coup, nous pouvons renvoyer une fonction à partir d'une fonction. Et cette fonction renvoyée aura accès à la portée de la fonction d'origine, à n'importe quelle configuration de variable. Et ses fonctions sont déclarées. Nous aurons accès à tout cela. L'un des avantages de cela est que nous n'avons pas eu à placer aucune de ces variables en tant que fonctions sur la portée globale afin de les rendre accessibles. Dans un sens, ils sont privés. Ils ne sont accessibles que par des objets relevant de son champ d'application. Et la fonction de retour peut continuer à agir sur eux et à les utiliser. Regardons un exemple. Très bien, remarquez maintenant le nombre de choses que nous avons déclarées ici. Nous avons une variable, nous avons trois fonctions, puis nous avons cette fonction qui est créée en composant les trois fonctions qui la précèdent. Nous en avons donc une bonne partie qui est déclarée ici et qui se trouve sur l'espace mondial. En utilisant cette idée dont nous venons de parler, mettons le tout dans une fonction, puis demandons-lui de renvoyer une fonction qui le fera. Même chose. D'accord ? Alors appelons-la simplement, appelons-la fonction Get pour des raisons de simplicité. Et je vais prendre ça et supprimer ça. Ensuite, allons-y et indentons tout cela. Ici en bas. Ajoutez le corset bouclé de fermeture. Voilà donc notre fonction. Nous avons cette configuration, mais nous devons maintenant renvoyer une fonction. Nous pouvons donc le faire en remplaçant simplement cette partie ici par return. Et cette fonction va être renvoyée ici. Maintenant, assignez cela à multiplier par cinq et ainsi de suite. Nous pouvons déclarer cette variable. Et nous pouvons la mettre sur un pied d'égalité avec cette fonction que nous venons de créer. Ainsi, lorsque cette fonction se termine, la fonction get se termine, elle renvoie une fonction qui sera placée, multipliée par cinq et affichée. Très bien, maintenant cette fonction est là, même si la fonction ci-dessus est complètement terminée, elle est supprimée de la pile. Il aura accès à ceci et à ceci et à cela et au nombre que les variables pourront avoir accès à tout ce qui sera disponible. Et puis si nous changeons la signature de celui-ci. Donc, si nous ne transmettons qu'un chiffre, disons deux. Et puis ici, nous utilisons le numéro un à partir de ce qui a été déclaré précédemment. Maintenant, cela va toujours être multiplié par cinq et quelque chose d'autre, peu importe ce qui est transmis. Cela le fera donc multiplié par cinq et affichera, ce qui sera renvoyé ici. Maintenant, nous ne transmettons qu'un seul chiffre comme celui-ci. Maintenant, allons-y et sauvegardons ça. Et nous allons y jeter un coup d'œil. Ouvrez la console ici. Et nous devrions avoir accès à la multiplication par cinq et à Display. Et passons dans six. Cela nous donne 30 formats qui mettent la ponctuation après de toute façon, et 30 formats qui mettent la ponctuation après de toute façon, qui remplissent toutes les autres fonctions qui faisaient partie de cette fonction. Cette fonction ici, la fonction get, fonctionne, elle a donc accès à toutes ces fonctions. Maintenant, une autre chose que nous pourrions faire pour améliorer encore les choses est d'utiliser le numéro un ici. Nous pouvons nous débarrasser de la déclaration ici et l' avoir simplement comme paramètre. Maintenant, lorsque nous créons la fonction de multiplication par cinq et d'affichage, nous transmettons cinq. Mais nous pouvons aussi créer multiplié par, faisons dix et affichons. coup, cela devient beaucoup plus flexible. On y passe juste dix. Nous avons donc maintenant deux fonctions qui ont été créées à partir de cela. Et chacun d'entre eux a accès à tout ce qui fait partie de la portée lexicale de cette fonction renvoyée. Cela devient, devient très puissant de cette façon. Alors jetons-y un coup d'œil. Faisons notre multiplication par cinq. Faisons-en sept cette fois. Cela fonctionne donc toujours pour nous. Et maintenant, nous avons également une multiplication par dix. Faisons-en sept également sur celui-ci. Nous avons donc maintenant deux fonctions qui ont accès à tout ce qu'il contient. La portée de la fonction get, même si cette fonction n' est plus en cours d'exécution. Le moteur JavaScript est suffisamment intelligent pour savoir qu'il peut y avoir quelque chose qui y fait encore référence ce qui permet de clore ce point. Ils sont conservés en mémoire. Et grâce à la fermeture, nous sommes en mesure d'y accéder. Maintenant, permettez-moi de vous montrer autre chose que nous pouvons faire tout comme nous avons affaire à des fonctions d'ordre supérieur ici, le boîtier. Laisse-moi poursuivre et passer à la console. Je vais appeler get function. Et je vais décéder dans 20 ans cette fois. Maintenant, qu'est-ce que cela va vous rapporter ? Eh bien, cela va renvoyer une fonction comme nous pouvons le voir ici. Maintenant, puisque cela renvoie une fonction, je pourrais faire quelque chose comme ça. Puisque la fonction est renvoyée, je pourrais l'invoquer immédiatement. La prochaine série de parenthèses invoquera la fonction renvoyée. Et je vais passer en cinq, ce qui devrait être égal à 100. Nous avons maintenant une fonction. Si nous utilisons simplement la fonction gap cette façon, nous avons une fonction où nous pouvons multiplier deux nombres quelconques et les afficher. Maintenant, ce que j' essaie de vous montrer ici, c'est simplement la flexibilité due la fonction d'ordre supérieur, cause de la fermeture qui a été créée. C'est pourquoi j'ai dit c'était une construction puissante en JavaScript connaître que nous devons connaître et utiliser. Très bien, passons au sujet suivant. 9. Caractéristiques importantes des fermetures: Maintenant, je sais que j'ai beaucoup insisté là-dessus, mais les fermetures sont importantes. Je souhaite utiliser ce sujet pour souligner deux caractéristiques des fermetures qui les rendent importantes. Or, ce ne sont pas les seules caractéristiques des fermetures. Mais deux que je veux m' assurer que vous comprenez. La première caractéristique est que les fermetures peuvent nous aider à utiliser efficacement les tâches gourmandes en mémoire ou en processeur. Permettez-moi maintenant d'en donner un exemple. Voici donc notre code que nous utilisions auparavant. Et disons que dans le cadre de ce code, nous avons un processus qui récupère les données d'une base de données ou d'une API sur un site. Et ce que nous en retirons en obtenant cette vaste gamme. Maintenant, je vais représenter cette vaste gamme avec une petite matrice. Mais considérez cela comme un taux énorme. s'agit des données qui reviennent de l' API du site à l'aide d'une sorte de commande asynchrone. Nous aborderons les choses asynchrones plus tard. Mais nous devons y faire face de manière asynchrone car il faut beaucoup de temps pour qu'il revienne. Mais quand il revient enfin, nous obtenons ce tableau de chiffres. D'accord ? Ensuite, nous le transformons en un indice. Et en gros, ce que nous faisons, c'est saisir dans l'immense éventail le nombre que nous allons choisir. D'accord ? Maintenant, permettez-moi de souligner à nouveau que pour récupérer ces données, il faut un certain temps pour qu'elles soient envoyées dans il faut un certain temps pour qu'elles soient envoyées la base de données ou sur le site , qu'elles soient récupérées et renvoyées. Nous devons donc y faire face de manière asynchrone. Maintenant, demandez-vous si chaque fois que nous voulions multiplier des nombres ensemble, nous devions effectuer cette tâche intensive. Nous avons dû aller chercher ces données. Chaque fois que nous le faisions, cela prenait quelques secondes ou peu importe, même s'il s'agit d'un petit nombre de secondes, voire de millisecondes, cela peut s'accumuler à chaque fois que nous sortons et que nous le faisons. Cela peut donc être intensif. Eh bien, si notre fonction, la fonction sort et l'obtient une fois, alors nous l'avons stockée dans cette variable. Et puis, une fois la fermeture terminée, nous pouvons continuer à y accéder à l'aide de l'écran Multiplier par cinq, puis multiplier par dix sorte que chaque fois que nous voulons multiplier par cinq, nous n'avons pas à sortir et obtenez ces données. Chaque fois que nous appelons cette fonction. Il s'agit simplement de faire référence à ce que nous avons déjà stocké en mémoire. Le processus pour l'obtenir est déjà terminé. Très bien, c'est ainsi que cela peut nous aider à utiliser efficacement gourmandes en CPU, en temps ou tâches gourmandes en CPU, en temps ou en mémoire. En utilisant Closure, nous pouvons le rendre disponible en permanence. Très bien, maintenant, la deuxième fonctionnalité, fonctionnalité dont je voudrais parler, s' appelle l'encapsulation. À présent. Afin de comprendre ce qu'est une encapsulation, permettez-moi de développer cette idée. Nous en sommes arrivés là où nous avons cette vaste gamme. Disons que c'est quelque chose, ce tableau est quelque chose que nous ne voulons pas changer. Willy Nilly, dans n'importe quelle partie du programme. Il n'y a qu'un seul endroit où nous voulons pouvoir le modifier, et aucun autre endroit du programme ne devrait-il être autorisé à le faire ? Eh bien, nous pouvons configurer une fonction, quelque chose comme celle-ci, dans laquelle nous transmettons un nouveau numéro, puis ce nouveau numéro est ajouté au tableau et c'est la seule façon de le mettre à jour. D'accord ? Nous allons donc simplement pousser ici avec un nouveau numéro. Nous ne voulons donc pas que les gens puissent accéder à son tableau et y ajouter des chiffres. En fait, chaque fois que quelqu'un y ajoute un numéro, nous voulons peut-être chaque fois que quelqu'un y ajoute un numéro, le vérifier d'une manière ou d'une autre pour assurer qu'il répond à certains critères. Nous pouvons donc avoir une déclaration if ici. Si num est supérieur à 100, c'est peut-être tout ce que nous acceptons ou quelque chose comme ça. Ensuite, nous irons de l'avant et poursuivrons. Nous contrôlons donc l' ajout de nouveaux nombres à ce tableau à l'aide de cette fonction. Donc, la seule façon dont les gens peuvent manipuler le tableau est d'utiliser cette fonction. Ils doivent passer par là. Maintenant, nous revenons à fonctions qui ne sont évidemment pas autorisées. Une façon de le faire si nous avons deux fonctions, que nous voulons revenir à partir de quelque chose comme ça, est de renvoyer un objet. Donc, si nous modifions également cette fonction, mettez à jour le tableau comme ça. Et nous changeons celui-ci pour créer une fonction comme ça. Nous pourrions ensuite renvoyer un objet. Et nous aurions un tableau de mises à jour et nous créerions du fun. Ils feraient tous deux partie de cet objet. Ainsi, lorsque nous appelons cette fonction, le retour est un objet. Alors, obtenez de la fonction. Ce que nous obtenons en retour est un objet. Ensuite, nous pouvons utiliser cet objet. Nous pouvons utiliser OBJ pour mettre à jour le tableau pour appeler cette fonction ou OBJ point create fund pour appeler cette fonction. Quoi qu'il en soit, c'est ainsi que nous procéderions au lieu de faire deux fonctions de retour. Mais ce que je veux en venir, c'est que nous avons maintenant créé une fonction selon laquelle c' est la seule façon de modifier ce tableau. Nous avons donc inclus ce tableau dans une fonction. Nous l'avons encapsulé. s'agit donc d'encapsulation, elle ne la protège que de manière unique, une façon de la modifier et nous pouvons vérifier au fur et à mesure que cela change. Et en réalité, ces autres fonctions sont également encapsulées. Ils ne sont pas disponibles en dehors de cette fonction. La seule façon de les utiliser, c'est ici. Cela y a accès, mais rien d'autre n'y a accès. Ils sont donc encapsulés. Le test, l'idée de l'encapsulation. Ces deux caractéristiques sont importantes en matière de fermeture. Très bien, passons au sujet suivant. 10. Début de l'exercice : fermeture 1: Très bien, il est temps de faire un exercice de plus près. Je vais maintenant vous présenter le problème dans cette première vidéo, puis dans le sujet suivant, nous passerons en revue la solution. Maintenant, ce problème particulier est quelque chose que vous pouvez voir sur Internet. C'est un problème qui est présenté à de nombreuses reprises pour illustrer la fin. Peut-être aussi dans le cadre d'un entretien en JavaScript. C'est donc très pratique dans le sens où c'est le genre de problème que les gens présentent pour voir si vous comprenez la fin. Jetons donc un coup d'œil à ce que c'est. Très bien, j'ai donc un tableau ici et le taux d'apprenants, et ce ne sont que des noms, prénoms dans ce tableau. Cinq apprenants au total. C'est tout ce qu'il y a. Ensuite, nous avons une boucle pour et nous parcourons cette matrice en boucle . Nous avons déclaré la variable. Nous parcourons la boucle alors qu' elle est inférieure à la longueur de ce tableau. Et puis nous avons augmenté ici. Et puis à l'intérieur de cette boucle, nous avons un délai d'attente défini. Et c'est la fonction qui est placée dans la file d'attente une fois le temps écoulé. SetTimeout est donc géré par le navigateur, l'API Web. Et lorsque ces 2 s expirent, cette fonction est placée dans la file d'attente et dans la boucle d'événements Dès qu'elle a de la place, elle l'ajoute à la pile et cette fonction est exécutée. D'accord, nous connaissons donc tout ce processus. Maintenant, allons-y et voyons quels en sont les résultats. Nous étudions cette question. Qu'est-ce que cela va afficher le journal de la console ? Donc, si j'ouvre la console ici, en gros, j'obtiens cinq déclarations non définies. C'est tout ce que j'ai noté dans le journal. Ainsi, lorsqu'il se connecte à la console, il ne trouve rien dans le tableau et s'affiche simplement de manière indéfinie. Cela comporte donc deux parties. Cet exercice comporte deux parties. Tout d'abord, je veux que vous réfléchissiez et que vous soyez en mesure d'expliquer pourquoi il y en a cinq qui ne sont pas définis Pourquoi cela se produit-il ? Et expliquez-le en fonction de ce que nous avons appris sur la portée. La deuxième partie consiste ensuite à utiliser la fermeture pour résoudre ce problème afin que cela ne se produise pas. Pour que nous soyons réellement connectés à la console, les noms qui se trouvent ici dans le tableau. donc deux parties à cet exercice. Maintenant, je dirais qu' il existe un moyen simple de résoudre ce problème, mais je veux que vous utilisiez la clôture pour le résoudre. Nous parlerons de la méthode la plus simple à la fin de la solution, car je pense qu' il est également important de comprendre cela. La clôture et cet autre concept sont tous deux importants à comprendre. Alors prenez un peu de temps. Lorsque vous serez prêt, passez au sujet suivant et nous passerons en revue cette solution. 11. Fin d'exercice : fermeture 1: Comment t'es-tu comportée sur ce coup-là ? J'espère que vous serez en mesure de résoudre ce problème. Voyons d'abord pourquoi les cinq ne sont pas définis. Faisons-le d'abord. Remarquez donc que tout ce qui est créé ici n'est pas créé à l'intérieur d'une fonction, donc cela aura une portée globale. C'est donc une question de portée mondiale. Cette déclaration de réalité virtuelle, l'œil, a une portée mondiale. D'accord, donc cela est placé dans une perspective mondiale. Ensuite, nous avons lancé notre premier setTimeout. Cela est géré par le navigateur. Commencez à compter en deux secondes. La boucle pour continue. Donc, en gros, cinq de ces cinq SetTime s' éteignent très rapidement après l'autre et ils sont tous prêts pour 2 s. D'accord ? Maintenant, le temps que nous arrivions à cette dernière étape, la dernière itération de celle-ci pour la boucle i est incrémentée. Et donc à ce moment-là, j'en ai cinq. Et j'ai une portée mondiale. Donc, une fois ces 2 secondes terminées pour la première, cette fonction est placée dans la file d'attente. Il est capté par la boucle d'événements et placé dans la pile. Il invoque. Cette ligne est exécutée ici. Le cinquième apprenant n'est pas défini. Nous avons 012345 non défini. C'est pourquoi nous obtenons l'indéfini. Donc, ce que nous voulons faire, c'est configurer la fermeture de manière à fermer une variable qui peut ensuite être utilisée ici. Et il n'utilisera pas la variable globale I, qui est modifiée chaque fois que nous parcourons la boucle for. D'accord ? Et en configurant une fonction, nous définissons un nouveau périmètre. La fermeture est donc gérée pour cette étendue et pour la variable que nous utilisons dans celle-ci. Alors allons-y et voyons comment nous pourrions y parvenir. Il y a plusieurs façons de procéder. Mais la première, je vais juste créer une fonction ici. Et je vais faire une déclaration de fonction cette fois juste pour la raccourcir. Je vais l'appeler Show Learner. Ensuite, allons-y et arrêtons ça. Et nous allons le coller dans cette fonction. Comme nous avons configuré une nouvelle fonction, nous avons défini un nouveau champ d'application. Nous pouvons maintenant y placer une variable. Donc, laissons l'apprenant sur un pied d'égalité et je vais simplement l'adapter aux apprenants. Et puis l'index I. Nous allons donc attribuer l'un des noms à cette variable d'apprentissage. Et c'est exactement ce que nous allons afficher ici. Ainsi, à cause de la fermeture, lorsque cette fonction se déclenche, elle aura accès à cette variable. Et chaque fois que cette fonction est invoquée, elle crée une toute nouvelle variable pour la nouvelle portée créée. Donc, ici, j'aurais besoin de mettre Show Learner. Il est donc invoqué à chaque fois par ce biais pour une boucle. Maintenant, lorsque nous abordons expressions de fonction immédiatement invoquées, il existe un moyen plus simple de le faire, que nous examinerons à ce moment-là. Mais pour l'instant, j' invoque simplement la fonction ici. Il appelle ceci, définit une variable à l'intérieur de la portée de cette fonction. Cette fonction car elle fait référence à cette variable. Et à cause de la fermeture, cette variable sera conservée en mémoire afin qu' elle puisse y accéder. Et cela devrait résoudre le problème pour nous. Donc, si je dis ça après 2 s, tous les noms s'affichent. Très bien, c'est donc une approche. Je vais copier ceci. J'ai donc une version de chacun d'entre eux dans le code que vous pouvez consulter. Je vais simplement commenter celui-ci. Une autre approche aurait donc été de définir une variable idx, peut-être pour l'index, et de simplement la définir sur I. OK, donc cette variable fait maintenant partie de cette portée. Cela va donc permettre d'accomplir la même chose. La seule différence est ici. Au lieu de i, nous utilisons idx pour référencer la position dans le tableau. Et cela fonctionnera tout aussi bien pour nous. Si je sauvegarde ça, on saute d'ici au bout de 2 s, on peut voir les noms s'afficher. Très bien, maintenant j'ai mentionné qu'il existe également une solution simple à cela. Je vais donc vous montrer quelle est cette solution simple. Laissez-moi copier ceci. Donc, ces deux premières solutions, en utilisant Closer, permettez-moi simplement d'y faire un commentaire. Utilisation de la fermeture. Commentez-le. Nous n'avons donc plus affaire à ça. La seconde utilise simplement la propriété de LET. Maintenant, si vous vous souvenez que l'une des différences dont nous avons parlé avec let et const par rapport à var, c'est que les inconvénients latins ont une portée de bloc. Que signifie une lunette bloquée ? Dans le cas de ce For-Loop ? Je vais le supprimer très rapidement et me laisser m'en débarrasser. Nous allons simplement le remettre tel qu'il était. Je veux donc utiliser I ici pour y faire référence. Revenons maintenant à l' idée de la portée par blocs. Que signifie Walk Scope ? Eh bien, la lunette est ici. Donc, comme c'est une étendue par bloc, si nous la changeons en lat au lieu de var, elle est déjà étendue à l'intérieur de celle-ci. Et cette fonction y fera toujours référence jusqu'à la fermeture. La variable I sera donc conservée en mémoire. Et à chaque étape de la boucle, il s' agit essentiellement de déclarer une nouvelle variable i. En raison de la portée des blocs que nous obtenons avec let. Très bien, et donc chacune de ces fonctions aura une référence à ce I. Et cela résoudra le problème pour nous. D'accord ? Cela résout donc le problème en utilisant une fonctionnalité de let que l'on oublie parfois. Nous oublions que le scoping par blocs peut faire ce genre de choses pour nous. Mais laissez-moi vous montrer que je vais économiser cela. Sautez à nouveau après 2 s. Mêmes résultats, mêmes résultats. Maintenant, je crois avoir mentionné quand je parlais du fait que cette solution n'utilise pas vraiment close. Eh bien, il utilise la fermeture. Nous sommes toujours en train de fermer une variable. Maintenant, les styles de fonction y font référence. Mais si cela fonctionne et que var ne fonctionne pas, c'est parce que lat a cette portée de bloc ici. Var n'a pas de portée de bloc et a donc été étendue au contexte global. C'est donc une autre solution. Maintenant, si vous n'avez pas réussi à trouver cette solution, j'espère au moins que vous la comprenez. J'espère que vous voyez comment ils utilisent la fermeture pour résoudre le problème pour nous. Et j'aimerais que tu fasses encore un exercice, pour que nous en fassions un autre ensuite. Passons à autre chose. 12. Début de l'exercice : fermeture 2: Je vais vous demander de faire un deuxième exercice sur les fermetures. Comme vous pouvez le constater, j'ai ajouté trois boutons à cette page HTML. Et cet exercice implique ces trois boutons. Permettez-moi de poursuivre et de passer au fichier de code. J'ai une description de ce que j'aimerais que tu y fasses. Et ce sont les mêmes fichiers de code que vous utiliserez pour l'exercice. abord, en haut, j'ai créé trois constantes contenant les boutons que j'ai créés sur une page HTML. Ces trois boutons ici, vos références, ces trois boutons, je les ai créés. Vous pouvez les utiliser ou créer les vôtres. Je viens d'ajouter cela au cas où certains ne sauraient pas comment sélectionner ces boutons dans le DOM. Maintenant, voici ce que j' aimerais que tu fasses. Chaque fois que vous cliquez sur l'un de ces boutons, deux chiffres devraient s'afficher. Le premier chiffre qu'il doit afficher est le nombre de fois que ce bouton a été cliqué. Et puis un deuxième chiffre est la valeur cumulée des trois boutons. Il devrait donc dire quelque chose comme ça. J'ai été cliqué trois fois. Les trois boutons ont été cliqués dix fois, quelque chose comme ça. Et il est important que vous utilisiez la fermeture pour y parvenir. Maintenant, soyez attentifs. Il existe des centaines de façons de résoudre ce problème. Il existe des centaines de façons de résoudre en dehors de la fermeture, mais il existe des centaines de façons d' utiliser Closure pour le résoudre. Votre solution sera donc probablement un peu différente de la mienne. Le fait est que je veux que tu utilises la clôture. Je veux que vous vous entraîniez à le faire et à réfléchir votre code avec la fermeture comme outil pour résoudre ces problèmes. C'est ainsi que j'aimerais que tu abordes cette question. Très bien, vas-y et laisse-moi un peu de temps. Une fois que vous êtes prêt à passer à autre chose et à voir la solution, passez au sujet suivant. 13. Fin d'exercice : fermeture 2: Très bien, passons en revue ça. Maintenant, je suis presque certain que ma solution sera un peu différente de la vôtre. Je pense que beaucoup d'entre vous ont créé une fonction externe. Vous déclarez trois variables, quatre variables, en fait une pour le compte total, puis peut-être une variable pour chaque nombre de boutons. Ensuite, vous les incrémentirez aux moments appropriés et afficherez le message approprié. Je vais adopter une approche légèrement différente pour résoudre cette solution. Je voulais m'assurer d' utiliser le principe DRY. Je ne voulais pas répéter des choses que je n'avais pas besoin de répéter. Je vais avoir une seule fonction qui va s'afficher. Je vais avoir une construction unique. Il va ajouter un auditeur d'événements à chacun d'entre eux. Et en gros, j'ai éliminé l'utilisation de toute déclaration IF car je suis capable de faire ce que j'ai fait grâce à la clôture. Comme je suis sûr que votre solution utilise également la fermeture. Alors allons-y et commençons afin que je puisse vous montrer ma solution. Nous pouvons en tirer des leçons ensemble. Je vais donc d'abord configurer une fonction d'initialisation qui sera la fonction externe qui va établir tout cela. Ensuite, je voudrai l'invoquer pour que les choses commencent. Je vais donc le mettre ici. Double impression pour indiquer que nous invoquons cette fonction. Maintenant, ce que je vais faire avec ces déclarations, c'est créer un tableau, appelant simplement des boutons. Et ce tableau va contenir chacune de ces déclarations. Maintenant, si je fais cela, c'est que je vais déclarer les auditeurs avancés avec une boucle. Je veux donc les mettre dans un tableau juste pour me simplifier la tâche. Parce qu'alors je peux simplement parcourir ce tableau, saisir chaque élément, chaque élément, ajouter l'écouteur d'événements, puis je suis prêt à partir. Voici donc ma gamme. Maintenant, je dois configurer une autre variable. Ce sera le décompte total. Cela doit en faire partie dans le cadre de cette fonction globale. Parce qu'il va falloir l' incrémenter par les trois boutons. Je vais donc d'abord le mettre à zéro. Très bien, alors que j' y réfléchissais, je me suis dit que chacun de ces boutons allait afficher le même message. Je devrais donc vraiment avoir une fonction capable d'afficher ce message dans chacun de ces boutons qui va incrémenter la variable du nombre total. Je devrais donc avoir une fonction qui le fasse également. Alors je me suis dit : « Eh bien, je pourrais regrouper ces éléments dans une seule fonction. Je vais donc le configurer maintenant. Incrémenter et afficher. Si je peux taper des compteurs, c'est comme ça que je vais l'appeler. Juste à l'intérieur, je peux immédiatement incrémenter la variable du nombre total. Ensuite, je peux enregistrer le message sur la console. Et je vais utiliser un modèle de chaîne juste pour rendre les choses un peu plus faciles. Et je vais copier, je vais juste copier exactement la même phrase ici. C'est ce que je voulais afficher de toute façon, donc je vais simplement le copier. Maintenant, à la place du décompte total, celui-ci est là. Je dois mettre le nombre total de variables. Et qu'est-ce que je vais mettre ici ? Eh bien, je pense que je vais faire passer le compte à chaque bouton. Et ainsi je pourrai remplacer cela par ce passé invariable. Puisque c'est un paramètre. La portée de cette variable est ici, alors que la portée du dénombrement total comprend tout cela. Ainsi, lorsque je créerai les auditeurs de l'événement ici, il sera possible de créer un compte supplémentaire. Et cette fonction aura également accès au décompte total jusqu'à la fermeture. Il va donc être disponible. Très bien, maintenant allons-y et augmentons le nombre d'auditeurs de l'événement. Et comme je l'ai dit, j'ai configuré un tableau pour pouvoir le faire en boucle. Alors parcourez-le à vélo. Et cela me permet de ne faire le même code qu'une seule fois. Parce que la configuration de ces auditeurs d'événements se ferait avec le même code. Maintenant, voici ce que je veux faire à l'intérieur de cette boucle. Je vais déclarer une variable et je vais utiliser lat. La portée de ce bloc sera donc de ce bloc. Et je vais le mettre à zéro. Il s'agit donc d'une variable différente de celle-ci car leur portée est différente. D'accord ? Ils ne sont pas en conflit les uns avec les autres même s'ils portent le même nom. Et je suis en train de configurer cela parce que dans l'EventListener, je vais configurer une fonction. Cela aura alors accès à cette variable et nous l'incrémenterons puis la transmettrons ici. D'accord. Ainsi, chaque fois que cela est appelé, une variable différente ou peut-être une variable différente sera transmise. Et grâce à la clôture, je serai en mesure de suivre le décompte total. Je serai en mesure de suivre le décompte individuel. Alors maintenant, allons-y et configurons cet écouteur d'événements. Donc BTN, en utilisant la boucle for, btn contient désormais chacun de ces éléments DOM lorsqu'il itère dans ce tableau. Donc BTN, ajoutez Event Listener. Ensuite, nous voulons utiliser les événements de clic, et voici ma fonction anonyme. Maintenant, qu'allons-nous faire dans le cadre de cette fonction anonyme ? Eh bien, nous allons d'abord incrémenter cette variable ici. Cette fonction aura accès à cette variable par fermeture. Donc, pour suivre les comptes. Une fois que nous aurons augmenté, nous appellerons les compteurs d'affichage des incréments. Et nous allons transmettre cette variable. Cette variable qui a été incrémentée sera transmise ici, puis elle sera affichée ici. Et cette variable qui fait partie de cette portée sera simplement incrémentée chaque fois que la fonction est appelée. Et comme j'ai parcouru tous les éléments du tableau, tous ces boutons auront le même écouteur d'événements. Nous allons donc tous appeler cette même fonction. Comme il s'agit d'une boucle, il s'agira d'une variable différente à chaque fois que l'on parcourt cette boucle. Et puis les fonctions pour chaque écouteur d'événements. Eh bien, j'y ai accès à cause de la fermeture. Très bien, allons-y et voyons comment cela fonctionne pour nous. Je vais aller de l'avant et économiser ça. Et nous allons revenir d'ici. Et disons que je souhaite afficher la console afin que nous puissions voir les chiffres que nous obtenons. Permettez-moi donc de faire défiler l'écran jusqu' à ce que les boutons apparaissent. Et si nous cliquons sur le premier bouton, qu'est-ce que nous obtenons ? Une fois, les trois boutons ont été cliqués une seule fois. Laisse-moi cliquer à nouveau dessus. Deux fois. Je vais cliquer deux fois sur les trois boutons. Maintenant, il a marqué un bouton une fois, trois fois. Passons au bouton 3. Une fois, quatre fois, cliquez à nouveau, deux fois, cinq fois. On dirait que ça marche deux fois, six fois. Très bien, donc un petit exercice amusant en utilisant la fermeture. J'espère donc que cet exercice nous a été éducatif. Non seulement vous avez eu la chance d' essayer de le découvrir par vous-même. Mais peut-être pouvez-vous également apprendre quelque chose de l' approche que j'ai adoptée. Parce que, comme je l'ai dit, il existe probablement 100 manières différentes de résoudre ce problème. Très bien, passons au sujet suivant. 14. Expressions de fonctions immédiatement invoquées: expressions de fonction invoquées immédiatement Les expressions de fonction invoquées immédiatement constituent un modèle important en JavaScript. Je l'ai mentionné brièvement au cours de certains des sujets précédents. Eh bien, nous allons maintenant l' examiner plus en détail. suite. Les expressions de fonction Invoke sont appelées IFIS dans le monde JavaScript. C'est ainsi que vous prononcerez l'IIFE que vous voyez à la fin de cette ligne de titre. Iffy. Et s'il définit simplement une fonction puis l' invoque immédiatement, nous n'attendons pas pour l'appeler plus tard. Il est défini et groupé en même temps. Regardons un exemple simple, puis je parlerai de certaines des raisons que nous utilisons. S'il va bien, je vais créer une fonction très simple ici. En gros, je vais ajouter deux chiffres et les renvoyer également. Nous reviendrons donc, faisons juste cinq plus cinq. Maintenant, si nous sauvegardons ça, je vais sauter ici et jeter un œil à la console. Si nous examinons la variable somme, ce qu'elle contient, nous voyons qu' elle contient la fonction. Maintenant, si nous voulons invoquer cela, nous devons ajouter les purines. Et si nous pouvions définir cela ? Ensuite, il suffit de mettre les doubles parenthèses à la fin de celle-ci pour définir la fonction et l'invoquer en même temps. Cela signifierait qu'il est immédiatement invoqué. Et il s'agit d'une expression fonctionnelle. Donc une expression de fonction immédiatement invoquée. Essayons donc ça. Je vais continuer et mettre les deux citations après cela. Maintenant, que va contenir la variable somme ? Est-ce que ce sera la fonction ? Sachez que ce sera la valeur qui sera renvoyée si elle est immédiatement invoquée. Nous allons donc économiser cela. Et puis jetons-y un coup d'œil. Maintenant, il contient la réponse ou la valeur de retour de cette fonction car elle a été immédiatement invoquée. Voici donc une expression de fonction immédiatement invoquée. Cela ne fonctionne pas pour une déclaration de fonction. Nous ne pouvons pas faire ce genre de choses. Allons voir le retour. Faisons quelque chose comme ça. Je veux que vous vous montriez ce qui se passe si nous établissons une déclaration. Donc, si je sauvegarde cette erreur de syntaxe non détectée, jeton inattendu à la ligne 9. Alors pourquoi Nine n'aime pas ça ? Il ne sait pas ce que nous faisons ici. Cela ne peut donc pas être fait avec une déclaration de fonction, doit s'agir d'une expression de fonction. Ainsi, chaque fois que nous invoquons immédiatement quelque chose c'est une expression de fonction. Maintenant, permettez-moi de vous montrer genre de chose que l'on peut faire avec ça. Je vais faire une somme de dix, et je mettrai cela comme une fonction. Et nous allons y avoir un paramètre pour un nombre transmis. Et puis à l'intérieur d' ici, nous allons déclarer une variable et déclarer une variable et la fixer à dix, comme ça. Et puis nous allons renvoyer num plus un. C'est pourquoi nous l' appelons une dizaine. Maintenant, que se passera-t-il si nous invoquons immédiatement ces empreintes à ce sujet ? Sauvegardez-le. Jetons-en un coup d'œil à une dizaine. Nan nous dit que ce n'est pas un chiffre. Qu'est-ce que cela nous indique que pendant un certain temps, nous n'avons pas transmis de valeur pour cela ? Il essaie donc d'ajouter indéfini à dix, explique NaN. Passons donc une valeur et nous en ferons cinq. Sauvegardez ça. Maintenant, on en a 15 avec un peu de temps. Maintenant, je voudrais vous informer de quelque chose concernant cette variable que je viens de mettre ici. Rien ne peut modifier cette variable une fois qu'elle est définie. Il est dix heures. Et ce n'est pas seulement parce que j'ai utilisé une constante définie, est évident qu'un constable qui empêche sa réaffectation entraînera une erreur de syntaxe. Mais c'est aussi parce que c'est contenu dans cette fonction. Le fait que cela soit défini dans cette fonction signifie que nous n'y avons pas accès, aucun autre code ou que nous pourrions même habiller cette variable car elle se trouve à l'intérieur de la fonction. D'accord ? Donc, la raison pour laquelle je montre cela est que cela aide à illustrer les cas d'utilisation de expression de fonction immédiatement invoquée car il y en a en fait deux. Je vais juste les inscrire ici. Je trouve que les cas d'utilisation sont importants. L'une concerne les données privées. D'accord ? Il s'agit de données privées. Cela ne peut pas être changé. C'est dans la fonction, on ne peut pas le modifier, c'est privé. Un autre cas d'utilisation consiste à éviter les variables globales et la collision de variables. Nous pouvons donc exécuter du code sans déclarer de variables globales lorsque nous utilisons une expression de fonction immédiatement invoquée. Permettez-moi maintenant d'illustrer ce cas d'utilisation. Je vais donc copier du code ici. Je vais simplement le coller en dessous de ces cas d'utilisation. On y va. Titre aussi. Je suis aussi le titre du sélecteur de requêtes. Je suis en train de saisir, nous regardons le fichier HTML. Je suis en train de saisir ce div qui contient l'expression de fonction tidal line immédiatement invoquée. Très bien, nous allons le saisir. Ensuite, nous y ajoutons des auditeurs d' événements. L'un est pour le passage de la souris, l'autre pour la sortie de la souris. Dans les deux cas, il ne fait que changer le curseur et le modifier à nouveau. Ensuite, nous avons un événement de clic qui enregistre simplement le texte intérieur de celui-ci sur la console. D'accord ? Donc, si nous sauvegardons ça, nous viendrons ici. Remarquez que mon curseur change. Au fur et à mesure que je passe en revue cela. Lorsque je clique, les informations, l' innerHTML de cet élément DOM, sont placées sur la console. Nous avons maintenant déclaré une variable ici pour ce faire, pour récupérer ce div et pouvoir l'utiliser. Mais mettons une fonction autour de cela. Commençons par déclarer une variable. Je vais changer cela dans un instant, mais nous allons commencer de cette façon. Disons qu'un tricot est une fonction initialisée. Et permettez-moi de mettre tout cela en évidence. Je vais le mettre en retrait. Cela peut donc être à l'intérieur de ces bretelles frisées. Formatez un peu pour nous. Et puis voici l' orthèse bouclée qui ferme cette fonction. Nous avons maintenant une fonction d'initialisation. Maintenant, évidemment, si nous l'enregistrons, nous n'avons plus la fonctionnalité ici car elle n'a pas été invoquée. Nous n'avons pas appelé cette fonction. Eh bien, nous savons que nous pouvons immédiatement invoquer cela en faisant ce genre de chose. J'ajoute donc le prince à la fin. Voyons maintenant si nous avons cette fonctionnalité. Je reviens, le curseur change, je clique dessus. Oui, nous l'avons. Nous avons donc pu l'invoquer immédiatement, mais nous avons toujours une variable ici. Eh bien, nous ne capturons rien qui soit variable. Il n'y a rien que nous renvoyons de cette fonction pour lequel nous ayons besoin de la variable correspondante. Supprimons simplement cette variable. Et voyons si cela fonctionne. Nous le sauvegardons. Qu'est-ce qu'on obtient ? Une instruction de fonction d'erreur de syntaxe renvoie un nom de fonction requis . Donc, ce qui nous dit, ce que cette erreur de syntaxe nous dit c'est qu'il s'agit d'une instruction de fonction. Il attend un nom de fonction juste après. Il attend une déclaration de fonction car il voit que le mot clé de la fonction est le premier. Eh bien, transformons cela en une expression. Et la raison pour laquelle nous pouvons le faire est simplement mettre des parenthèses autour. Maintenant, j'aime généralement mettre mes parenthèses autour de la fonction , puis demander aux marques de l' invoquer juste après. Mais il y a beaucoup de gens qui préfèrent le faire. De cette façon Ils travaillent tous les deux. Peu importe la façon dont vous choisissez de le faire. Ils travaillent tous les deux. Alors maintenant, sauvegardons ça. Nous n'y trouvons plus la syntaxe. Je reviens, je change le curseur. Je clique dessus, je le vois en bas de la console. Nous avons donc maintenant du code qui s' exécute dans une fonction. Et nous n'avons pas eu besoin de déclarer une variable pour que cela se produise. Cette variable est maintenant à l'intérieur de la fonction, elle ne pollue pas l'espace global. Nous évitons donc les collisions de variables, ce qui signifie qu'une autre personne travaillant sur un projet ou une personne que nous avons recrutée utilisait le même nom de variable et que ces deux variables, Clyde, la dernière celui à déclarer ou dernier à recevoir une valeur est celui qui a la priorité. Nous évitons donc ces collisions et nous évitons les variables globales. Désormais, nous pouvons également avoir des données privées. Évidemment, personne ne peut accéder à cette variable, mais à ces éléments du DOM disponibles en dehors de cette fonction, il leur suffit de les sélectionner. Mais je peux déclarer une variable ici, définir comme égale à quelque chose. Juste une ponctuation ou une sorte de ponctuation. Maintenant, il n'est pas possible d'y accéder à partir de maintenant. La ponctuation sera un point d'exclamation. Eh bien, nous pourrions également configurer une fonction à l'intérieur de cette fonction et la renvoyer en dehors de la fonction. Cela nous permettrait de changer cela. Ensuite, nous réglementons la manière dont ces données privées sont modifiées, ce qui est un modèle très courant. En fait, il s'agit d'un modèle utilisé dans le modèle de module traditionnel, dont nous parlerons lorsque nous traiterons des modules dans ce cours. Comme je l'ai mentionné, avec les fermetures allons examiner cela et vous allez examiner l'expression de fonction immédiatement invoquée lorsque nous traiterons des modèles de modules traditionnels. C'est donc un bon modèle pour apprendre à appliquer ces concepts. Mais ce signe de ponctuation est privé. Si je sauvegarde ceci, sortez pour cliquer dessus. Nous y voyons maintenant le signe de ponctuation. Cela est donc immédiatement invoqué comme expressions de fonction. Maintenant, ce que j'aimerais faire dans les prochains sujets, nous allons examiner quelques-uns des morceaux de code que nous avons utilisés dans les sujets précédents où j'ai peut-être mentionné que cela pourrait être amélioré avec expression de fonction immédiatement invoquée. Nous verrons comment nous pouvons les améliorer. Nous examinerons les modifications que nous devons apporter pour utiliser un iffy. Très bien, passons au sujet suivant. 15. Application des IIFEs: Maintenant que j'ai présenté les IFIS, appliquons-les à quelques exemples de code que nous avons utilisés dans cette section. Ce sont des exemples de fermeture et nous allons maintenant ajouter des IFIS à ce même code. Maintenant, le premier exemple est le message d'accueil différé. Maintenant, il s'agit d'un exemple simple. Si vous vous en souvenez, nous avons une fonction. Nous appelons pass d'accueil différé dans un nom utilisant setTimeout, ce message d'accueil est retardé de 5 s. Maintenant, s'il s'agissait d'une fonctionnalité que nous voulions appeler depuis quelque part, nous n'utiliserions pas de vide pour cela. Mais je veux utiliser la technologie NFV. Disons que je voulais que cela s' affiche lors du chargement du fichier. Je veux donc utiliser NFV pour cet exemple car il contient cette passe dans une variable. Je voudrais donc en donner un exemple. Allons-y et voyons comment nous y prendrions. C'est très simple. Nous avons juste besoin de le supprimer. Nous n'en avons plus besoin. Et nous pouvons également retirer cette partie. Maintenant, nous voulons en faire une expression pour qu'elle soit valide. J'ai donc mis des parenthèses autour de cela comme ça. Et puis pour l'invoquer, on met à nouveau des parenthèses. Comme vous le savez, il existe différents formats pour cela, ce dernier Perrin pourrait également être publié ici. Je préfère simplement cette structure en particulier. Maintenant, ce que nous devons faire, c'est transmettre la variable, et je la mets donc entre parenthèses. C'est tout ce dont nous avons besoin pour y parvenir. Et voilà notre accueil différé. Alors laisse-moi y retourner et ouvrons la console. Voici notre message d'accueil lorsque nous avons chargé la page pour la première fois. Maintenant, allons-y, sauvegardons-le et il se rechargera. Et puis au bout de 5 s, nous devrions recevoir à nouveau le même accueil. En gros, nous supprimons simplement la ligne qui invoque cette fonction et nous la gérons ici. C'est vraiment ce que nous faisons avec une expression de fonction immédiatement invoquée. Très bien, maintenant je vais commenter cela. Et je vais copier un autre morceau de code que nous avons utilisé comme exemple. Et il s'agissait d'une fonction initialisée. Allez-y, collez-le. Et si vous êtes membre, il initialise deux boutons. Et lorsque vous cliquez dessus, incrémentez la variable count , puis connectez-vous à la console. Maintenant, pour pouvoir l'utiliser, je dois venir ici et supprimer les commentaires de ces boutons afin qu'ils apparaissent sur la page HTML. Alors vas-y, rafraîchis-le. Et disons celui-ci. Voyons s' ils apparaissent. Nous les avons ici. D'accord. Assurez-vous simplement que ce code fonctionne avant de continuer. Ouaip. D'accord. Nous sommes donc bons. Maintenant, quand nous avons certaines choses à initialiser et que nous n'avons pas initialisé une fonction comme celle-ci. C'est généralement une bonne application pour les personnes incertaines. Puisque cette fonction est active, sera exécutée qu'une seule fois et c'est au moment du chargement de la page. Pourquoi le stocker dans une variable ? Nous pourrons donc l'appeler plus tard. Ou pourquoi déclarer la fonction pour pouvoir l'appeler plus tard. Invoquons simplement le code, exécutons-le et finissons-en avec. Allons-y et supprimons cette déclaration, et nous la supprimerons ici. Encore une fois, il ne nous reste plus qu'à entourer de Krenz. Cela le rend valide. Ensuite, nous avons ajouté les plans pour l'invoquer. Maintenant, cela va vraiment accomplir la même chose, la même chose pour nous. Nous allons donc enregistrer ceci, la page se recharge. Et allons-y et essayons ces boutons. Et ils travaillent toujours. donc deux exemples rapides où nous avons pris quelque chose que nous avions fait avec des fermetures et nous avons ajouté une expression de fonction immédiatement invoquée. Et le deuxième exemple est particulièrement idéal pour les IFIS. Très bien, passons à autre chose et laissez-moi vous donner occasion d'essayer un exercice sur ces sujets. 16. Début de l'exercice : IIFEs: Une fois que vous avez compris la structure d' une expression de fonction immédiatement invoquée, il n'est pas si difficile de la créer. En général, vous convertissez quelque chose qui existe déjà en un seul, ce qui rend les choses encore plus faciles. Mais je veux que tu fasses un exercice. Il s'agit d'un concept important et je pense qu'il est important de faire un exercice sur ce concept. Voyons donc ce que j'aimerais que tu fasses. Très bien, voici un code initial et, en gros, il ne fait que créer un message dans cette variable de message, disant quelque chose comme aujourd'hui, quelle que soit la date, puis le jour du mois. C'est tout ce qu'il fait. C' est quelque chose qui pourrait s' afficher sur la page Web initiale ou quelque chose comme ça. Donc, ce que j'aimerais que vous fassiez, c'est que cela devienne incertain et que pour voir s' il fonctionne correctement, enregistrez simplement les résultats sur la console. Nous allons donc l'envoyer à la console. Il devrait apparaître dès que la page se charge et que vous vous êtes déconnectée de la console. Normalement, vous souhaiterez peut-être afficher ce message dans un div ou quelque chose comme ça. Nous allons faire la console et cela suffira. Très bien, vas-y, essaie. Et lorsque vous êtes prêt à réviser, passez au sujet suivant. 17. Fin d'exercice : IIFEs: D'accord. J'espère que ce n'était pas trop difficile. Je ne voulais pas que ce soit trop difficile. Maintenant, pour ne citer que l'un des avantages d'en faire un FE, c'est qu'il y a soudainement trois variables qui se trouvent actuellement dans l'espace mondial qui ne figureront pas dans l'objectif spatial. C'est un avantage tellement important qu'ils rendent cela incertain. Alors allons-y et faisons-le. Je vais d'abord entrer dans la fonction. Et puis mes bretelles frisées, je vais prendre le code maintenant et le mettre dans cette fonction. Remarquez que je n'ai pas donné de nom à la fonction, ce qui signifie généralement que je suis en train de créer un doute. Mais je dois l' entourer de parenthèses, le transformer en expressions pour ne pas avoir d'erreur de syntaxe, puis entre parenthèses pour l'invoquer. Maintenant, la seule chose que j'ai mentionnée et que nous voulions faire c'est simplement l'afficher sur la console. Alors laisse-moi y aller et le faire. Message du journal à points de la console juste pour s'assurer qu'il fonctionne correctement. Et nous allons économiser cela. Saute ici et jette un œil à la console voir si nous avons reçu un message. Aujourd'hui, c'est lundi 19. Et c'est bien ce que sont le jour de la semaine et la date du mois. Et cela fonctionne pour nous. C'est tellement simple. Mais un modèle très important et JavaScript immédiatement invoqué des expressions de fonction ou s'il l'est , d'accord, passons à autre chose.