Une fonction est un morceau de code réutilisable qui s'exécute lorsque vous l'invoquez. Les fonctions vous permettent de réutiliser le code, le rendant plus modulaire et plus facile à entretenir.
Il existe plusieurs façons de créer des fonctions en JavaScript. Ici, vous apprendrez les différentes manières de créer des fonctions et comment les utiliser.
Déclarations de fonction: la méthode la plus simple
Une façon de créer des fonctions en JavaScript consiste à utiliser des déclarations de fonction. Une déclaration de fonction est une fonction en JavaScript qui suit la syntaxe ci-dessous.
fonctionnom_fonction(paramètres) {
// le code va ici...
retour"Ceci est une déclaration de fonction";
}
Les composants du bloc de code ci-dessus incluent :
- Le fonction mot-clé: Ce mot-clé déclare une fonction.
- nom_fonction: C'est le nom de la fonction. En pratique, il doit être aussi descriptif et significatif que possible, indiquant ce que fait la fonction.
- paramètres: Cela 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 exécutera lorsque vous l'appelerez. Il est entouré d'accolades {} et peut contenir n'importe quel code JavaScript valide.
- Le retour instruction: 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.
fonctionajouterTroisNombres(un, b, c) {
retour un + 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, transmettez-les comme arguments entre parenthèses.
Par exemple:
ajouterTroisNombres(1, 2, 3) // 6
Le bloc de code ci-dessus appelle le ajouterTroisNombre fonctions et passe 1, 2 et 3 comme arguments à la fonction. Si vous exécutez ce code, il renverra la valeur 6.
Ascenseurs JavaScript déclarations de fonction, ce qui signifie que vous pouvez les appeler avant de les définir.
Par exemple:
isHoisted(); // La fonction est hissée
fonctionisHoisted() {
console.enregistrer("La fonction est hissée");
retourvrai;
}
Comme indiqué dans le bloc de code ci-dessus, appeler isHoisted avant de le définir ne lancerait pas d'erreur.
Expressions de fonction: 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 appelées fonctions anonymes car elles n'ont pas de nom et vous ne pouvez les appeler qu'à partir de la variable à laquelle vous les avez affectées.
Voici la syntaxe d'une expression de fonction :
constante NomFonction = fonction () {
retour"Expression de fonction";
};
Pour appeler une expression de fonction en JavaScript, écrivez le nom de la variable que vous avez attribué à la fonction suivi d'un ensemble de parenthèses (). Si la fonction prend des paramètres, transmettez-les comme arguments entre parenthèses.
Par exemple:
NomFonction(); // Expression de fonction
Les expressions de fonction sont pratiques lors de la création de fonctions qui s'exécutent dans d'autres fonctions. Les exemples typiques incluent les gestionnaires d'événements et leurs rappels.
Par exemple:
bouton.addEventListener("Cliquez sur", fonction (événement) {
console.enregistrer(« Vous avez cliqué sur un bouton! »);
});
L'exemple ci-dessus utilise une expression de fonction qui prend une événement argument comme un rappel à la addEventListener fonction. Vous n'avez pas besoin d'appeler la fonction explicitement lorsque vous utilisez une expression de fonction comme rappel. Il est automatiquement appelé par sa fonction parent.
Dans le cas ci-dessus, lorsque l'écouteur d'événement reçoit un Cliquez sur événement, il appelle la fonction de rappel et passe le événement objet comme argument.
Contrairement aux déclarations de fonction, les expressions de fonction ne sont pas hissées, vous ne pouvez donc pas les appeler avant de les avoir définies. Essayer d'accéder à une expression de fonction avant de la définir entraînera un Erreur de référence.
Par exemple:
isHoisted(); // ReferenceError: Impossible d'accéder à 'isHoisted' avant l'initialisation
constante isHoisted = fonction () {
console.enregistrer("La fonction est hissée");
};
Fonctions fléchées: compactes et limitées
ES6 a introduit un raccourci pour écrire des fonctions anonymes en JavaScript appelées fonctions fléchées. Ils ont une syntaxe concise qui peut rendre votre code plus lisible, en particulier lorsqu'il s'agit de fonctions courtes sur une seule ligne.
Contrairement aux autres méthodes de création de fonctions, les fonctions fléchées ne nécessitent pas la 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 consiste en un signe égal (=) et un signe supérieur à (>).
- 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:
// Paramètre unique, retour implicite
constante NomFonction = paramètre =>console.enregistrer("Fonction flèche à paramètre unique")
// Paramètres multiples, retour explicite
constante NomFonction = (paramètre_1, paramètre_2) => {
retour"Fonction de flèche à paramètres multiples"
};
Lorsque vous omettez les accolades, la fonction flèche renvoie implicitement l'expression unique, il n'y a donc pas besoin de la retour mot-clé. D'autre part, si vous n'omettez pas les accolades, vous devez renvoyer explicitement une valeur en utilisant le retour mot-clé.
Les fonctions fléchées ont également un autre ce liaison par rapport aux fonctions régulières. Dans les fonctions régulières, la valeur de ce dépend de la façon dont vous appelez la fonction. Dans une fonction fléchée, ce est toujours lié à la ce valeur du périmètre environnant.
Par exemple:
constante toto = {
nom: "Dave",
saluer: fonction () {
setTimeout(() => {
console.enregistrer("Bonjour, je m'appelle ${ce.nom}`);
}, 1000);
},
};
foo.salutation(); // Journalise "Hello, my name is Dave" après 1 seconde
Dans l'exemple ci-dessus, la fonction flèche à l'intérieur du saluer méthode a accès à Ce nom, Même si le setTimeout la fonction l'appelle. Une fonction normale aurait son ce lié à l'objet global.
Comme son nom l'indique, une fonction appelée immédiatement (IIFE) est une fonction qui s'exécute dès qu'elle est définie.
Voici la structure d'un IIFE :
(fonction () {
// code ici
})();(() => {
// code ici
})();
(fonction (param_1, param_2) {
console.log (param_1 * param_2);
})(2, 3);
Un IIFE consiste en une expression de fonction entourée d'une paire de parenthèses. Faites-le suivre d'une paire de parenthèses à l'extérieur de l'enceinte pour appeler la fonction.
Vous pouvez utiliser les IIFE pour créer des étendues, masquer les détails d'implémentation 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 différentes manières
Comprendre comment créer des fonctions en JavaScript est crucial. 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 décrites ci-dessus pour créer des fonctions en JavaScript et structurer et organiser votre code. Sélectionnez l'approche qui répond le mieux à vos besoins, car chacune présente divers avantages et applications.
