Dans le cours : L'essentiel de JavaScript

Engendrer des fonctions simples - Tutoriel JavaScript

Dans le cours : L'essentiel de JavaScript

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Engendrer des fonctions simples

“

Dans ce chapitre, je vous propose d'explorer les fonctions du JavaScript. Il s'agit de l'un des concepts les plus essentiels car dans le JavaScript moderne, on peut dire que tout ou presque est fonction. En anglais, on appelle cela le functionnal programming. Et cette façon d'aborder la programmation est de plus en plus populaire. Plus que jamais, les fonctions sont un outil essentiel de votre boîte à outils JavaScript. Vous vous doutez certainement que vos scripts vont rapidement se complexifier. Votre préoccupation principale sera alors de garder un code clair, propre et facile à maintenir. Vous aurez donc envie de séparer vos longs scripts en modules plus petits et réutilisables auxquels vous allez donner des noms. Voilà l'une des définitions d'une fonction en JavaScript, c'est-à-dire un bloc de codes auquel vous allez donner un nom et que vous pourrez ensuite appeler plusieurs fois. Allons voir comment cela se passe. Pour réaliser nos premières expériences avec des fonctions JavaScript, voici trois variables : la variable a qui est initialisée à la valeur 2 ; la variable b qui est initialisée à la valeur 3 ; et la variable result qui est ici simplement déclarée mais non encore initialisée. Cette variable result, elle reçoit sa valeur en ligne et ce serait égal à la somme de a et de b ; 2 plus 3, ça fait 5. Et donc mon console.log envoie ici le nombre 5 dans la console. Si je veux réaliser ces opérations sous la forme d'une fonction, la première chose que je vais devoir faire, c'est délimiter le bloc de codes que ma fonction devrait exécuter. Donc je vais me rendre ici devant mon result = a + b et je vais ouvrir une accolade et puis je vais refermer cette accolade un petit peu plus loin, après mon console.log. Je vais prendre le temps de réorganiser un petit peu mon code, comme ceci, de bien mettre les indents comme il faut. Et donc là, il apparaît très clairement que nos accolades délimitent un bloc de codes et que ce bloc de codes est constitué de deux lignes de codes : result = a+ b et console.log de result. Pour que ceci devienne une fonction, j'ai également besoin de donner un nom à ce bloc de codes. Pour cela, je vais me rendre ici devant l'accolade ouvrante et je vais choisir le nom de ma fonction. Je vais l'appeler par exemple addNumbers. Alors en JavaScript, des fonctions, ce ne se sont jamais que des sortes particulières de variables, autrement dit les noms des fonctions répondent aux mêmes règles que les noms des variables JavaScript et nous avons déjà parlé de ces règles de nommage plus tôt dans cette formation. Mon bloc de codes n'est pas encore tout à fait une fonction. Pour cela, je vais devoir dire au JavaScript de manière très explicite que ceci doit devenir une fonction. Et pour cela, je vais utiliser un mot-clé que je vais mettre ici devant le nom de cette fonction. C'est tout simplement le mot-clé function. C'est presque fini. Il manque encore un élément. Après le nom de ma fonction, j'ai besoin ici d'une paire d'accolades, donc des accolades qui s'ouvrent et qui se ferment, et nous reviendrons plus tard dans ce chapitre sur l'utilité de cette paire d'accolades. Voici ma première fonction JavaScript, la fonction addNumbers. Je sauvegarde mon script et regardez, je n'ai plus rien dans la console. Effectivement, pour le moment, je définis ma fonction mais je ne l'exécute pas. Pour exécuter cette fonction, je vais devoir mettre le nom de la fonction, c'est-à-dire dans ce cas-ci addNumbers. Et rappelez-vous que le JavaScript est sensible à la casse. Donc c'est Numbers avec un N majuscule suivi d'une paire de parenthèses qui s'ouvre et qui se ferme. En fait, c'est cette paire de parenthèses qui marque le fait qu'on veut exécuter cette fonction. Je sauvegarde et je récupère ici le nombre 5 dans ma console. Tout va bien, ma fonction est correctement exécutée. Alors je vous disais qu'une fonction, c'est simplement un certain type de variable en JavaScript. Donc j'ai également une autre syntaxe. Il s'agit de créer une variable comme on a l'habitude de le faire avec le mot-clé var. Cette variable, elle s'appellera addNumbers et elle sera égale à la fonction. Comme j'ai donné le nom de la fonction après le mot-clé var, bien sûr je n'ai plus besoin de répéter le nom ici, de l'autre côté du égal, après le mot-clé function. Je sauvegarde et regardez, ça fonctionne toujours de la même façon ici dans la console. Mais nous avons devant les yeux le fait qu'une fonction, c'est simplement un certain type de variable. D'ailleurs, si je fais un console.log un petit peu plus bas, console.log du typeof de addNumbers, vous allez voir dans la console qu'addNumbers, c'est une variable de type function. Donc function, c'est un type de donnée dans le JavaScript, au même titre que string, numbers ou boolean.

Table des matières