Comment définir des fonctions en JavaScript

introduction

Une * fonction * est un bloc de code qui exécute une action ou renvoie une valeur. Les fonctions sont des codes personnalisés définis par les programmeurs et réutilisables. Elles peuvent donc rendre vos programmes plus modulaires et plus efficaces.

Dans ce tutoriel, nous allons apprendre plusieurs manières de définir une fonction, d’appeler une fonction et d’utiliser des paramètres de fonction en JavaScript.

Définir une fonction

Les fonctions sont définies ou déclarées avec le mot-clé + function +. Vous trouverez ci-dessous la syntaxe d’une fonction en JavaScript.

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

La déclaration commence par le mot-clé + function +, suivi du 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 tirets bas et des signes dollar, et sont fréquemment écrits dans https://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure- # identifiants en javascript [cas du chameau]. Le nom est suivi d’un ensemble de parenthèses pouvant être utilisées pour des paramètres facultatifs. Le code de la fonction est placé entre accolades, tout comme une déclaration for ou https: / /www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[if statement].

Dans notre premier exemple, nous allons faire une * déclaration de fonction * pour imprimer une déclaration de bienvenue sur la console.

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

Nous avons ici le code pour imprimer + Hello, World! + Sur la console contenue dans la fonction + greet () +. Cependant, rien ne se passera et aucun code ne sera exécuté 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 function
greet();

Maintenant, nous allons les mettre ensemble, en définissant notre fonction et en l’invoquant.

saluer.js

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

// Invoke the function
greet();

Avec l’appel de + greet (); +, la fonction sera exécutée et nous recevrons le + Hello, World! + En tant que sortie du programme.

OutputHello, World!

Nous avons maintenant notre code + greet () + contenu dans une fonction et nous pouvons le réutiliser autant de fois que nous le voulons.

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

Paramètres de fonction

Dans notre fichier + greet.js, nous avons créé une fonction de base qui affiche` + Hello, World` sur la console. En utilisant des 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 transmises aux fonctions sous forme de noms et se comportent comme des variables locales.

Lorsqu’un utilisateur se connecte à une application, nous pouvons souhaiter que le programme les salue par leur nom, au lieu de simplement dire «Hello, World!».

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

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

Le nom de la fonction est + greet +, et nous avons maintenant un seul paramètre entre les parenthèses. Le nom du paramètre suit les mêmes règles que pour nommer une variable. À l’intérieur de la fonction, au lieu d’une chaîne statique composée de «+ Hello, World +», nous avons un https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript# variables-in-strings-with-template-literals [template literal] chaîne contenant notre paramètre, qui se comporte désormais comme une variable locale.

Vous remarquerez que nous n’avons défini notre paramètre + name + nulle part. Nous lui attribuons une valeur lorsque nous appelons notre fonction. En supposant que notre utilisateur s’appelle Sammy, nous allons appeler la fonction et placer le nom d’utilisateur sous le nom * argument *. L’argument est la valeur réelle transmise à la fonction. Dans ce cas, il s’agit de la chaîne " Sammy ".

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

La valeur " Sammy " est transmise à la fonction via le paramètre + nom +. Maintenant, chaque fois que + nom + est utilisé dans la fonction, cela représente la valeur " Sammy ". Voici le code entier.

greetSammy.js

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

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

Lorsque nous exécutons le programme ci-dessus, nous recevons le résultat suivant.

OutputHello, Sammy!

Nous avons maintenant un exemple de la façon dont une fonction peut être réutilisée. Dans un exemple concret, la fonction extraira 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, les variables peuvent être déclarées à l’intérieur des fonctions. Ces variables sont appelées * variables locales * et n’existent que dans le scope de leur propre bloc fonction. 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 de l’extérieur, mais peuvent être utilisées autant de fois que leur fonction est utilisée dans un programme.

Valeurs de retour

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

sum.js

// Initialize add function
function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
add(9, 7);

Dans le programme ci-dessus, nous avons défini une fonction avec les paramètres + x + et + y +, puis nous avons passé les valeurs de '+ 9 + et' + 7 + à la fonction. Lorsque nous exécutons le programme, nous recevons la somme de ces chiffres en sortie.

Output16

Dans ce cas, avec + 9 + et '+ 7 + passés à la fonction + sum () + , le programme a renvoyé + 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 à l’endroit où la fonction a été appelée. Cette valeur peut être utilisée immédiatement ou placée dans une variable.

Expressions de fonctions

Dans la dernière section, nous avons utilisé une déclaration de fonction pour obtenir la somme de deux nombres et renvoyer cette valeur. Nous pouvons également créer un * https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function [expression de fonction] * en affectant une fonction à une variable.

En utilisant notre même exemple de fonction + add +, nous pouvons directement appliquer la valeur renvoyée à une variable, dans ce cas + sum +.

functionExpression.js

// Assign add function to sum constant
const sum = function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(20, 5);

Output25

Maintenant, la constante + somme + est une fonction. Nous pouvons rendre cette expression plus concise en la transformant en une * fonction anonyme *, qui est une fonction non nommée. Actuellement, notre fonction porte 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.

anonymousExpression.js

// Assign function to sum constant
const sum = function(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(100, 3);

Output103

Dans cet exemple, nous avons supprimé le nom de la fonction, qui était + add +, et l’avons 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.

Fonctions de flèche

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 permettant de définir une fonction appelée * expressions de fonction de flèche * à partir de ECMAScript 6. Les fonctions fléchées, comme elles sont communément connues, sont représentées par un signe égal suivi d’un signe supérieur à: + ⇒ +.

Les fonctions de flèche 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.

arrow Function.js

// Define multiply function
const multiply = (x, y) => {
   return x * y;
}

// Invoke function to find product
multiply(30, 4);

Output120

Au lieu d’écrire le mot-clé + function, nous utilisons la flèche` + ⇒ + `pour indiquer une fonction. Sinon, cela fonctionne de la même manière qu’une expression de fonction régulière, avec quelques différences avancées que vous pouvez lire sous Arrow Fonctions sur le réseau de développeurs Mozilla.

Dans le cas d’un seul paramètre, les parenthèses peuvent être exclues. Dans cet exemple, nous quadrillons + x +, ce qui nécessite qu’un seul nombre soit transmis en tant qu’argument. Les parenthèses ont été omises.

// Define square function
const square = x => {
   return x * x;
}

// Invoke function to find product
square(8);

Output64

Avec ces exemples particuliers qui consistent uniquement en une instruction + return +, les fonctions de flèche permettent de réduire encore la syntaxe. Si la fonction ne comporte qu’une seule ligne + return +, les accolades et l’instruction + return + peuvent être omis, comme illustré dans l’exemple ci-dessous.

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);

Output100

Ces trois types de syntaxe donnent le même résultat. C’est généralement une question de préférence ou de normes de codage de l’entreprise qui décide de la structure de vos propres fonctions.

Conclusion

Dans ce tutoriel, nous avons abordé les déclarations de fonction et les expressions de fonction, renvoyer des valeurs à partir de fonctions, attribuer des valeurs de fonction à des variables et des fonctions de flèche ES6.

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

TOC