fonctions

Les fonctions fléchées

Il existe plusieurs manières en JS pour déclarer et utiliser des fonctions. Dans le cadre de ce cours nous nous limiterons uniquement aux fonctions fléchées.

Les fonctions fléchées sont une syntaxe concise pour déclarer des fonctions en JS. Elles ont été introduites avec ECMAScript 6 et ne nécessitent pas son propre contexte this.

Vous rencontrerez dans ce cours uniquement 2 cas de figure : une fonction dans une classe (donc une méthode) et une fonction qui n'est pas incluse dans une classe.

Fonction "classique" hors d'une classe

// Fonction classique
//nous n'utiliserons pas cette forme (un peu archaïque) dans ce cours
function add(a, b) {
    return a + b;
}

// Fonction fléchée équivalente
// pas besoin du return car il y a une seule instruction dans le corps de la fonction
const add = (a, b) => a + b;

//Fonction classique
//nous n'utiliserons pas cette forme (un peu archaïque) dans ce cours
function min(a,b){
if ( a < b ) 
  return a;
else 
  return b;
}

//plus d'une ligne de code, il faut donc explicitement écrire return.
const min = (a,b)=>{
if ( a < b ) 
    return a;
  else 
    return b;
}

Méthode dans un objet

class Truc {
  parler = () =>{
    console.log("Je suis une méthode, et je parle");
  }
  crier = (mot) =>{
    console.log(`Je suis une méthode et je crie : ${mot}`);
  }
}

const truc = new Truc();
truc.parler();
truc.crier("BONJOUR");

Les fonctions fléchées et this

L'un des changements majeurs introduits par les fonctions fléchées est qu'elles n'ont pas leur propre contexte this. Elles héritent plutôt du this du contexte dans lequel elles sont définies (le contexte lexical). Cela évite les problèmes courants liés à la perte de référence à this dans les fonctions classiques.

important

Quand vous utilisez this dans une classe il faudra faire attention à l'utilisation de this. Voici un premier exemple, nous verrons plus en détail ce concept dans le tutoriel sur les interactions avec des éléments du DOM (par exemple des boutons).

 class Counter {
  constructor() {
    this.count = 0;
    this.startCounting();
  }

  startCounting() {
    // Utilisation de setInterval avec une fonction classique
    //setInterval permet d'exécuter toutes les secondes la méthode this.increment
    //le contexte à this de la classe counter est perdu.
    setInterval(function() {
      this.increment(); // <- Cette ligne causera une erreur
    }, 1000);
  }

  increment() {
    this.count++;
    console.log("Count:", this.count);
  }
}

const counter = new Counter();

La version avec fonction fléchée :

class Counter {
  constructor() {
    this.count = 0;
    this.startCounting();
  }

  startCounting() {
    // Utilisation de setInterval avec une fonction fléchée
    setInterval(() => {
      this.increment(); // <- Fonctionne correctement
    }, 1000);
  }

  increment() {
    this.count++;
    console.log("Count:", this.count);
  }
}

const counter = new Counter();

Une fonction en paramètre d'une autre fonction

const someFunction = (callback) => {
  console.log("Dans la fonction someFunction");
  callback(); // Appel de la fonction callback
};

const callback = () => {
    console.log("Dans la fonction callback");
};

someFunction(callback); // Passer la fonction callback comme "paramètre" à someFunction

IMPORTANT

Dans le contexte de ce cours vous vous contraindrez à utiliser uniquement

• des fonctions fléchées
• des fonctions const

Exercices

Travail à faire

Copiez-collez ce code dans un fichier html, lancez un live serveur avec VSCODE et testez / débuggez à l'aide de votre navigateur.

//Exercice 1
  //Transformer ces 5 fonctions en fonctions flechées
  //Réaliser les 5 appels correspondants


  function afficherMessage() {
      console.log("Bonjour, monde !");
  }

  afficherMessage();


  function addition(a, b) {
      return a + b;
  }
  console.log(addition(3,2));


  function determinerPairOuImpair(nombre) {
      if (nombre % 2 === 0) {
          return "pair";
      } else {
          return "impair";
      }
  } 
  console.log(determinerPairOuImpair(4));

  function calculerTempsExecutionFonction(fTest) {
      
      let debut = Date.now();            

      fTest();

      let fin = Date.now();
      console.log(`Durée écoulée : ${String(fin - debut)} millisecondes`);            
  }

  const fTest = () => {for (let i=0;i<900000;i++){}};  

  calculerTempsExecutionFonction (fTest);

  function multiplierEtAjouter(a, b, c) {
      const produit = a * b;
      const somme = produit + c;
      return somme;
  }

  console.log(multiplierEtAjouter(2,10,3));

//Exercice 2
  // Ce code  est supposé calculer le nombre de d'entiers pairs dans un tableau.
  //il est est buggé. 
  //décommentez-le et corrigez-le.

    /*const compterNombresPairs () {
        let count = 0;
        tableau.forEach(nombre {
                if (nombre % 2 == 0) {
                count+;
      
      else return b;
          }
      };
*/

    
    // Exemple d'utilisation
    /*
    const nombres = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const nombreDeNombresPairs = compterNombresPairs(nombres);
    console.log("Nombre de nombres pairs : " + nombreDeNombresPairs);
    */

//Exercice 3
    //Ecrire avec une boucle for ... of, une fonction flechée 
    //qui vérifie si un tableau est trié par ordre croissant
    
    
    // Exemple d'utilisation
    const tableau1 = [1, 2, 3, 4, 5];
    console.log("Le tableau est trié : " + estTableauTrie(tableau1));

    const tableau2 = [5, 3, 8, 1, 9];
    console.log("Le tableau est trié : " + estTableauTrie(tableau2));