Les fonctions, Expressions et fonctions fléchées en Javascript
Les fonctions, Expressions et fonctions fléchées en Javascript
-
Objectifs
- Créez et comprenez les fonctions en Javascript!
-
Présentation
- Une fonction est un ensemble de code, qui est défini une fois et peut être appelé n nombre de fois. Une fonction peut être réutilisée, ainsi elles sont également utilisées pour éviter la répétition du code.
- Les fonctions sont l’un des principaux piliers de JavaScript. Fondamentalement, une fonction JavaScript est un ensemble d’instructions qui effectue certaines tâches ou effectuent des calculs, puis renvoie le résultat à l’utilisateur
- Dans JavaScript , une fonction est sensiblement la même qu’une procédure ou un sous-programme, dans d’autres langages de programmation.
- La fonction JavaScript est un ensemble d’instructions utilisées pour effectuer une tâche spécifique. Il peut prendre une ou plusieurs entrées et peut également renvoyer une sortie . Les deux, prendre une entrée et renvoyer une sortie sont facultatifs.
- Une fonction JavaScript est exécutée lorsqu’elle est appelée.
-
Syntaxe et déclaration
- Une fonction JavaScript est définie avec le mot-clé
function, suivi d’unnom, suivi de parenthèses()et deux accolades{}pour mettre le code à exécuter. - Les noms de fonction peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes dollar (mêmes règles que les variables).
- Les parenthèses d’une fonction peuvent inclure des noms de paramètres séparés par des virgules:(paramètre1, paramètre2, … )
- Le code à exécuter, par la fonction, est placé entre accolades: {}
-
Appeler une fonction
- Pour appeler ou invoquer une fonction, utilisez le nom de la fonction suivi de parenthèses, c’est-à-dire
(). -
Appeler une fonction en cliquant sur un bouton
- Pour appeler une fonction en cliquant sur un bouton, utilisez l’exemple ci-dessous.
- Dans le premier exemple, une fonction est créée lors d’un clic sur un bouton.
- Dans le deuxième exemple, une fonction déjà intégrée (myFunction) est appelée lors d’un clic sur un bouton. Comme la fonction est utilisée dans une autre fonction (addEventListener), il n’est pas nécessaire d’utiliser des parenthèses.
-
Expression de fonction
- Une autre façon de créer une fonction est l’expression de fonction . Dans l’expression de fonction, une variable est déclarée puis affectée à une fonction anonyme, car elle n’a pas de nom. Ce ne sont pas des fonctions nommées, car elles sont stockées dans une variable.
- L’expression de fonction est une fonction crée, stockée et traitée comme une variable. Il n’y a généralement pas de nom pour les expressions de fonction c’est pourquoi on les appelles des fonctions anonyme. La fonction est stockée dans une variable et peut être appelé comme n’importe quelle fonction. Toutefois sachez que la fonction n’est traitée uniquement que quand l’interpréteur de votre navigateur lit la déclaration.
- La principale différence entre l’ expression de fonction et la déclaration de fonction est qu’ici, elles ne commencent pas par la fonction de mot réservé mais commencent comme si nous créions une variable :
-
Fonctions fléchées
- Une fonction fléchée est une alternative compacte à une expression de fonction traditionnelle, mais elle est limitée et ne peut pas être utilisée dans toutes les situations.
- Au lieu de continuer à utiliser le mot fonction, nous pouvons l’omettre, mais à la place, nous devons mettre un signe égal (=) plus une parenthèse carrée fermante (>) [ou un « plus grand que » plus connu] après la parenthèse fermante:
- Ce type de fonction est plus compacte et a ses propres avantages par rapport au reste, car si nous ne retournons qu’une seule valeur, est que nous pouvons supprimer le mot return et les accolades et implicitement la fonction retournera la valeur.
- C’est très pratique car on élimine le code et la fonction est toujours aussi efficace, et il faut dire qu’on ne peut pas seulement utiliser les fonctions fléchées de cette manière, dans le monde l’utilisation la plus courante qui est donnée à cette fonction est quand elles sont utilisées dans les méthodes d’itération , par exemple
.map()dans un tableau. - Ici simplement la variable valueFinal se verra attribuer la valeur du tableau qui correspond à l’id de 3.
-
Activités
-
Activité01
- Écrire un script qui calcule la factorielle d’un nombre entier positif n
-
Activité02
- Écrire une fonction Javascript qui affiche la table de multiplication d’une valeur donnée en paramètre. Avant l’appel à la fonction la valeur doit être saisie par l’intermédiaire d’une fenêtre de dialogue.
Par exemple, si le nom de la fonction est ma_fonction, utilisez ma_fonction(). Nous pouvons appeler une fonction déclarée après ou avant la déclaration. Ils sont également connus sous le nom de fonction nommée .
<script>
function ditBonjour(){
alert("Bonjour");
}
<script>
<button onclick="ditBonjour()">Dit moi Bonjour</button>Les fonctions d’expression sont d’abord créées puis appelées. Si nous appelons une fonction d’expression avant, une erreur se produira. Un point-virgule est également requis après l’expression de la fonction.
<script>
//Exemple01
var ditBonjour = function() {
alert("Bonjour !");
}
ditBonjour();
//Exemple02
var addition = function(a, b) {
return a + b;
};
var calcul = addition(2, 5) ;
</script>const variable = () => {
return "ma_variable"
}
console.log(variable()) // "ma_variable"const variable = () => "ma_variable"
console.log(variable()) // "ma_variable"const finalValue = arrayProduct.map((item) => item.id === 3)