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







        

          
          

		  
CSS3 Animation - Création d'un Fan-Out avec effet Bounce en utilisant Bezier Curve
            
Saviez-vous que les transformations géométriques ajoutées aux éléments HTML avec la propriété CSS transform, telles que scale, skew et rotate, peuvent être animées ? Ils peuvent être animés en utilisant la propriété transition et les animations @keyframes, mais ce qui est encore plus cool, c'est que les transformations animées peuvent être @keyframes ajoutant un petit effet de rebond, en utilisant la fonction de timing cubic-bezier() .En un mot, cub
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Huit applications mobiles pour la conception 3D et l'esquisse
            
Les outils et logiciels de modélisation 3D vous permettent de transformer vos idées en beaux modèles et prototypes 3D . Largement utilisé dans les industries telles que l'impression 3D, l'animation, les jeux, l'architecture et le design industriel, les conceptions 3D sont des composants essentiels de la production numérique.Cepe
			
(Conseils techniques et de conception)