Fonctions JavaScript

Les fonctions JavaScript sont capables de faire plus que simplement enfermer une série de codes en attendant que l'appel soit exécuté. Les fonctions ont évolué au fil du temps, menant à de nouvelles définitions, méthodes d’exécution et syntaxes. Cet article couvrira certains des rôles actuels que les fonctions JavaScript ont joué jusqu'à présent..

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

Expressions de fonctions

Lorsque vous énoncez simplement une fonction avec une fonction mot-clé, paramètres facultatifs et corps de code, c'est un une fonction déclaration.

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

// Déclaration de fonction function nom_fonction () ; // Expression de la fonction var nom_fonction = function () ;

Toutes les déclarations JavaScript sont levées (déplacées vers le haut) lors de l’évaluation. D'où l'écriture d'un appel de fonction avant que la déclaration de fonction soit correcte (puisque la déclaration sera déplacée de toute façon).

nom_fonction (); // appel de fonction [WORKS] fonction nom_fonction () ;

Toutefois, les expressions de fonction ne sont pas levées, car les fonctions en font partie intégrante et ne sont pas des déclarations autonomes..

nom_fonction (); // appel de fonction [WON'T WORK] var nom_fonction = function () ;

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

C'est une expression de fonction dont le code est exécuté immédiatement (une seule fois lorsqu'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 IIFE:

(function optional_function_name () // body ());

(function optional_function_name () // body) ();

La parenthèse entourant la déclaration de fonction la convertit en une expression, puis en ajoutant () après il appelle la fonction. Vous pouvez utiliser d'autres méthodes pour créer IIFE aussi longtemps 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 IIFE! Function () / *… * / (); + function () / *… * / (); nouvelle fonction () / *… * /;

IIFE est idéal pour l'écriture de code qui ne doit être exécuté qu'une seule fois, l'espacement de noms, la création de fermetures, la création de variables privées, etc. Ci-dessous 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 permettant d'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 langue_page pour une utilisation ultérieure.

Les méthodes

Lorsqu'une fonction est la propriété d'un objet, elle s'appelle méthode. Puisqu'une fonction est aussi un objet, une fonction dans une autre fonction est aussi une méthode. Ci-dessous, un exemple de méthode dans un objet.

var calc = add: fonction (a, b) retour a + b, sous: fonction (a, b) retour a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

le ajouter et sous les fonctions sont des méthodes de calc objet.

Maintenant, pour une fonction dans un exemple de fonction:

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

La fonction anonyme retournée est une méthode de fonction ajouter.

Note: Depuis paramètre (une) de fonction ajouter dans l'exemple ci-dessus est disponible pour l'appel de fonction suivant, ce type de processus est appelé currying.

Constructeurs

Quand vous ajoutez Nouveau mot-clé avant une fonction et appelez-le, il devient un constructeur qui crée des instances. Voici un exemple où des constructeurs sont utilisés pour créer des instances de Fruit et les valeurs sont ajoutées à chaque Fruitpropriétés de.

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

Fonctions de flèche (standard ES6) [Uniquement dans Firefox]

Une nouvelle définition de fonction d'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 ('chant…');

est le même que:

var sing = () => console.log ('chant…');

Les fonctions de flèche sont anonymes et ne possèdent pas de ce valeur, ce à l'intérieur, ce sera comme ce dans le code ci-joint. De plus, vous ne pouvez pas le changer en constructeur avec Nouveau mot-clé.

Ils sont utiles pour quand vous voulez ce l'intérieur d'une fonction est identique à l'extérieur et sa syntaxe plus courte rend le code permettant d'écrire une fonction au sein d'une fonction concis (comme ci-dessous)

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

dans

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

Fonctions du générateur (norme ES6) [uniquement dans Firefox]

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

function * nom_fonction ()

function * nom_fonction ()

Les fonctions de générateur créent des itérateurs. L'itérateur suivant méthode est ensuite utilisée pour exécuter le code à l'intérieur de la fonction du générateur jusqu'à ce que rendement le mot clé est atteint. Après cela, la valeur itérée identifiée par le rendement le mot clé est renvoyé par la fonction génératrice et l'exécution est arrêtée.

La fonction du générateur s’exécute à nouveau lorsque le suivant la méthode est appelée jusqu'à la prochaine rendement le mot clé est atteint. Une fois tous les rendement les expressions sont exécutées, la valeur renvoyée retourne indéfini.

Voici un exemple simple:

function * generator_func (count) pour (var i = 0; i Voici un autre exemple:
 fonction * 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 (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 Il y a aussi un rendement* expression qui passe la valeur à une autre fonction génératrice
 fonction * fruits (fruit) rendement * légumes (fruit); donner "raisins";  function * légumes (fruit) donne fruit + "et épinard"; donner des fruits + "et brocoli"; donner des fruits + "et concombre";  var itr = fruits ("Apple"); console.log (itr.next (). value); // "Apple et épinard" console.log (itr.next (). Value); // "pomme et brocoli" console.log (itr.next (). Value); // "Apple and Cucumber" console.log (itr.next (). Value); // "Grapes" console.log (itr.next (). Value); //indéfini 
 Les fonctions de générateur sont utiles si vous voulez parcourir les valeurs une à une à votre point préféré dans le code en le mettant en pause, plutôt que d'un seul coup 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 séparément différents sujets.. Les deux fonctions standard de l'ES6 ne fonctionneront que dans Firefox pour le moment..
 Références
 Langage ECMAScript: Fonctions et classes
 Expression de fonction immédiatement appelée (IIFE)
 Les bases des générateurs ES6
 Fonctions de flèche
 Une fonction - Réseau de développeurs Mozilla