Expressions de fonction

Les expressions de fonction sont des fonctions. créé là où une expression est attendue. Vous rencontrerez fréquemment des expressions en tant que valeurs attribuées à une variable. Bien qu'une déclaration de fonction demande toujours un nom, vous pouvez utiliser des expressions de fonction pour créer en omettant l'identifiant et en suivant le mot clé function avec une paire de parenthèses contenant des paramètres facultatifs:

const myVariable = function() { };

Vous pouvez ensuite les appeler expressions de fonction à l'aide de l'identifiant de la variable:

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Vous pouvez également utiliser des expressions de fonction pour créer des fonctions nommées à l'aide d'une syntaxe semblables aux déclarations de fonction:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Toutefois, contrairement aux déclarations de fonction, une expression de fonction nommée ne peut être accessible que par son nom de fonction dans la fonction elle-même :

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

Les noms associés aux expressions de fonction sont principalement utiles pour le débogage. A peut également s'appeler de manière récursive, même s'il ne s'agit pas très courant dans le développement moderne:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."

Expressions de fonction fléchée

Les expressions de fonction de flèche (souvent appelées "fonctions de flèche" ou, rarement, "lambda fonctions") ont été introduites dans ES6 pour fournir une syntaxe concise afin de créer des expressions de fonction anonymes avec des comportements uniques.

Vous pouvez créer une fonction fléchée là où une expression est attendue, par exemple exemple, en tant que valeur attribuée à une variable. Dans sa forme la plus courante, une flèche est composée d'une paire de parenthèses contenant zéro ou plus , une flèche composée d'un seul signe égal et d'un caractère supérieur à (=>), ainsi qu'une paire d'accolades contenant le corps de la fonction:

const myFunction = () => {};

Dans certaines conditions, vous pouvez rendre la syntaxe encore plus compacte. Si vous n'utilisez qu'un seul paramètre, vous pouvez omettre les parenthèses de début :

const myFunction = myParameter => {};

Lorsque vous voulez que le corps de la fonction renvoie la valeur d'une expression unique, ni de placer le corps de la fonction entre accolades, le mot clé return sont obligatoires:

const myFunction = () => 2 + 2

myFunction()
> 4

Les fonctions flèche sont uniques en ce sens qu'elles n'ont pas leur propre contexte pour les valeurs arguments ou this. Ils héritent plutôt à la fois à partir du code temporel de la fonction environnement englobant lexiquement, qui fournit ces contextes.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Fonctions fléchées pour les appels

Les fonctions fléchées ne lient pas les arguments de la même manière que d'autres types de fonctions. Un objet arguments dans le corps d'une fonction flèche hérite de sa valeur de l'environnement le plus proche qui l'entoure lexicalement :

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

Dans cet exemple, une fonction externe appelée avec l'argument false appelle un fonction de flèche intérieure avec l'argument true. Étant donné que l'objet arguments à l'intérieur de la fonction fléchée se résout en une liaison dans la fonction externe, interne enregistre l'false de la fonction externe.

Si aucun objet arguments n'est disponible pour hériter du contexte parent, la flèche objet arguments de la fonction n'est pas défini et toute tentative d'accès à celui-ci provoque une erreur:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Expressions de fonction appelées immédiatement (IIFE)

IIFE, une expression de fonction à appeler immédiatement (IIFE), aussi parfois appelée une « fonction anonyme auto-exécution », est une expression de fonction appelée immédiatement lorsqu'il est défini. Un IIFE utilise une expression de fonction créée par Encapsuler la fonction dans un opérateur de regroupement. Une deuxième paire de parenthèses correspondante appelle ensuite la fonction, soit immédiatement après la définition de la fonction elle-même ou juste après la définition de la fonction . Si vous utilisez une fonction standard, il n'existe aucune différence pratique entre les deux approches:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

Le premier exemple appelle l'expression de fonction groupée. Le deuxième exemple appelle une déclaration de fonction à l'intérieur des opérateurs de regroupement, et le résultat final est ensuite évaluée comme une expression groupée. Le résultat est le même dans les deux .

Cependant, il existe une différence lorsque votre IIFE est une fonction fléchée. Dans ce cas, les parenthèses utilisées pour appeler la fonction doivent se trouver en dehors des opérateurs de regroupement, car une fonction à flèche n'est pas une expression en soi, mais elle doit être créée dans un contexte où une expression est attendue. Le fait d'essayer d'appeler la méthode fonction fléchée de l’intérieur du champ d’application des opérateurs de regroupement signifierait appeler une fonction fléchée qui n'a pas encore été créée dans le contexte d'une expression:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

Comme les opérateurs de regroupement attendent une expression, la fonction fléchée dans sont définies, ce qui permet aux parenthèses qui les suivent d'appeler les groupes expression:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

Anciennes applications, les IIFE fréquemment utilisés pour gérer le champ d'application, en particulier pour d'éviter de polluer le champ d'application global avec des variables de portée fonction et les déclarations de fonctions. Avant l'introduction du champ d'application des blocs dans ES6, il était courant d'encapsuler un script entier dans un IIFE pour empêcher la pollution accidentelle de l'échelle mondiale.

Testez vos connaissances

Pouvez-vous appeler une expression de fonction nommée par son nom en dehors de ?

Oui
Non