Comment Définir des Fonctions en JavaScript

Introduction

Une fonction est un bloc de code qui effectue une action ou renvoie une valeur. Les fonctions sont du code personnalisé défini par les programmeurs qui sont réutilisables, et peuvent donc rendre vos programmes plus modulaires et efficaces.

dans ce tutoriel, nous allons apprendre plusieurs façons de définir une fonction, d’appeler une fonction et d’utiliser les paramètres de fonction en JavaScript.

définition d’une fonction

Les fonctions sont définies, ou déclarées, avec le mot cléfunction. Voici la syntaxe d’une fonction en JavaScript.,

function nameOfFunction() { // Code to be executed}

La déclaration commence par la balise function mot clé, suivi par le nom de la fonction. Les noms de fonction suivent les mêmes règles que les variables — ils peuvent contenir des lettres, des chiffres, des traits de soulignement et des signes de dollar, et sont souvent écrits en cas de chameau. Le nom est suivi d’un ensemble de parenthèses, qui peuvent être utilisées pour des paramètres facultatifs. Le code de la fonction est contenu entre accolades, tout comme une instruction for ou une instruction if.,

dans notre premier exemple, nous allons faire une déclaration de fonction pour imprimer une déclaration de salutation sur la console.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Ici, nous avons le code pour imprimer Hello, World! à la console contenue à l’intérieur de la balise greet() fonction. Cependant, rien ne se passera et aucun code ne s’exécutera jusqu’à ce que nous appelions ou appelions la fonction. Vous pouvez appeler une fonction en écrivant le nom de la fonction Suivi des parenthèses.

// Invoke the functiongreet();

maintenant, nous allons les assembler, définir notre fonction et l’appeler.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

Avec l’appel à la balise greet();, la fonction, et nous allons recevoir le Hello, World! si le programme de la sortie.

Output
Hello, World!

Maintenant que nous avons notre greet() le code contenu dans une fonction, et de la réutiliser autant de fois que nous voulons.

en utilisant des paramètres, nous pouvons rendre le code plus dynamique.

paramètres de fonction

dans notre fichiergreet.js, nous avons créé une fonction de base qui imprimeHello, World sur la console., En utilisant les paramètres, nous pouvons ajouter des fonctionnalités supplémentaires qui rendront le code plus flexible. Les paramètres sont des entrées qui sont passées dans les fonctions sous forme de noms et se comportent comme des variables locales.

lorsqu’un utilisateur se connecte à une application, nous pouvons vouloir que le programme les salue par leur nom, au lieu de simplement dire: « bonjour, monde!”.

Nous allons ajouter un paramètre dans notre fonction, appelée name, pour représenter le nom de la personne accueillie.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

Le nom de la fonction est: greet, et maintenant nous avons un seul paramètre à l’intérieur des parenthèses. Le nom du paramètre suit les mêmes règles que nommer une variable. À l’intérieur de la fonction, au lieu d’une chaîne statique composée de Hello, World, nous avons une chaîne littérale de modèle contenant notre paramètre, qui se comporte maintenant comme une variable locale.

vous remarquerez que nous n’avons pas défini notre paramètrename n’importe où. Nous lui attribuons une valeur lorsque nous invoquons notre fonction., En supposant que notre utilisateur s’appelle Sammy, nous appellerons la fonction et placerons le nom d’utilisateur comme argument. L’argument est la valeur réelle qui est passée dans la fonction, dans ce cas, c’est la chaîne de caractères "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

La valeur "Sammy" est transmis à la fonction par le biais de la balise name paramètre. Maintenant, chaque fois que name est utilisé dans toute la fonction, il représentera la valeur "Sammy". Voici le code entier.

lorsque nous exécutons le programme ci-dessus, nous recevons la sortie suivante.

Output
Hello, Sammy!

Nous avons maintenant un exemple de la façon dont une fonction peut être réutilisée. Dans un exemple du monde réel, la fonction extrairait le nom d’utilisateur d’une base de données au lieu de fournir directement le nom en tant que valeur d’argument.

En plus des paramètres, des variables peuvent être déclarées à l’intérieur des fonctions. Ces variables sont connues sous le nom de variables locales et n’existeront qu’à l’intérieur de la portée de leur propre bloc de fonctions., La portée des variables détermine l’accessibilité des variables; les variables définies à l’intérieur d’une fonction ne sont pas accessibles depuis l’extérieur de la fonction, mais elles peuvent être utilisées autant de fois que leur fonction est utilisée dans un programme.

renvoyer des valeurs

Plusieurs paramètres peuvent être utilisés dans une fonction. Nous pouvons passer plusieurs valeurs dans une fonction et renvoyer une valeur. Nous allons créer une fonction pour trouver la somme de deux valeurs, représentée par x et y.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

Dans le programme ci-dessus, nous avons défini une fonction avec les paramètres x et y, et ensuite transmis les valeurs de 9 et 7 à la fonction. Lorsque nous exécutons le programme, nous recevons la somme de ces nombres comme sortie.

Output
16

Dans ce cas, avec des 9 et 7 passé à la balise sum() fonction, le programme retourné 16.,

lorsque le mot-cléreturn est utilisé, la fonction cesse de s’exécuter et la valeur de l’expression est renvoyée. Bien que dans ce cas, le navigateur affiche la valeur dans la console, ce n’est pas la même chose que d’utiliser console.log() pour imprimer sur la console. L’appel de la fonction affichera la valeur exactement où la fonction a été appelée. Cette valeur peut être utilisée immédiatement ou placée dans une variable.

Expressions de fonction

dans la dernière section, nous avons utilisé une déclaration de fonction pour obtenir la somme de deux nombres et retourner cette valeur., Nous pouvons également créer une expression de fonction en affectant une fonction à une variable.

en utilisant notre même exemple de fonctionadd, nous pouvons appliquer directement la valeur retournée à une variable, dans ce cassum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

Maintenant que la sum constante est une fonction. Nous pouvons rendre cette expression plus concise en la transformant en une fonction anonyme, qui est une fonction sans nom., Actuellement, notre fonction a le nom add, mais avec les expressions de fonction, il n’est pas nécessaire de nommer la fonction et le nom est généralement omis.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

Dans cet exemple, nous avons supprimé le nom de la fonction, qui était add, et l’a transformé en une fonction anonyme. Une expression de fonction nommée peut être utilisée pour faciliter le débogage, mais elle est généralement omise.,

Arrow Functions

Jusqu’à présent, nous avons expliqué comment définir des fonctions à l’aide du mot-cléfunction. Cependant, il existe une méthode plus récente et plus concise pour définir une fonction connue sous le nom d’expressions de fonction de flèche à partir D’ECMAScript 6. Les fonctions Arrow, telles qu’elles sont communément appelées, sont représentées par un signe égal suivi d’un signe supérieur à: =>.

Les fonctions Arrow sont toujours des fonctions anonymes et un type d’expression de fonction. Nous pouvons créer un exemple de base pour trouver le produit de deux nombres.

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

au Lieu d’écrire le mot-clé function, nous utilisons la balise => flèche pour indiquer une fonction. Sinon, il fonctionne de manière similaire à une expression de fonction régulière, avec quelques différences avancées que vous pouvez lire sous Fonctions Arrow sur le Mozilla Developer Network.

Dans le cas d’un seul paramètre, les parenthèses peuvent être exclus. Dans cet exemple, nous mettons au carré x, qui ne nécessite qu’un seul nombre pour être passé en argument., Les parenthèses ont été omises.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Note: Dans le cas d’absence de paramètres, un ensemble vide de parenthèses () est requis dans la flèche fonctions.

avec ces exemples particuliers qui ne consistent qu’en une instructionreturn, les fonctions arrow permettent de réduire encore la syntaxe. Si la fonction n’est qu’une seule ligne return, les accolades et l’instruction return peuvent être omises, comme on le voit dans l’exemple ci-dessous.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Tous les trois de ces types de syntaxe produit le même résultat. C’est généralement une question de préférence ou de normes de codage d’entreprise pour décider comment vous allez structurer vos propres fonctions.

Conclusion

dans ce tutoriel, nous avons couvert les déclarations de fonction et les expressions de fonction, le retour de valeurs de fonctions, l’attribution de valeurs de fonction à des variables et les fonctions de flèche ES6.

Les fonctions sont des blocs de code qui renvoient une valeur ou effectuent une action, rendant les programmes évolutifs et modulaires.