Maîtriser les Fonctions en JavaScript

Utiliser les fonctions JavaScript
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Javascript
Revoir le teaser Je m'abonne
4,5
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Comprendre l'intérêt des fonctions en JavaScript et savoir comment les utiliser pour améliorer la structure de votre code.

Les fonctions en JavaScript permettent de factoriser du code répétitif, facilitant ainsi la maintenabilité et l'évolutivité des applications.

Les fonctions sous JavaScript permettent de factoriser du code, c'est-à-dire de placer dans une fonction le code répétitif à exécuter souvent. Pour définir une fonction, on utilise le mot-clé function, suivi du nom de la fonction et des arguments qu'elle prend. La fonction doit être définie avant son utilisation. Par exemple, on peut créer une fonction qui affiche des civilités :


function ditBonjour(titre, nom) {
console.log('Bonjour ' + titre + ' ' + nom + '!');
}

Pour appeler cette fonction, vous utilisez : ditBonjour('Monsieur', 'Toto'); et ditBonjour('Madame', 'Tata');

Les fonctions sont souvent utilisées pour effectuer des traitements répétitifs et retourner une valeur à l'aide de l'instruction return. Par exemple, une fonction pour calculer un prix TTC à partir d'un prix HT :


function TTC(HT) {
const TVA = 0.196;
return HT * (1 + TVA);
}

Ensuite, pour obtenir un prix TTC : const prixTTC = TTC(100);

En adoptant de bonnes pratiques, comme le principe DRY (Don't Repeat Yourself), on évite les redondances dans le code, ce qui améliore la maintenabilité et la clarté du programme.

Voir plus
Questions réponses
Pourquoi utilise-t-on des fonctions en JavaScript?
Les fonctions permettent de factoriser du code répétitif pour améliorer la maintenabilité et la réutilisabilité du code.
Qu'est-ce que l'instruction return fait dans une fonction?
L'instruction return arrête l'exécution de la fonction et renvoie une valeur au point d'appel.
Comment appelle-t-on une fonction en JavaScript?
On appelle une fonction en utilisant son nom suivi de parenthèses contenant les arguments nécessaires.
Les fonctions sous Javascript permettent de factoriser du code. Factoriser du code, c'est placer dans une fonction le code répétitif qu'on est amené à exécuter souvent. Comment ça se présente ? Voici la syntaxe d'une fonction. On utilise le mot que est fonction. Là, un nom de fonction, je l'ai appelé ma fonction, et cette fonction prend des arguments. Comment appelle-t-on une fonction ? On utilise le nom, ici ma fonction, et on passe les arguments. La fonction reçoit les arguments et les traites, ici dans ce bloc d'instructions. Voyons comment ça se passe. Une fonction doit être toujours définie avant son utilisation. Faisons un exemple, retournons sur bracket, je vais créer un nouveau fichier, dedans je vais mettre ma fonction. Supposons que ma fonction affiche des civilités, c'est à dire qu'elle dira bonjour monsieur untel, bonjour madame untel. Je crée ma fonction, je l'appelle dit bonjour. En argument, je vais lui mettre le titre, ce sera monsieur ou madame, et le nom. J'ouvre mon bloc de code et je vais créer un message. Pour l'instant je vais l'afficher à la console. Je crée bonjour, et là il faut que je concatène une chaîne. En javascript, pour concaténer une chaîne, c'est l'opérateur plus bonjour titre. Je mets une virgule et je mets le nom. Pour faire bien, je finis par un point d'exclamation. Je ferme mon bloc d'instructions. Maintenant je vais faire appel à cette fonction. Je vais dire bonjour à monsieur Toto, et je vais dire dit bonjour à madame tata. Voilà, mon script est prêt. Je sauvegarde, je vais l'appeler test2.js. Je vais créer un nouveau fichier html pour charger mon script. Ici je rajoute ma balise script. Je n'oublie pas le type. Voilà, je sauvegarde, je vais l'appeler test2.html, et je lance mon navigateur à l'aide de ce bouton magique. Bien sûr, je ne vois rien parce qu'il n'y a rien dans le body. Il faut que je regarde à la console. Voilà, j'ai bien bonjour monsieur Toto, bonjour madame tata. Les fonctions sont souvent utilisées pour effectuer un traitement répétitif et retourner une valeur. Pour cela on utilise l'instruction return. La syntaxe est la même que tout à l'heure, sauf qu'à la fin on fait un return. Le return stoppe l'exécution de la fonction et renvoie la valeur. Ici ma fonction renvoie une valeur que l'on stocke dans la variable var1. Voyons l'exemple. Je crée sous bracket un nouveau fichier. Maintenant supposons que je veuille créer une fonction qui me renvoie un prix TTC à partir d'un prix hors-taxe. Je crée une fonction, je vais la nommer TTC, elle va prendre en paramètre HT qui sera la valeur hors-taxe. Dans une variable je vais stocker la TVA. Je vais calculer le montant de la TVA. Je vais retourner le total, c'est à dire le prix TTC. Je ferme ma fonction et je vais faire un appel, je vais mettre ça dans prix HT. Je vais par exemple, pour le prix 100, ici je vais afficher la valeur à la console. Je me suis trompé, ici c'est TTC, ce serait plus cohérent. Et ici prix TTC. Je sauvegarde, je vais nommer ce script test3.js. Je vais créer un nouveau fichier HTML pour lancer ce script. Voilà, je sauvegarde, je vais l'appeler test3.html, tout est prêt, je peux lancer le navigateur. Allons voir dans la console. J'ai une erreur, prix TCC. Effectivement je retourne dans bracket, mon script est ici, ça va aller mieux comme ça. Je recharge la page dans mon navigateur et j'ai bien 119.6 qui s'affiche. C'est correct. Vous voyez ici une utilisation intéressante d'une fonction. Si la TVA change, donc je peux facilement la modifier à un seul endroit et mon programme sera beaucoup plus maintenable. Une des règles de la programmation qu'elle soit en javascript ou notre langage, c'est que le code doit être dry. Dry, qu'est ce que ça veut dire ? Ça veut dire don't repeat yourself. Il faut éviter au maximum les redondances dans votre code. Un code sans redondance est un code maintenable, un code avec beaucoup de redondance est un code difficilement maintenable. Bien utiliser les fonctions permet de faire un code dry.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
nicolas.braud
Il y a 1 year
Commentaire
Très bonne formation ; j'ai eu des difficultés avec la partie AJAX pour installer les hôtes virtuels d'un point de vue technique, mais on peut y arriver quand même à l'aide de tuto. les documents présentés en slide seraient appréciés pour les utiliser a posteriorir.
fguibert47
Il y a 2 years
Commentaire
Bonjour, Excellente formation. Très bien faite. Alain Beauvois est un très bon professeur !! Elle correspond tout à fait à ce que j'attendais. Merci.
amercadie
Il y a 2 years
Commentaire
Excellente formation. Des cours progressifs et très clairs.
david.coilot
Il y a 2 years
Commentaire
très bonne formation !!
Nos dernières formations JavaScript
  • Apprendre Vue JS 3
    Découvrir
    Apprenez à créer des applications web modernes avec notre formation "Apprendre Vue JS 3". Rejoignez-nous et maîtrisez ce puissant framework JavaScript ! 🚀 #VueJS #FormationWeb #Développement
    11h47 91 leçons
  • Apprendre JavaScript ES6 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux du langage de programmation JavaScript
    4h22 41 leçons 3,50 / 5
  • Savoir programmer en Node.js
    Découvrir
    Apprendre à programmer en Node.js
    2h14 15 leçons