Fonctions

3.1 Déclaration des fonctions

Les fonctions sont l'un des principaux blocs de construction en JavaScript. Elles te permettent d'organiser le code, de réutiliser la logique et de créer des structures plus complexes. Voyons trois façons principales de déclarer et d'utiliser les fonctions : déclaration de fonctions, expressions de fonctions et fonctions fléchées.

Déclaration de fonction — c'est un moyen de créer une fonction nommée que tu peux appeler plus tard. Ces fonctions sont « remontées » (hoisted) en haut de leur portée, ce qui te permet de les appeler avant leur déclaration dans le code.

Syntaxe :

    
      function name (arguments) {
        // corps de la fonction
      }
    
  

Exemple d'utilisation :

    
      // Déclaration de la fonction
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Appel de la fonction
      console.log(greet('Alice')); // Affiche : Hello, Alice!
    
  

3.2 Expressions de fonctions

Les expressions de fonctions créent des fonctions anonymes (sans nom) et peuvent être assignées à une variable. Ces fonctions ne sont pas « remontées », donc tu ne peux les appeler qu'après la déclaration.

Syntaxe :

    
      const name = function (arguments) {
        // corps de la fonction
      }
    
  

Exemple d'utilisation :

    
      // Expression de fonction

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Appel de la fonction
      console.log(greet('Bob')); // Affiche : Hello, Bob!
    
  

3.3 Fonctions fléchées

Les fonctions fléchées (arrow functions) — c'est un moyen rapide de déclarer des fonctions qui conserve également le contexte this de la portée parente. Les fonctions fléchées n'ont pas leur propre this, elles sont donc particulièrement utiles dans les gestionnaires d'événements et les méthodes de tableaux.

Syntaxe :

    
      const name = (arguments) => {
        // corps de la fonction
      }
    
  

Si la fonction prend un seul paramètre, tu peux omettre les parenthèses. Si la fonction retourne une seule expression, tu peux aussi omettre les accolades et le mot-clé return.

Exemple 1 : Version complète

    
      // Fonction fléchée

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Appel de la fonction
      console.log(greet('Charlie')); // Affiche : Hello, Charlie!
    
  

Exemple 2 : Version raccourcie

    
      // Fonction fléchée avec un paramètre et une seule expression
      const greet = name => `Hello, ${name}!`;

      // Appel de la fonction
      console.log(greet('Dana')); // Affiche : Hello, Dana!
    
  

3.4 Comparaison des méthodes de déclaration de fonctions

Remontée (hoisting) :

• Déclaration de fonctions : les fonctions sont remontées, ce qui permet de les appeler avant leur déclaration
• Expressions de fonctions et Fonctions fléchées : ne sont pas remontées, tu peux les appeler seulement après la déclaration

Contexte this :

• Déclaration de fonctions et Expressions de fonctions : ont leur propre contexte this
• Fonctions fléchées : n'ont pas leur propre this, le contexte est hérité de la portée parente

Confort d'écriture :

• Fonctions fléchées : sont plus concises et souvent utilisées pour des fonctions courtes et des callbacks