Fonctions JavaScript

Les fonctions JavaScript peuvent faire plus que simplement enfermer un tas de codes en attendant que l'appel soit exécuté. Les fonctions ont évolué au fil du temps, conduisant à de nouvelles définitions, méthodes d'exécution et syntaxes. Ce post couvrira certains des rôles que les fonctions JavaScript ont joué jusqu'ici.

Connaître les différentes manières d'exprimer et de définir les fonctions ouvre la possibilité d' implémenter une logique de manière plus optimale en JavaScript. De plus, vous pourrez peut-être répondre plus facilement aux questions d'entrevue.

Expressions de fonction

Lorsque vous définissez simplement une fonction avec le mot clé function, les paramètres optionnels et le corps de code, il s'agit d'une déclaration de fonction .

Mettez cette déclaration dans une expression JavaScript (comme dans une affectation ou une expression arithmétique), elle devient une expression de fonction .

 // Fonction de déclaration de fonction nom_fonction () {}; // Expression de la fonction var nom_fonction = function () {}; 

Toutes les déclarations JavaScript sont hissées (déplacées dans la portée) pendant l'évaluation. Par conséquent, écrire un appel de fonction avant la déclaration de la fonction est correct (puisque la déclaration sera déplacée de toute façon).

 nom_fonction (); // appel de fonction [WORKS] function nom_fonction () {}; 

Les expressions de fonction ne sont cependant pas levées car les fonctions font partie des expressions et ne sont pas des déclarations autonomes.

 nom_fonction (); // appel de fonction [NE FONCTIONNERA PAS] var nom_fonction = function () {}; 

Expression de fonction invoquée immédiatement (IIFE)

C'est une expression de fonction, dont le code est exécuté immédiatement (une seule fois quand il est évalué). Vous pouvez en créer un en ajoutant simplement () (syntaxe utilisée pour appeler une fonction) juste après une expression de fonction. Ils peuvent être anonymes (pas de nom pour l'appeler).

Voici les deux syntaxes les plus courantes pour créer l'IIFE:

 (function optional_function_name () {// body} ()); 

et

 (function optional_function_name () {// body}) (); 

La parenthèse entourant la déclaration de la fonction la convertit en une expression, puis ajoute () après l'appel de la fonction. Vous pouvez utiliser d'autres façons de créer IIFE tant que vous ajoutez () après une expression de fonction (comme ci-dessous), mais les méthodes préférées sont les deux précédentes.

 // Quelques façons de créer des IFEs! Function () {/ * ... * /} (); + fonction () {/ * ... * /} (); nouvelle fonction () {/ * ... * /}; 

IIFE est idéal pour l'écriture de code qui ne doit s'exécuter qu'une seule fois, l'espacement des noms, la création de fermetures, la création de variables privées, etc. Voici un exemple d'utilisation de l'IIFE.

 var page_language = (function () {var lang; // Code pour obtenir la langue de la page return lang;}) (); 

Le code pour obtenir la langue de la page ne s'exécute qu'une fois (de préférence après le chargement de la page). Le résultat est stocké dans page_language pour une utilisation ultérieure.

Méthodes

Quand une fonction est la propriété d'un objet, elle s'appelle la méthode. Puisqu'une fonction est aussi un objet, une fonction dans une autre fonction est aussi une méthode. Voici un exemple d'une méthode dans un objet.

 var calc = {ajouter: fonction (a, b) {renvoyer a + b}, sub: fonction (a, b) {renvoyer ab}} console.log (calc.add (1, 2)); // 3 console.log (calc.sub (80, 2)); // 78 

Les fonctions add et sub sont des méthodes de l'objet calc .

Maintenant pour une fonction dans l'exemple de fonction:

 fonction add (a) {return la fonction (b) {return a + b;}} console.log (add (1) (2)); // La sortie est 3 

La fonction anonyme renvoyée est une méthode d' add de fonction.

Note: Comme le paramètre ( a ) de la fonction add de l'exemple ci-dessus est disponible pour la fonction suivante invoke, ce type de processus est appelé currying .

Constructeurs

Lorsque vous ajoutez un new mot clé avant une fonction et que vous l'appelez, il devient un constructeur qui crée des instances. Voici un exemple où les constructeurs sont utilisés pour créer des instances de Fruit et des valeurs sont ajoutées aux propriétés de chaque Fruit .

 function Fruit () {var nom, famille; // Nom scientifique et famille this.getName = function () {return name;}; this.setName = fonction (valeur) {name = valeur}; this.getFamily = function () {return famille;}; this.setFamily = function (valeur) {family = valeur}; } var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ("Rosaceae"); var orange = nouveau Fruit (); orange.setName ("Citrus ÃÂ? Â" sinensis "); orange.setFamily ("Rutaceae"); console.log (orange.getName ()); // "Citrus ÃÂ? Â" sinensis "console.log (apple.getName ()); // "Malus domestica" console.log (orange.getFamily ()); // "Rutaceae" 

Flèche Fonctions (ES6 Standard) [Uniquement dans Firefox]

Une nouvelle définition de fonction de ES6 Standard fournit une syntaxe plus courte pour l'expression de fonction. La syntaxe est

 () => {/ * body * /} 

Cet exemple de fonction:

 var sing = function () {console.log ('chanter ...')}; 

est le même que:

 var sing = () => {console.log ('chanter ...')}; 

Les fonctions fléchées sont anonymes et n'ont pas this valeur, this ci sera la même dans le code qui l'entoure. En outre, vous ne pouvez pas le remplacer par un new mot clé.

Ils sont utiles lorsque vous voulez que this fonction soit la même qu'à l'extérieur et que sa syntaxe plus courte rende le code d'écriture fonctionnel dans la fonction concise (comme ci-dessous)

 setInterval (function () {console.log ('message')}, 1000); 

dans

 setInterval (() => console.log ('message'), 1000); 

Fonctions du générateur (ES6 Standard) [Uniquement dans Firefox]

Une autre nouvelle définition de fonction de la norme ES6 est la fonction de générateur. Les fonctions du générateur sont capables d'arrêter et de poursuivre son exécution. Sa syntaxe est:

 function * nom_fonction () {} 

ou

 function * nom_fonction () {} 

Les fonctions de générateur créent des itérateurs. La méthode next l'itérateur est ensuite utilisée pour exécuter le code dans la fonction du générateur jusqu'à ce que le mot-clé yield soit atteint. Après cela, la valeur itérée identifiée par le mot-clé yield est renvoyée par la fonction de génération et l'exécution est arrêtée.

La fonction de générateur s'exécute à nouveau lorsque la méthode next est appelée jusqu'à ce que le prochain mot-clé yield soit atteint. Une fois que toutes les expressions de yield sont exécutées, la valeur undefined renvoie undefined .

Voici un exemple simple:

 function * generator_func (count) {pour (var i = 0; 
Voici un autre exemple:
 function * randomIncrement (i) {rendement i + 3; rendement i + 5; rendement i + 10; rendement i + 6; } var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (valeur itr.next ().); // 9 console.log (valeur itr.next ().); // 14 
Il y a aussi une expression yield* qui transmet la valeur à une autre fonction de générateur
 fonction * fruits (fruit) {rendement * légumes (fruit); donner des "raisins"; } fonction * légumes (fruit) {donner du fruit + "et épinards"; donner des fruits + "et brocoli"; donner des fruits + "et concombre"; } var itr = fruits ("Apple"); console.log (itr.next (). value); // "Apple and Spinach" console.log (valeur itr.next ().); // "Apple and Broccoli" console.log (itr.next (). Value); // console et console "Apple and Cucumber" (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //indéfini 
Les fonctions de générateur sont utiles si vous voulez passer en revue les valeurs une par une à votre point préféré dans le code en le mettant en pause, plutôt qu'en une seule fois comme en boucle dans un tableau.
Conclusion 
J'ai inclus une liste de références ci-dessous, où vous trouverez des liens vers des références et des articles qui approfondissent différents sujets séparément. Les deux fonctions standard ES6 ne fonctionneront que dans Firefox pour le moment .
Les références 
ECMAScript Language: Fonctions et classes
Expression de fonction invoquée immédiatement (IIFE)
Les bases des générateurs ES6
Fonctions de flèche
Fonction - Réseau de développeurs Mozilla







        

          
          

		  
Meet Yarn: le plus récent gestionnaire de paquets JavaScript développé par Facebook
            
La plupart des développeurs frontend connaissent déjà npm, qui est le gestionnaire de paquets alimenté par Node pour les bibliothèques JavaScript, les frameworks et les plugins. C'est le gestionnaire de paquets le plus utilisé par les développeurs web, mais Facebook a mis au point un nouveau gestionnaire de paquets nommé Yarn qui devient rapidement le rival de npm .Avec Ya
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Essayez la messagerie hors ligne sur mobile avec Firechat
            
Les applications de causerie sont une douzaine, couvrant presque n'importe quelle place imaginable que vous pourriez penser. Mais jusqu'à présent, il n'y a pas eu d'application de chat qui se concentre sur la communication locale «hors réseau» . Une telle application vous permettrait de discuter avec des personnes proches lors d'événements sportifs, de concerts et autres, sans exposer votre identité et sans avoir besoin d'être sur le même réseau Wi-Fi . Firechat 
			
(Conseils techniques et de conception)