Les expressions de fonction sont des fonctions créées là où une expression est attendue. Vous rencontrerez fréquemment des expressions de fonction en tant que valeurs attribuées à une variable. Bien qu'une déclaration de fonction nécessite toujours un nom, vous pouvez utiliser des expressions de fonction pour créer des fonctions anonymes 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 appeler ces 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 semblable 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 n'est accessible par nom de fonction que 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. Une expression de fonction nommée peut également s'appeler de manière récursive, bien que ce ne soit pas un cas d'utilisation très courant en 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 avec fonction fléchée
Les expressions des fonctions fléchées (souvent appelées "fonctions fléchées" ou, rarement, "fonctions lambda") ont été introduites dans ES6 pour fournir une syntaxe concise pour la création d'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 en tant que valeur attribuée à une variable. Dans sa forme la plus courante, une fonction fléchée est composée d'une paire de parenthèses correspondantes contenant zéro ou plusieurs paramètres, d'une flèche composée d'un seul signe égal et d'un caractère supérieur à (=>), et d'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 souhaitez que le corps de la fonction renvoie la valeur d'une expression unique, il n'est pas nécessaire de placer le corps de la fonction entre accolades ni le mot clé return:
const myFunction = () => 2 + 2
myFunction()
> 4
Les fonctions fléchées sont uniques en ce sens qu'elles n'ont pas de contexte spécifique pour les valeurs arguments ou this. Au lieu de cela, ils héritent des deux valeurs de l'environnement englobant lexiquement de la fonction fléchée, la fonction englobante la plus proche fournissant ces contextes.
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
Fonctions de flèche d'appel
Les fonctions fléchées ne lient pas d'arguments de la même manière que les autres types de fonctions.
Un objet arguments dans le corps d'une fonction fléchée hérite sa valeur de l'environnement englobant lexique le plus proche de cette fonction:
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 une fonction fléchée interne avec l'argument true. Étant donné que l'objet arguments à l'intérieur de la fonction fléchée se résout au niveau de la liaison dans la fonction externe, la fonction interne consigne l'élément false de la fonction externe.
S'il n'existe aucun objet arguments à hériter du contexte parent, l'objet arguments de la fonction fléchée n'est pas défini et toute tentative d'accès génère une erreur:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
Expressions de fonction appelées immédiatement (IIFE)
Une expression de fonction appelée immédiatement (IIFE), parfois appelée "fonction anonyme à exécution automatique", est une expression de fonction appelée immédiatement lorsqu'elle est définie. Il utilise une expression de fonction créée en encapsulant 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, soit immédiatement après l'opérateur de regroupement. 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 dans les opérateurs de regroupement, et le résultat final est ensuite évalué en tant qu'expression groupée. Le résultat est le même dans les deux cas.
Cependant, il y a 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échée seule n'est pas une expression. Elle doit être créée dans un contexte où une expression est attendue. Essayer d'appeler la fonction fléchée depuis le champ d'application des opérateurs de regroupement revient à 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
Étant donné que les opérateurs de regroupement attendent une expression, la fonction fléchée qu'ils contiennent est définie, ce qui permet aux parenthèses qui les suivent appeler l'expression groupée:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
Anciennes applications, fréquemment utilisées par IIFE pour gérer le champ d'application, en particulier pour éviter de polluer le champ d'application global avec des variables à champ d'application de la fonction et des 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 champ d'application IIFE afin d'éviter toute pollution accidentelle du champ d'application global.
Testez vos connaissances
Pouvez-vous appeler une expression de fonction nommée par son nom en dehors de la fonction ?