Fonctions en JavaScript

Cet article explique les fonctions en JavaScript.

YouTube Video

Fonctions en JavaScript

Les fonctions en JavaScript sont des blocs de code réutilisables utilisés pour effectuer des tâches spécifiques. Utiliser des fonctions améliore la lisibilité du code et facilite la maintenance. Les fonctions peuvent être définies de plusieurs façons et manipulées de manière flexible à l'aide d'arguments et de valeurs de retour.

Façons de définir des fonctions

Déclaration de fonction

Les fonctions peuvent être définies en utilisant le mot clé function. Les déclarations de fonctions sont remontées (hoisting) avant l'exécution du code, elles peuvent donc être appelées avant d'être définies.

1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4    return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice

Dans cet exemple, comme la fonction greet est appelée avant sa déclaration, Hello, Everyone et Hello, Alice sont affichés.

Expression de fonction

Les fonctions peuvent également être définies en les assignant à une variable. Dans ce cas, la fonction n'est pas remontée (hoisting) et ne peut être appelée qu'après avoir été définie.

1const greet = function(name) {
2    return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob

Dans cet exemple, Hello, Bob sera affiché.

Fonction fléchée

Les fonctions fléchées sont une manière de définir des fonctions avec une syntaxe plus courte. Elles sont particulièrement utiles lors de l'utilisation de fonctions anonymes (fonctions sans nom). Les fonctions fléchées ont également un comportement différent en ce qui concerne le mot-clé this.

 1const greet = (name) => {
 2    return "Hello, " + name;
 3};
 4
 5// When it can be expressed in a single line,
 6// `return` and curly braces can be omitted
 7const greetShort = name => "Hello, " + name;
 8
 9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave

Les fonctions peuvent être déclarées comme greet et greetShort dans cet exemple. Si la fonction tient sur une seule ligne, vous pouvez omettre les {} (accolades) comme dans greetShort.

Éléments d'une fonction

Arguments

Les valeurs passées à une fonction sont appelées arguments. En spécifiant des arguments lors de la définition d'une fonction, vous pouvez passer des valeurs lors de l'appel à la fonction.

1function add(a, b) {
2    return a + b;
3}
4
5console.log(add(2, 3)); // 5

Arguments par Défaut

Vous pouvez spécifier une valeur par défaut si aucune valeur n'est transmise aux arguments.

1function greet(name = "Guest") {
2    return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice

Dans cet exemple, si greet() est appelé, la valeur par défaut Guest est utilisée.

Valeur de Retour

Vous pouvez retourner une valeur de retour à partir d'une fonction en utilisant l'instruction return. S'il n'y a pas d'instruction return, la fonction retourne undefined.

1function greet(name) {
2    console.log('Hello, ' + name + '!');
3}
4function square(num) {
5    return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined

Dans cet exemple, comme greet ne retourne pas de valeur, la valeur retournée est undefined.

Fonction Anonyme

Une fonction sans nom est appelée une fonction anonyme. Elles sont souvent utilisées comme expressions fonctionnelles ou fonctions fléchées.

1const double = function(num) {
2    return num * 2;
3};
4
5console.log(double(5)); // 10

Expression de Fonction Immédiatement Invoquée (IIFE)

Une Expression de Fonction Immédiatement Invoquée (IIFE) est une fonction exécutée dès qu'elle est définie. Elle est généralement utilisée pour contrôler la portée.

1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3    console.log("This is an IIFE");
4})(); // This is an IIFE

Elle est exécutée dès qu'elle est déclarée.

Fonction de Rappel

Transmettre une fonction en tant qu'argument à une autre fonction, pour une exécution ultérieure, est appelée une fonction de rappel. Elle est fréquemment utilisée dans le traitement asynchrone et la gestion des événements.

1function processData(callback) {
2    let data = "Processed Data";
3    callback(data);
4}
5
6processData(function(result) {
7    console.log(result); // Processed Data
8});

Dans cet exemple, une fonction qui envoie une valeur à la console est transmise en tant que fonction de rappel.

Fonction Récursive

Appeler une fonction elle-même est appelé récursion, et une fonction qui effectue un traitement répétitif de cette manière est appelée une fonction récursive. Par exemple, une fonction pour calculer une factorielle peut être implémentée en utilisant la récursion comme suit.

 1function factorial(n) {
 2    if (n === 0) {
 3        return 1;
 4    } else {
 5        return n * factorial(n - 1);
 6    }
 7}
 8
 9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)

Dans cet exemple, la factorielle de 5, qui est 120, sera affichée.

Mot-clé this

Le this utilisé à l'intérieur d'une fonction indique à quel objet la fonction fait référence. Dans une fonction classique, il fait référence à l'objet appelant, mais dans les fonctions fléchées, il conserve le this de la portée dans laquelle il a été défini.

 1const obj = {
 2    name: "Alice",
 3    greet: function() {
 4        console.log(this.name); // Refers to "Alice"
 5    }
 6};
 7
 8obj.greet(); // Alice
 9
10const obj2 = {
11    name: "Bob",
12    greet: () => {
13        // Arrow function refers to the outer scope (undefined here)
14        console.log(this.name);
15    }
16};
17
18obj2.greet(); // undefined

Le greet de la variable obj est déclaré en utilisant le mot-clé function. Par conséquent, le mot-clé this fait référence à l’objet de la variable obj. D’autre part, le greet de la variable obj2 est déclaré en utilisant une fonction fléchée. Par conséquent, le mot-clé this fait référence à l’objet du contexte externe et est undefined dans cet exemple.

Portée des fonctions et fermetures (closures)

Les variables définies à l’intérieur d’une fonction ne peuvent pas être accessibles depuis l’extérieur de celle-ci. Cela s’appelle la portée de fonction. Il existe également une fonctionnalité appelée fermeture (closure) qui conserve le contexte au moment où la fonction est définie.

 1function outer() {
 2    let outerVar = "I am outer!";
 3
 4    function inner() {
 5        console.log(outerVar); // Can access outerVar
 6    }
 7
 8    return inner;
 9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!

Dans cet exemple, la fonction inner peut accéder à la variable outerVar car elle conserve le contexte dans lequel elle a été définie.

Résumé

• Il existe plusieurs façons de définir des fonctions, notamment les déclarations de fonctions, les expressions de fonctions, et les fonctions fléchées.
• Les fonctions peuvent prendre des arguments et renvoyer des valeurs.
• Il existe des utilisations spéciales telles que les fonctions de rappel (callback) et les fonctions récursives.
• Il faut faire attention à la gestion de this, car les fonctions fléchées et les fonctions normales se comportent différemment.
• Les fermetures (closures) peuvent être utilisées pour accéder à des variables internes depuis l’extérieur du contexte.

Les fonctions sont l’un des concepts importants en JavaScript, mettant à profit sa structure flexible.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video