Une fonction est un morceau de code réutilisable qui s’exécute lorsque vous l’invoquez. Les fonctions vous permettent de réutiliser du code, ce qui le rend plus modulaire et plus facile à maintenir.
Il existe plusieurs façons de créer des fonctions en JavaScript. Vous apprendrez ici les différentes façons de créer des fonctions et comment les utiliser.
Déclarations de fonctions : La voie la plus directe
Les déclarations de fonctions sont un moyen de créer des fonctions en JavaScript. Une déclaration de fonction est une fonction en JavaScript qui suit la syntaxe ci-dessous.
function functionName(parameters) {
// code goes here...
return "This is a function declaration";
}
Les composants du bloc de code ci-dessus comprennent :
- Le site fonction mot-clé : Ce mot-clé déclare une fonction.
- functionName: Il s’agit du nom de la fonction. En pratique, il doit être aussi descriptif et significatif que possible, indiquant ce que fait la fonction.
- paramètres: Ceci représente les paramètres de la fonction. Les paramètres sont une liste facultative de variables que vous pouvez passer à une fonction lorsque vous l’appelez.
- Le corps de la fonction : Il contient le code que la fonction va exécuter lorsque vous l’appelez. Il est entouré d’accolades {} et peut contenir tout code JavaScript valide.
- Le site retour déclaration : Cette instruction arrête l’exécution d’une fonction et renvoie la valeur spécifiée. Dans le cas ci-dessus, l’appel de la fonction renverrait la chaîne « Ceci est une déclaration de fonction ».
Par exemple, la déclaration de fonction ci-dessous prend trois nombres comme paramètres et renvoie leur somme.
function addThreeNumbers(a, b, c) {
return a + b + c;
}
Pour appeler une déclaration de fonction en JavaScript, écrivez le nom de la fonction suivi d’un ensemble de parenthèses (). Si la fonction prend des paramètres, passez-les comme arguments entre les parenthèses.
Par exemple :
addThreeNumbers(1, 2, 3) // 6
Le bloc de code ci-dessus appelle la fonction addThreeNumber et passe 1, 2 et 3 comme arguments à la fonction. Si vous exécutez ce code, il renverra la valeur 6.
JavaScript reprend les déclarations de fonctions, ce qui signifie que vous pouvez les appeler avant de les définir.
Par exemple :
isHoisted(); // Function is hoisted
function isHoisted() {
console.log("Function is hoisted");
return true;
}
Comme le montre le bloc de code ci-dessus, l’appel de isHoisted avant de le définir ne déclencherait pas d’erreur.
Expressions de fonctions : Fonctions en tant que valeurs
En JavaScript, vous pouvez définir une fonction comme une expression. Vous pouvez ensuite affecter la valeur de la fonction à une variable ou l’utiliser comme argument d’une autre fonction.
Elles sont également connues sous le nom de fonctions anonymes car elles n’ont pas de nom et vous ne pouvez les appeler qu’à partir de la variable à laquelle vous les avez assignées.
Voici la syntaxe d’une expression de fonction :
const functionName = function () {
return "Function expression";
};
Pour appeler une expression de fonction en JavaScript, écrivez le nom de la variable que vous avez assignée à la fonction, suivi d’une série de parenthèses. (). Si la fonction prend des paramètres, passez-les comme arguments entre les parenthèses.
Par exemple :
functionName(); // Function expression
Les expressions de fonction sont pratiques pour créer des fonctions qui s’exécutent dans d’autres fonctions. Les exemples typiques sont les gestionnaires d’événements et leurs rappels.
Par exemple :
button.addEventListener("click", function (event) {
console.log("You clicked a button!");
});
L’exemple ci-dessus utilise une expression de fonction qui prend une valeur de événement en tant que rappel de l’événement addEventListener fonction. Vous n’avez pas besoin d’appeler la fonction explicitement lorsque vous utilisez une expression de fonction comme rappel. Elle est automatiquement appelée par sa fonction parente.
Dans le cas ci-dessus, lorsque l’écouteur d’événements reçoit un message clic il appelle la fonction de rappel et transmet l’événement événement en tant qu’argument.
Contrairement aux déclarations de fonctions, les expressions de fonctions ne sont pas hissées, vous ne pouvez donc pas les appeler avant de les définir. Si vous essayez d’accéder à une expression de fonction avant de la définir, vous obtiendrez un message d’erreur ReferenceError.
Par exemple :
isHoisted(); // ReferenceError: Cannot access 'isHoisted' before initialization
const isHoisted = function () {
console.log("Function is hoisted");
};
Fonctions fléchées : Compactes et limitées
ES6 a introduit un raccourci pour écrire des fonctions anonymes en JavaScript, les fonctions flèches. Elles ont une syntaxe concise qui peut rendre votre code plus lisible, surtout lorsqu’il s’agit de fonctions courtes et d’une seule ligne.
Contrairement à d’autres méthodes de création de fonctions, les fonctions flèches ne nécessitent pas l’utilisation de l’attribut fonction mot-clé. Une expression de fonction fléchée se compose de trois parties :
- Une paire de parenthèses (()) contenant les paramètres. Vous pouvez omettre les parenthèses si la fonction n’a qu’un seul paramètre.
- Une flèche (=> ;), qui se compose d’un signe égal (=) et un signe plus grand que (> ;).
- Une paire d’accolades contenant le corps de la fonction. Vous pouvez omettre les accolades si la fonction consiste en une seule expression.
Par exemple :
// Single parameter, implicit return
const functionName = parameter => console.log("Single parameter arrow function")
// Multiple parameters, explicit return
const functionName = (parameter_1, parameter_2) => {
return "Multiple parameter arrow function"
};
Lorsque vous omettez les accolades, la fonction flèche renvoie implicitement l’expression unique, et il n’est donc pas nécessaire d’utiliser la balise return mot-clé. En revanche, si vous n’omettez pas les accolades, vous devez explicitement retourner une valeur à l’aide du mot-clé return mot-clé.
Les fonctions fléchées ont également un ce par rapport aux fonctions régulières. Dans les fonctions normales, la valeur de ce dépend de la façon dont vous appelez la fonction. Dans une fonction flèche, ce est toujours lié à la ce valeur de la portée environnante.
Par exemple :
const foo = {
name: "Dave",
greet: function () {
setTimeout(() => {
console.log(`Hello, my name is ${this.name}`);
}, 1000);
},
};
foo.greet(); // Logs "Hello, my name is Dave" after 1 second
Dans l’exemple ci-dessus, la fonction flèche à l’intérieur de la balise saluer La méthode a accès à ce.nommême si le setTimeout l’appelle. Une fonction normale aurait son ce lié à l’objet global.
Expressions de fonctions immédiatement invoquées (IIFE)
Comme son nom l’indique, une fonction immédiatement invoquée (IIFE) est une fonction qui s’exécute dès qu’elle est définie.
Voici la structure d’une IIFE :
(function () {
// code here
})();
(() => {
// code here
})();
(function (param_1, param_2) {
console.log(param_1 * param_2);
})(2, 3);
Un IIFE consiste en une expression de fonction enveloppée dans une paire de parenthèses. Faites-la suivre d’une paire de parenthèses à l’extérieur de l’enveloppe pour invoquer la fonction.
Vous pouvez utiliser les IIFE pour créer des scopes, cacher des détails de mise en œuvre et partager des données entre plusieurs scripts. Ils étaient autrefois utilisés comme système de modules en JavaScript.
Créer une fonction de plusieurs façons différentes
Il est essentiel de comprendre comment créer des fonctions en JavaScript. Cela est vrai pour une fonction de base qui effectue un calcul simple ou une fonction sophistiquée qui interagit avec d’autres parties de votre code.
Vous pouvez utiliser les techniques présentées ci-dessus pour créer des fonctions en JavaScript et structurer et organiser votre code. Choisissez l’approche qui répond le mieux à vos besoins, car chacune présente des avantages et des applications différents.
