Web-Programming II:

JavaScript
Functions

1
Qu’est-ce qu’une Function ?
En JavaScript, une function est :

Un bloc de code réutilisable qui exécute une tâche

spécifique
Un mécanisme pour isoler et modulariser la logique,
améliorant ainsi la maintenance et la lisibilité du code
Un moyen d’encapsuler des comportements et de rendre le
code plus organisé
1 function greet(name) {
2 return "Hello, " + name + "!";
3 }
4 console.log(greet("Amine")); // Affiche : "Hello, Amine!"

2
Pourquoi Utiliser des Functions ?
Réutilisabilité : Permet d’exécuter le même code à plusieurs
endroits
Modularité : Découpe le code en blocs logiques pour faciliter
maintenance et débogage
Lisibilité : Des functions bien nommées rendent le code plus
compréhensible

3
Activité :
1. Déclarez une function calcul qui reçoit un paramètre n et
retourne le carré de n plus 2.
2. Appelez calcul(5) et affichez le résultat dans la console
(attendu : 27).

4
Proposition de solution 1 :
1 function calcul(n) {
2 return n * n + 2;
3 }
4 console.log(calcul(5)); // Attendu : 27

5
Proposition de solution 2 :
Proposition de solution 2 avec fonction javascript Math.pow() :
1 function calcul(n) {
2 return Math.pow(n, 2) + 2;
3 }
4 console.log(calcul(5)); // Attendu : 27

6
Paramètres de Fonction
Les fonctions peuvent accepter des paramètres, qui sont des
valeurs passées à la fonction lors de son appel.
1 function multiplier(a, b) {
2 return a * b;
3 }
4 console.log(multiplier(3, 4)); // Affiche : 12

7
Valeurs de Retour
Les fonctions peuvent retourner une valeur à l’endroit où elles
sont appelées, en utilisant le mot-clé return.
1 function multiplier(a, b) {
2 return a * b;
3 }
4 const resultat = multiplier(3, 4);
5 console.log(resultat); // Affiche : 12

8
Valeur de Retour par Défaut
Si aucune valeur de retour n’est spécifiée, la fonction renvoie
undefined.
1 function afficherMessage() {
2 console.log("Message affiché!");
3 }
4 const resultat = afficherMessage();
5 console.log(resultat); // Affiche : undefined

9
Fonctions sans Paramètres
Les fonctions peuvent être définies sans paramètres, mais les
parenthèses sont toujours nécessaires.
1 function afficherMessage() {
2 console.log("Message affiché!");
3 }
4 afficherMessage(); // Affiche : "Message affiché!"

10
Fonctions sans Valeur de Retour
Les fonctions peuvent ne pas retourner de valeur, mais le mot-
clé return est toujours facultatif.
1 function afficherMessage() {
2 console.log("Message affiché!");
3 }
4 const resultat = afficherMessage();
5 console.log(resultat); // Affiche : undefined

11
Fonctions avec Valeurs par Défaut
Les paramètres de fonction peuvent avoir des valeurs par
défaut, qui sont utilisées si aucun argument n’est fourni.
1 function multiplier(a = 1, b = 1) {
2 return a * b;
3 }
4 console.log(multiplier()); // Affiche : 1

12
Fonctions avec un Nombre Variable
de Paramètres
Les fonctions peuvent accepter un nombre variable de
paramètres en utilisant l’opérateur de décomposition ....
1 function calcul(a,b,...nombres) {
2 let total = a * b;
3 for (const nombre of nombres) {
4 total += nombre;
5 }
6 return total;
7 }
8 console.log(calcul(2, 3, 4, 5)); // Affiche : 15

Pour calcul(2, 3, 4, 5) : - a = 2, b = 3 - nombres = [4, 5]

total = 2 * 3 + 4 + 5 = 6 + 4 + 5 = 15
13
Types de Functions en JavaScript
JavaScript offre différentes façons de déclarer des fonctions:

Function declarations (fonctions déclarées) : traditionnelles,

avec hoisting
Function expressions (expressions de fonction) : assignées à
des variables
Arrow functions (fonctions fléchées) : syntaxe concise,
introduites en ES6 (2015)
Method definitions : fonctions à l’intérieur d’objets

14
Fonction Déclarée (classique)
Commence par le mot-clé function, suivi du nom de la
fonction, des paramètres entre parenthèses et du bloc de code
entre accolades.
1 function saluer(nom) {
2 return "Bonjour, " + nom + "!";
3 }
4 console.log(saluer("Amine")); // Affiche : "Bonjour, Amine!"

15
Hoisting dans les Function
Declarations
Les fonctions déclarées sont hoistées, ce qui signifie que vous
pouvez les appeler même avant leur définition dans le code.
1 console.log(multiplier(2, 3)); // Affiche : 6
2
3 function multiplier(a, b) {
4 return a * b;
5 }

16
Expression de fonction (alternative
moderne)
Une Expression de fonction consiste à affecter une function
(souvent anonyme) à une variable. Contrairement aux function
declarations, elles ne sont pas hoistées.
1 const soustraire = function(a, b) {
2 return a - b;
3 };
4
5 console.log(soustraire(10, 4)); // Affiche : 6

17
Pourquoi utiliser les expressions de
fonctions?
Comme un nombre ou un texte, une fonction peut être
stockée dans une variable
On peut la passer à une autre fonction (très utile pour les
événements!)
On peut la stocker dans un tableau ou un objet
Parfait pour les fonctions courtes utilisées une seule fois
Pour les fonctions fléchées (plus modernes et concises)

18
Fonctions Fléchées (Arrow Functions)
Les fonctions fléchées sont une syntaxe plus concise pour
définir des fonctions anonymes. Elles ont été introduites dans
ES6 et possèdent quelques caractéristiques particulières:
1 const multiplier = (x, y) => {
2 return x * y;
3 };
4 console.log(multiplier(4, 5)); // Affiche : 20

19
Transformation des fonctions en
fonctions fléchées
1️⃣ Commancer par une Function declaree
1 function saluer(nom) {
2 return "Bonjour, " + nom + "!";
3 }

2️⃣ Convertissez en expression de fonction :

On commence par affecter la fonction à une variable.
1 const saluer = function(nom) {
2 return "Bonjour, " + nom + "!";
3 };

20
Transformation des fonctions en
fonctions fléchées (suite)
2️⃣ Expression de fonction :
1 const saluer = function(nom) {
2 return "Bonjour, " + nom + "!";
3 };

3️⃣ Convertissez en fonction fléchée :

On remplace la syntaxe par une arrow function plus concise.
1 const saluer = (nom) => {
2 return "Bonjour, " + nom + "!";
3 };

21
Transformation des fonctions en
fonctions fléchées (suite)
3️⃣ Fonction fléchée :
1 const saluer = (nom) => {
2 return "Bonjour, " + nom + "!";
3 };

4️⃣ Simplifiez en supprimant le bloc et le

return (retour implicite) :
Pour une seule expression, on peut omettre les accolades et le
mot-clé return.
1 const saluer = (nom) => "Bonjour, " + nom + "!";

22
Transformation des fonctions en
fonctions fléchées (suite)
4️⃣ Fonction flechee simplifiee :
1 const saluer = (nom) => "Bonjour, " + nom + "!";

5️⃣ Pour un seul paramètre, les parenthèses

sont optionnelles :
Pour un seul argument, on peut omettre les parenthèses.
1 const saluer = nom => "Bonjour, " + nom + "!";

23
Transfromation Functions avec
plusieurs paramètres

24
Fonction declaree
1 function saluer(nom, prenom) {
2 return "Bonjour, " + nom + " " + prenom + "!";
3 }

25
Expression de fonction
1 const saluer = function(nom, prenom) {
2 return "Bonjour, " + nom + " " + prenom + "!";
3 };

26
Fonction fléchée
1 const saluer = (nom, prenom) => {
2 return "Bonjour, " + nom + " " + prenom + "!";
3 };

27
Fonction fléchée simplifiée
1 const saluer = (nom, prenom) => "Bonjour, " + nom + " " + prenom + "!";

Important

Avec plusieurs paramètres, les parenthèses sont obligatoires, contrairement au cas

d’un seul paramètre où elles sont optionnelles

28
Transfromation des fonctions avec
plusieurs instructions

29
Fonction declaree
1 function saluer(nom, prenom) {
2 // Majuscule sur le nom et prenom
3 nom = nom.toUpperCase();
4 prenom = prenom.charAt(0).toUpperCase() + prenom.slice(1);
5 return "Bonjour, " + nom + " " + prenom + "!";
6 }

30
Expression de fonction
1 const saluer = function(nom, prenom) {
2 // Majuscule sur le nom et prenom
3 nom = nom.toUpperCase();
4 prenom = prenom.charAt(0).toUpperCase() + prenom.slice(1);
5 return "Bonjour, " + nom + " " + prenom + "!";
6 };

31
Fonction fléchée
1 const saluer = (nom, prenom) => {
2 // Majuscule sur le nom et prenom
3 nom = nom.toUpperCase();
4 prenom = prenom.charAt(0).toUpperCase() + prenom.slice(1);
5 return "Bonjour, " + nom + " " + prenom + "!";
6 };

32
Fonction fléchée simplifiée
1 const saluer = (nom, prenom) => {
2 nom = nom.toUpperCase();
3 prenom = prenom.charAt(0).toUpperCase() + prenom.slice(1);
4 return "Bonjour, " + nom + " " + prenom + "!";
5 };

Important

Avec plusieurs instructions, les accolades et le mot-clé return sont nécessaires pour
retourner explicitement la valeur.

33
Fonctions avec des Valeurs de Retour
Multiples
Les fonctions peuvent retourner plusieurs valeurs en les
regroupant dans un objet ou un tableau.
1 function diviser(a, b) {
2 return { quotient: a / b, reste: a % b };
3 }
4 const resultat = diviser(10, 3);
5 console.log(resultat.quotient, resultat.reste); // Affiche : 3 1

34
Fonctions Auto-Exécutables
Les fonctions auto-exécutantes s’exécutent immédiatement
après leur définition, sans avoir besoin d’être appelées.
1 (function() {
2 console.log("Fonction auto-exécutante!");
3 })();

35
Les fonctions de rappel (Callbacks)
Une fonction de rappel (callback) est une fonction qui est
passée en argument à une autre fonction. En d’autres termes,
on passe le nom d’une fonction comme argument à une autre
fonction.
Cas d’utilisation
Les callbacks sont principalement utilisés pour gérer les
opérations asynchrones. Ce sont des opérations qui prennent
du temps à s’exécuter, comme :
 Lecture de fichiers
Requêtes réseau
Interactions avec des bases de données

Exemples détaillés

36
Exemples de Callbacks
bonjour(callback) sans timeout
1 function bonjour(callback) {
2 console.log("bonjour");
3 callback(); // Appel de la fonction callback
4 }
5 function demarrerUI() {
6 console.log("Mise en place de l'interface utilisateur");
7 }
8
9 function implementaterBackend() {
10 console.log("Implementation du backend");
11 }
12
13 function creerTests() {
14 console.log("Creation des tests end to end");
15 }

37
Exemples de Callbacks
bonjour(callback) sans timeout
1 bonjour(demarrerUI); // 'demarrerUI' est passée comme callback à 'bonjour'
2 // Résultat attendu : bonjour, puis Mise en place de l'interface utilisateur
3
4 bonjour(implementaterBackend); // 'implementaterBackend' comme callback
5 // Résultat attendu : bonjour, puis Implementation du backend
6
7
8 bonjour(creerTests); // 'creerTests' comme callback
9 // Résultat attendu : bonjour, puis Creation des tests end to end

38
Exemple de Callback avec setTimeout
1 function bonjour(callback) {
2 // Simulation d'un processus qui prend du temps
3 setTimeout(function() {
4 console.log("bonjour");
5 callback(); // Appel de la fonction callback
6 }, 3000);
7 }
8
9 function auRevoir() {
10 console.log("au revoir");
11 }
12
13 function partir() {
14 console.log("je pars");
15 }
16
17 function attendre() {
18 console.log("j'attends");

39
Exemple Callback pour traiter le
résultat d’une fonction
1 function somme(x, y, callback) {
2 let resultat = x + y;
3 callback(resultat); // Invocation du callback avec le résultat
4 }
5
6 function afficherConsole(resultat) {
7 // Affichage du résultat dans la console
8 console.log("Mon résultat :", resultat);
9 }
10
11 function afficherPage(resultat) {
12 // Affichage du résultat dans une page HTML
13 const monH1 = document.getElementById("monH1");
14 if (monH1) {
15 monH1.textContent = resultat;
16 }
17 }

40
Travail à faire
Créez une fonction qui génère un nombre aléatoire de villes
marocaines (entre 3 et 5 villes) et les stocke dans un tableau.
La fonction doit ensuite appeler un callback avec le tableau de
villes en majuscules.

41
Exemple avec fonction définie
séparément
1 // Simulation d'un appel API avec fetch
2 function fetchUserData(callback) {
3 // URL d'une API fictive (pour démonstration)
4 const apiUrl = 'https://api.example.com/users/1';
5
6 console.log("Envoi de la requête à l'API...");
7 // Simulation d'un délai réseau avec setTimeout
8 setTimeout(() => {
9 // Réponse de l'API
10 const userData = {
11 id: 1,
12 name: "Amine",
13 age: 30,
14 email: "[email protected]"
15 };
16
17 console.log("Réponse de l'API reçue");
18 callback(userData);
42
Avantages de l’utilisation des
callbacks avec fonctions définies
séparément
Réutilisable : Le callback peut être utilisé dans d’autres
contextes
Lisible : Le code est plus clair et facile à comprendre
Facilite le débogage : En cas d’erreur, le nom de la fonction
est affiché dans la console

43
Exemple avec fonction anonyme
(callback unique)
Les fonctions anonymes sont souvent utilisées pour les
callbacks qui ne seront utilisés qu’une seule fois.
Dans cet exemple, une fonction anonyme est utilisée comme
callback pour traiter les données utilisateur une fois qu’elles
sont reçues.
On n a pas besoin de déclarer une fonction séparée pour le
callback.
Cette approche est utile pour les callbacks qui ne seront
utilisés qu’une seule fois.
44
Exemple avec fonction anonyme
(Suite)
1
2 // Appel de la fonction fetchUserData avec une fonction anonyme comme callback
3
4 fetchUserData(function(userData) {
5 // afficher le nom et email de l'utilisateur
6 console.log("Nom :", userData.name);
7 console.log("Email :", userData.email);
8 });

45
Exemple avec fonction anonyme
(arrow syntax)
Dans cet exemple, une fonction fléchée est utilisée comme
callback pour traiter les données utilisateur une fois qu’elles
sont reçues.
1 // Appel de la fonction fetchUserData avec une fonction fléchée comme callback
2
3 fetchUserData(userData => {
4 // afficher le nom et email de l'utilisateur
5 console.log("Nom :", userData.name);
6 console.log("Email :", userData.email);
7 });

46
Utilisation des callbacks dans
d’autres cas pratiques
Les callbacks sont largement utilisés dans d’autres cas
pratiques, tels que :
les écouteurs d’événements (addEventListener)
les méthodes de tableau (map, filter, forEach)
les requêtes réseau (fetch, XMLHttpRequest)
les opérations (setTimeout, setInterval)

47
Functions et Objets en
JavaScript

48
Déclarer une méthode dans un objet
1 const personne = {
2 nom: "Amine",
3 saluer: function() {
4 console.log("Bonjour, je m’appelle", this.nom);
5 }
6 };
7 personne

49
Déclarer une méthode dans un objet
(suite)
En ES6, on peut utiliser la syntaxe méthode :
1 const personne = {
2 nom: "Amine",
3 saluer() {
4 console.log("Bonjour, je m’appelle", this.nom);
5 }
6 };
7
8 personne.saluer(); // "Bonjour, je m’appelle Amine"

Lorsque vous appelez personne.saluer(), this vaut

personne.

50
Utilser les fonctions fléchées dans un
callback
Une fonction flèche hérite du this de la méthode ou elle a
été définie et preserve le this de l’objet parent.
1 const personne = {
2 nom: "Amine",
3 saluer() {
4 setTimeout(() => {
5 // La fonction flèche garde le `this` de "saluer"
6 console.log("Bonjour,", this.nom);
7 }, 1000);
8 }
9 };
10 personne.saluer();
11 // Après 1 seconde : "Bonjour, Amine"

51
Pourquoi on n’utilise pas de fonction
fléchée pour déclarer directement
une méthode
1 const personne = {
2 nom: "Amine",
3 saluer: () => {
4 console.log("Bonjour, je m’appelle", this.nom);
5 }
6 };
7 personne.saluer(); // "Bonjour, je m’appelle undefined"

La fonction flèche ne crée pas de nouveau this lié à l’objet.

Résultat : this.nom est undefined.

52
Bonnes pratiques
Pour définir une méthode sur un objet, utilisez une fonction
classique (ou la syntaxe méthode ES6).
Pour un callback (dans la méthode), préférez une fonction
flèche pour hériter du this de l’objet.

53
Chaînage de Fonctions (metho
Chaining)
Le chaînage de fonctions est une technique de programmation
qui permet d’appeler plusieurs méthodes en séquence sur le
même objet.

Chaque méthode d’un objet retourne l’objet lui-même (avec

return this)
Cela permet d’enchaîner les appels de méthode sur une
seule ligne
Améliore la lisibilité et la concision du code

54
Exemple de Chaînage de Fonctions
1 const calculatrice = {
2 valeur: 0,
3 ajouter(x) {
4 this.valeur += x;
5 return this;
6 },
7 multiplier(x) {
8 this.valeur *= x;
9 return this;
10 },
11 afficher() {
12 console.log(this.valeur);
13 return this;
14 }
15 };
16
17 calculatrice.ajouter(5).multiplier(2).afficher(); // Affiche : 10

55
Avantages du Chaînage de Fonctions
Code concis : Permet d’écrire des séquences d’appels de
méthode sur une seule ligne
Lisibilité : Facilite la lecture et la compréhension du code
Interface fluide : Crée une interface fluide et expressive pour
interagir avec les objets
Cascading : Permet de combiner plusieurs opérations en une
seule instruction

56
Chaînage de Fonction pour les
méthodes de tableau
Les méthodes de tableau en JavaScript peuvent également
être enchaînées
1 const fruits = ["pomme", "banane", "orange", "fraise"];
2
3 const resultat = fruits
4 .filter(fruit => fruit.length > 5)
5 .map(fruit => fruit.toUpperCase())
6 .join(", "); // join permet de transformer un tableau en chaine de caractères
7
8 console.log(resultat); // Affiche : "BANANE, ORANGE, FRAISE"

57