Les fonctions en JavaScript

Formation Soyez un druide du JavaScript !

Tutorial Thumbnail

De manière générale, en programmation, une fonction correspond à une portion de code réalisant un traitement spécifique qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne.


Présentation

L'utilisation des fonctions permet d'éviter d'écrire plusieurs fois le même code et améliore la lisibilité du programme.


Déclarer une fonction en JavaScript

Avant tout, une fonction doit √™tre d√©clar√©e dans le script o√Ļ elle sera utilis√©e. La d√©claration d'une fonction s'effectue en utilisant le mot cl√© function suivi par :

  • le nom de la fonction.
  • la liste des param√®tres √† passer √† la fonction, entre parenth√®ses et s√©par√©s par des virgules, si la fonction n'utilise pas de param√®tres, les parenth√®ses doivent rest√©es vides.
  • les instructions correspondant au traitement que doit r√©aliser la fonction, entre accolades, { }

Le code suivant, par exemple, définit une fonction intitulée calculerSurface :

function calculerSurface(longeur, largeur) {
    let surface;                         // Pour la valeur de la surface
    surface = prmLongueur * prmLargeur;  // Réalisation du calcul de la surface avec les paramètres pris dans la fonction "longeur" & "largeur"
 
    return surface ;                     // Valeur de retour du calcul de la surface
}


La fonction calculerSurface prend deux paramètres prmLongueur et prmLargeur correspondant à la longueur et à la largeur. Elle est composée des instructions qui permettent de calculer et de retourner la surface définie par ces deux paramètres.


L'instruction return spécifie la valeur qui est renvoyée par la fonction.


Appeler une fonction

Pour exécuter le code d'une fonction, il faut appeler celle-ci en utilisant son nom et en lui spécifiant les valeurs à prendre en compte pour les paramètres. Si la fonction retourne un résultat, il est conseillé d'utiliser une variable pour le récupérer.

Le code suivant permet d'appeler la fonction calculerSurface() :

let surface = calculerSurface(4,3);


Cette instruction permet d'appeler la fonction calculerSurface() pour calculer la surface correspondant à une longueur et à une largeur définies par les valeurs 4 et 3. La valeur calculée sera retournée dans la variable surface.

Il est possible également d'appeler une fonction en passant par des variables pour les paramètres.
let longueur = 4;
let largeur = 3;
let surface = calculerSurface(longueur, largeur);


Portée des variables

La portée d'une variable désigne l'espace du script dans lequel cette variable sera accessible. En JavaScript, il n'existe que deux espaces de portée différents : l'espace global et l'espace local. De manière simple, l'espace global désigne la totalité d'un script excepté l'intérieur des fonctions, l'espace local désigne, à l'inverse, l'espace dans une fonction.

Une variable globale sera accessible √† travers tout le script y compris depuis une fonction. En revanche, une variable locale ne sera accessible que dans la fonction o√Ļ elle a √©t√© d√©clar√©e et ne pourra pas √™tre manipul√©e depuis l'espace global.

Exemple :

let a = 5;           // "a" est une variable globale
test() ;             // Exécution de la fonction
    
function test() {
    let b = 3;       // "b" est une variable locale à la fonction test()
    b = b * a;       // La variable a peut être utilisée dans la fonction

    console.log(b);ÔĽŅ  // Affichage de la valeur de la variable "b" dans la fonction membre
}

En terme de qualit√© de codage, il est imp√©ratif de favoriser au maximum l'utilisation des variables locales gr√Ęce au passage de param√®tres dans les fonctions.


Fonctions imbriquées

En JavaScript, il est possible de définir dans une fonction d'autres fonctions qui sont alors dites fonctions internes et pour lesquelles des règles de visibilité s'appliquent.

  • une fonction interne a acc√®s aux variables d√©finies dans la fonction qui la contient.
  • par contre, une fonction n'a pas acc√®s aux variables d√©finies dans ses fonctions internes.

Exemple :

function calculerSurface() {
    // d√©claration des variables locales
    let longueur,
        largeur;
    
    // D√©claration des fonctions internes
    function initialiserLongueur() {
        longueur = 4;
    }
    
    function initialiserLargeur() {
        largeur = 3;
    }
    
    // appel des fonctions internes
    initialiserLongueur();
    initialiserLargeur();
    
   // Retour du r√©sultat
   return largeur * longueur;
}

let surface = calculerSurface();
console.log(surface);


Dans cet exemple, les fonctions internes initialiserLongueur() et initialiserLargeur() sont utilisées par la fonction calculerSurface() pour initialiser les valeurs des variables locales longueur et largeur.


Activité : Codage de fonctions pour calculer et interpréter l'IMC

Reprendre l'application de calcul d'IMC du tutoriel "Les structures de contr√īles", utilisez :

  • Une fonction calculerIMC() capable de recevoir en param√®tres la taille en cm et le poids en kg et qui retourne la valeur de l'IMC correspondante.
function calculerIMC(taille, poids) {
  let valIMC;

  // ---- Codage ---- //

  return valIMC;
}


  • Une fonction interpreterIMC() qui recoit en param√®tre la valeur de l'IMC et qui retourne l'interpr√©tation correspondante.
function interpreterIMC(imc) {
     let interpretation;

     // ---- Codage ---- //

     return interpretation;
}


Développez, en reprenant le projet "Calcul de l'IMC", une nouvelle version basée sur l'utilisation des fonctions imbriquées, pour cela :

  • Pr√©voir une fonction descriptionCorpulence(taille, poids) qui retourne un message contenant la valeur de l'IMC et l'√©tat de corpulence correspondant.
  • Coder les fonctions calculerIMC() et interpreterIMC() en tant que fonctions internes √† la fonction descriptionCorpulence(taille, poids).
  • Les variables repr√©sentant l'IMC et l'interpr√©tation de l'IMC seront d√©clar√©es en tant que variables locales √† la fonction decrire_corpulence() et pourront donc √™tre utilis√©es directement dans les fonctions internes.

Exemple de résultat attendu :



Les fonctions anonymes

Déclarer une fonction anonyme

En JavaScript, il est possible de créer une fonction anonyme de la même manière qu'une fonction classique en utilisant le mot clé function mais sans spécifier de nom pour cette fonction.

Exemple :

function() {
    console.log("Je suis une fonction anonyme");
}


Dans cet exemple, on a d√©clar√© une fonction anonyme dont la t√Ęche est d'afficher le message "Je suis une fonction anonyme" dans la console du navigateur.

Le problème est de savoir maintenant comment appeler cette fonction pour qu'elle soit exécutée. Pour cela, il existe plusieurs possibilités, notamment :

  • D'enfermer le code de la fonction dans une variable et utiliser cette variable comme une fonction.
  • Auto-invoquer la fonction.
  • Utiliser un √©v√®nement pour d√©clencher l'ex√©cution de la fonction.


Exécuter une fonction anonyme en utilisant une variable

Ici le principe consiste à déclarer une variable et à lui affecter une fonction anonyme.

Exemple :

let afficherMessage = function() {
    console.log("Je suis une fonction anonyme");
}

Dans l'exemple ci-dessus, la variable afficherMessage contient une fonction anonyme qui va afficher le message "Je suis une fonction anonyme".


Pour appeler la fonction anonyme et exécuter son code, il faut utiliser le nom de la variable qui la contient suivi d'un couple de parenthèses dites appelantes car elles servent à exécuter la fonction qui les précède.

Exemple :

let afficherMessage = function() {
    console.log("Je suis une fonction anonyme");
}

afficherMessage();      // Exécution de la fonction anonyme contenue dans la variable "afficherMessage"


Auto-invoquer une fonction anonyme

Une fonction anonyme peut être créée pour s'invoquer (ou s'appeler ou encore s'exécuter) elle-même dès sa création. Pour auto-invoquer une fonction anonyme, il faut qu'elle soit inscrite elle-même entre parenthèses et suivi d'un couple de parenthèses appelantes.

Exemple :

(function() {
    console.log("Je suis une fonction anonyme auto-invoquée");
})();
Une fonction auto-invoquée s'exécutera toujours juste après sa déclaration et ne pourra pas être rappelée plus tard dans le script qui la contient.


Exécuter une fonction anonyme lors du déclenchement d'un évènement

Il est enfin possible également de rattacher une fonction anonyme à ce qu'on appelle des "gestionnaires d'évènements" en JavaScript. Le langage JavaScript permet de répondre à des évènements, c'est à dire d'exécuter une séquence de code lorsqu'un évènement survient.


Le JavaScript permet de répondre à de nombreux types d'évènements tels que un clic sur un élément de la page, l'appui sur une touche du clavier, le chargement d'une nouvelle page... Pour définir la réponse à un évènement en particulier, on utilise un gestionnaire d'évènement qui est une fonction prévue pour exécuter le code voulu lorsque l'évènement en question se produit. Dans ce contexte, on pourra passer une fonction anonyme à un gestionnaire d'évènement pour qu'elle soit exécutée lors du déclenchement de l'évènement que ce gestionnaire prend en charge.


L'utilisation pratique des fonctions anonymes avec les gestionnaires d'évènements sera vue plus tard au cours de la formation.


Exercices

Pour voir si tu as bien compris le fonctionnement des fonctions, n'h√©site-pas √† t'entrainer de ton c√īt√© avec les exercices propos√©s ci-dessous. Prends ton √©diteur pr√©f√©r√©, cr√©√© un nouveau projet contenant un fichier HTML et JavaScript et c'est parti !


Exercice 1 : calcul du temps de parcours d'un trajet

On souhaite calculer le temps de parcours d'un trajet en voiture. Pour cela, on fournit au programme la vitesse moyenne et la distance à parcourir, ensuite le programme calcule et affiche le temps nécessaire en secondes.


Version 1 :

On définit les unités à respecter suivantes :

  • vitesse : km/h
  • distance : km
  • temps : s

Exemple :


Codez le programme de manière à ce que le calcul du temps de parcours soit réalisé par une fonction calculerTempsParcoursSec(). Cette fonction recevra en paramètres la vitesse et la distance et retournera la valeur du temps en secondes.


Attention : le temps sera affiché depuis le programme principal et non depuis la fonction.
Note : vous pourrez utiliser la fonction Math.floor(x) qui renvoie le plus grand entier qui est inférieur ou égal à x.

Tester et validez ce programme.


Version 2 :

On souhaite maintenant afficher le temps de parcours en Heures/Minutes/Secondes (on négligera les 1/10ème de seconde).

Exemple :




Modifiez et complétez le programme de manière à ce que la durée exprimée en Heures/Minutes/Secondes soit calculée et retournée sous forme d'une chaine de caractères par une fonction convertir_h_min_sec() qui recevra en paramètre le temps en secondes.


Attention : le temps sera affiché depuis le programme principal et non depuis la fonction.

Tester et validez ce programme.


Exercice 2 : recherche du nombre de multiples de 3

On souhaite afficher la liste des valeurs multiples de 3 comprises entre 0 et un nombre entier au choix.

Exemple :



Codez le programme de manière à ce que la recherche des multiples entre 0 et le nombre choisi soit réalisée par une fonction rechercher_Mult3(). Cette fonction recevra en paramètre le nombre choisi et retournera une chaine de caractères correspondant à la liste des valeurs trouvées.

Attention : La liste des valeurs sera affichée depuis le programme principal et non depuis la fonction.

Tester et validez ce programme.

Niveau Débutant

Technologie utilisée :

Proposer une modification
Antoine
Par Antoine
Rédigé le Mardi 18 Octobre 2022