Les fonctions en JavaScript

📋 Au programme :
Une fonction en JavaScript est un bloc de code conçu pour effectuer une tâche spécifique. Elle permet de réutiliser du code et de rendre celui-ci plus propre, organisé et maintenable. En JavaScript, il existe plusieurs façons de déclarer et d’appeler des fonctions.
Syntaxe de base d'une fonction
Pour déclarer une fonction, on utilise le mot-clé function, suivi du nom de la fonction, des parenthèses pour les paramètres, et d’accolades pour définir le corps de la fonction.
function nomDeLaFonction(param1, param2) {
// Logique à exécuter
return resultat;
}
Voici un exemple de fonction qui additionne deux nombres . Dans cet exemple, la fonction addition prend deux paramètres a et b, effectue l’addition, puis renvoie le résultat.
function addition(a, b) {
return a + b;
}
console.log(addition(2, 3)); // Affiche 5
Paramètres et arguments d’une fonction
- Les paramètres sont les valeurs d’entrée que la fonction utilise pour effectuer ses opérations. Vous pouvez déclarer plusieurs paramètres en les séparant par des virgules.
- Les arguments sont les valeurs réelles que vous passez à une fonction lorsque vous l’appelez. Ils correspondent aux paramètres déclarés.
function direBonjour(nom) {
return 'Bonjour ' + nom;
}
console.log(direBonjour('Alice')); // Affiche 'Bonjour Alice'
Ici, nom est le paramètre et ‘Alice’ est l’argument passé à la fonction.
Valeur de retour
Une fonction peut renvoyer une valeur à l’aide du mot-clé return. Le return met également fin à l’exécution de la fonction. Si une fonction ne retourne rien explicitement, elle renverra undefined par défaut. Dans cet exemple, resultat récupère la valeur renvoyée par la fonction multiplier.
function multiplier(x, y) {
return x * y;
}
let resultat = multiplier(4, 5); // resultat vaut 20
Fonctions anonymes
Une fonction anonyme est une fonction qui n’a pas de nom. On peut les utiliser pour affecter des fonctions à des variables ou pour passer des fonctions en tant qu’arguments. Les fonctions anonymes sont souvent utilisées comme callbacks dans des opérations asynchrones ou des événements.
let saluer = function() {
return 'Salut !';
};
console.log(saluer()); // Affiche 'Salut !'
Fonctions fléchées (Arrow Functions)
Introduites dans ES6, les fonctions fléchées permettent une syntaxe plus concise et évitent les problèmes avec le mot-clé this.
const multiplier = (a, b) => a * b;
console.log(multiplier(3, 4)); // Affiche 12
Caractéristiques des fonctions fléchées :
- Syntaxe compacte.
- Pas de liaison au mot-clé this.
- Si la fonction a un seul paramètre, les parenthèses peuvent être omises.
- Si le corps de la fonction est une seule expression, vous pouvez omettre les accolades et le mot-clé return.
La portée des variables dans les fonctions
Les variables définies dans une fonction ne sont accessibles qu’à l’intérieur de cette fonction. Il existe trois types de portée :
Portée locale : Les variables déclarées à l’intérieur d’une fonction.
Portée globale : Les variables déclarées en dehors de toutes les fonctions.
Portée de bloc : Les variables déclarées dans un bloc de code (ex. : if, for) avec let ou const.
Dans cet exemple, la variable salutation n’est accessible qu’à l’intérieur de la fonction direBonjour.
let nom = 'Alice'; // Portée globale
function direBonjour() {
let salutation = 'Bonjour'; // Portée locale
console.log(salutation + ' ' + nom);
}
direBonjour(); // Affiche 'Bonjour Alice'
console.log(salutation); // Erreur : salutation n'est pas défini
Fonction avec des valeurs par défaut
En JavaScript, vous pouvez définir des valeurs par défaut pour les paramètres d’une fonction. Si l’argument b n’est pas fourni lors de l’appel de la fonction, il prendra la valeur par défaut 1.
Fonctions imbriquées
Il est possible de définir une fonction à l’intérieur d’une autre fonction. Les fonctions imbriquées peuvent accéder aux variables de la fonction dans laquelle elles sont définies, mais ces variables ne sont pas accessibles en dehors.
function externe() {
let message = 'Bonjour depuis la fonction externe';
function interne() {
console.log(message);
}
interne();
}
externe(); // Affiche 'Bonjour depuis la fonction externe'
Fonctions d'ordre supérieur
Les fonctions d’ordre supérieur sont des fonctions qui prennent d’autres fonctions en argument ou qui renvoient des fonctions.
Ici, appliquerFonction prend une fonction et une valeur comme arguments, et applique la fonction à cette valeur.
function appliquerFonction(func, value) {
return func(value);
}
function doubler(x) {
return x * 2;
}
console.log(appliquerFonction(doubler, 5)); // Affiche 10
Closures (fermetures)
Une closure est une fonction qui se souvient de l’environnement dans lequel elle a été créée, même après que cet environnement a cessé d’exister.
Dans cet exemple, la fonction renvoyée par createCounter se souvient de la variable count, même après que la fonction createCounter a terminé son exécution.
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
let counter = createCounter();
console.log(counter()); // Affiche 1
console.log(counter()); // Affiche 2