Fonctions JavaScript

Fonctions JavaScript

Une fonction JavaScript est un bloc de code réutilisable conçu pour effectuer une tâche spécifique. Les fonctions sont exécutées lorsque “quelque chose” les invoque (les appelle).

Les fonctions sont un bloc de construction fondamental en JavaScript, permettant la modularité, la réutilisabilité et l’abstraction.

Syntaxe des fonctions JavaScript

Il existe plusieurs façons de définir des fonctions en JavaScript :

1. Déclaration de fonction (ou instruction de fonction) :

Définie avec le mot-clé function, suivi d’un nom, d’une liste de paramètres entre parenthèses (), et d’un bloc de code entre accolades {}.

function greet(name) {
  return `Hello, ${name}!`;
}
// Les déclarations de fonction sont 'hoistées', ce qui signifie qu'elles peuvent être appelées avant d'être définies dans le code.

2. Expression de fonction :

Une fonction peut également être définie comme faisant partie d’une expression, généralement en l’affectant à une variable. La fonction peut être nommée ou anonyme.

// Expression de fonction anonyme
const add = function(a, b) {
  return a + b;
};

// Expression de fonction nommée (le nom 'multiply' est principalement pour le débogage/la récursion au sein de la fonction)
const multiply = function multiply(x, y) {
  return x * y;
};
// Les expressions de fonction ne sont pas 'hoistées' de la même manière que les déclarations.
// Vous devez les définir avant de pouvoir les appeler.

3. Fonctions fléchées (ES6+) :

ES6 a introduit une syntaxe plus concise pour écrire des fonctions, connue sous le nom de fonctions fléchées (arrow functions).

const subtract = (a, b) => {
  return a - b;
};

// Si la fonction n'a qu'une seule instruction et renvoie une valeur, vous pouvez omettre les accolades et le 'return'
const square = x => x * x;

// S'il n'y a pas de paramètres, utilisez des parenthèses vides
const sayHi = () => console.log("Hi!");

// Les fonctions fléchées ont des différences clés par rapport aux fonctions traditionnelles,
// notamment leur gestion du mot-clé 'this' et de l'objet 'arguments' (elles n'ont pas les leurs).

Paramètres et arguments de fonction :

• Les paramètres sont les noms listés dans la définition de la fonction (par exemple, name dans greet(name)).
• Les arguments sont les valeurs réelles passées à la fonction lorsqu’elle est invoquée (par exemple, greet("Alice"), “Alice” est l’argument).

À l’intérieur de la fonction, les paramètres se comportent comme des variables locales.

Invocation de fonction (Appeler une fonction)

Le code à l’intérieur d’une fonction s’exécute lorsque la fonction est invoquée. Cela se produit généralement en utilisant le nom de la fonction suivi de parenthèses () contenant les arguments éventuels.

console.log(greet("Bob")); // Invoque la fonction greet, sortie : "Hello, Bob!"
console.log(add(5, 3));    // Invoque la fonction add, sortie : 8
square(4);                 // Invoque square, renvoie 16

Les fonctions peuvent être invoquées dans divers contextes :

• Directement dans le code.
• Lorsqu’un événement se produit (par exemple, un utilisateur clique sur un bouton).
• Automatiquement (fonctions auto-invoquées).
• Comme méthodes d’objets.

L’instruction return d’une fonction

Lorsque JavaScript atteint une instruction return, la fonction arrête son exécution.

La valeur spécifiée après return est “retournée” à l’appelant. Si return est utilisé sans valeur, ou si la fin de la fonction est atteinte sans instruction return, la fonction retourne implicitement undefined.

function calculateArea(width, height) {
  if (width <= 0 || height <= 0) {
    console.error("Width and height must be positive.");
    return; // Retourne implicitement undefined
  }
  return width * height; // Retourne la surface calculée
}

let area1 = calculateArea(10, 5); // area1 sera 50
let area2 = calculateArea(-2, 5); // area2 sera undefined, erreur enregistrée

Pourquoi utiliser des fonctions ?

• Réutilisabilité du code : Définir le code une fois et l’utiliser plusieurs fois.
• Modularité : Décomposer les problèmes complexes en morceaux plus petits et gérables.
• Abstraction : Masquer les détails d’implémentation complexes et fournir une interface simple.
• Organisation : Rendre le code plus facile à lire, à comprendre et à maintenir.

Exemple : Conversion de Fahrenheit en Celsius.

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

let temp1 = toCelsius(32);  // 0
let temp2 = toCelsius(212); // 100
// document.getElementById("demo").innerHTML = `32°F correspond à ${temp1}°C`;

L’opérateur () invoque la fonction

Accéder à un nom de fonction sans () fait référence à l’objet fonction lui-même. L’ajout de () l’invoque.

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

// Référence à l'objet fonction
// const converter = toCelsius;
// document.getElementById("output1").innerHTML = converter;
// La sortie afficherait la représentation textuelle de la fonction, par exemple, "function toCelsius(fahrenheit) { ... }"

// Invoquer la fonction
// const tempInCelsius = toCelsius(68);
// document.getElementById("output2innerHTML = tempInCelsius;
// La sortie serait le résultat, par exemple, 20

Les fonctions comme citoyens de première classe

En JavaScript, les fonctions sont des “citoyens de première classe”. Cela signifie qu’elles peuvent être traitées comme n’importe quelle autre valeur :

• Assignées à des variables (comme montré avec les expressions de fonction).
• Passées en tant qu’arguments à d’autres fonctions (fonctions de rappel/callbacks).
• Retournées comme valeurs par d’autres fonctions (fonctions d’ordre supérieur).

Cette flexibilité est une caractéristique puissante de JavaScript.

function applyOperation(a, b, operation) {
  return operation(a, b);
}

const sumResult = applyOperation(5, 2, add); // la fonction 'add' passée en argument
console.log(sumResult); // Sortie : 7

const productResult = applyOperation(5, 2, (x, y) => x * y); // Fonction fléchée passée
console.log(productResult); // Sortie : 10

Les Closures (Fermetures)

Une closure (fermeture) est une fonction qui a accès à la portée de sa fonction externe (englobante), même après que la fonction externe a terminé son exécution. Cela signifie qu’une closure peut “se souvenir” et accéder aux variables et arguments de sa fonction externe.

function createGreeter(greeting) {
  return function(name) { // Cette fonction interne est une closure
    console.log(`${greeting}, ${name}!`);
  };
}

const greetHello = createGreeter("Hello");
const greetHi = createGreeter("Hi");

greetHello("Alice"); // Sortie : Hello, Alice!
greetHi("Bob");    // Sortie : Hi, Bob!

Les closures sont un concept puissant utilisé pour la confidentialité des données, la création de fonctions usines, et dans de nombreux modèles JavaScript avancés. (Plus de détails dans une section dédiée aux closures).