5-Présentation des fonctions JavaScript
Dans cette nouvelle section, nous allons étudier une autre structure de base incontournable du JavaScript : les fonctions. Pour le moment, nous allons nous contenter de définir ce qu’est une fonction et apprendre à créer et à utiliser des fonctions simples.
1- Présentation des fonctions JavaScript prédéfinies
Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est d’effectuer une tâche précise. En JavaScript, comme dans la plupart des langages les supportant, nous allons très souvent utiliser des fonctions car celles-ci possèdent de nombreux atouts que l’on va énumérer par la suite.
Le langage JavaScript dispose de nombreuses fonctions que nous pouvons utiliser pour effectuer différentes tâches. Les fonctions définies dans le langage sont appelées fonctions prédéfinies ou fonctions prêtes à l’emploi car il nous suffit de les appeler pour nous en servir.
Pour être tout à fait précis, les fonctions prédéfinies en JavaScript sont des méthodes. Une méthode est tout simplement le nom donné à une fonction définie au sein d’un objet. Pour le moment, nous allons considérer que ce sont simplement des fonctions.
Par exemple, le JavaScript dispose d’une fonction nommée random() (qui appartient à l’objet Math que nous étudierons plus tard) et qui va générer un nombre décimal aléatoire entre 0 et 1 ou encore d’une fonction replace() (qui appartient cette fois-ci à l’objet String) qui va nous permettre de chercher et de remplacer une expression par une autres dans une chaine de caractères.
L’intérêt principal des fonctions prédéfinies est de nous permettre de réaliser des opérations complexes de manière très simple : en les appelant, tout simplement. En effet, vous devez bien comprendre que derrière ces noms de fonctions se cachent des codes parfois longs et complexes qui vont être exécutés lorsqu’on appelle la fonction et qui vont permettre de réaliser une opération précise (générer un nombre aléatoire, etc.).
En plus de cela, le code d’une fonction est réutilisable : cela veut dire qu’on va pouvoir appeler une même fonction autant de fois qu’on le souhaite afin qu’elle accomplisse plusieurs fois la même opération.
Pour exécuter le code caché derrière la fonction, il suffit de l’appeler ou de « l’invoquer ». Pour faire cela, on n’a qu’à écrire le nom de la fonction suivi d’un couple de parenthèses et éventuellement préciser des arguments entre les parenthèses.
Les arguments d’une fonction sont des valeurs qu’on va passer à notre fonction afin qu’elle fonctionne normalement ou pour préciser le comportement qu’elle doit adopter. Certaines fonctions ne vont pas nécessiter d’arguments, d’autres vont avoir besoin d’un argument, d’autres de deux, etc. De plus, certains arguments vont être obligatoires tandis que d’autres vont être facultatifs.
Par exemple, dans le cas de notre fonction replace(), il va falloir fournir en premier argument l’expression à rechercher et à remplacer et en second argument l’expression de remplacement pour que la fonction marche correctement.
Au cours des prochaines parties, nous allons étudier de nombreuses fonctions JavaScript prédéfinies et notamment celles qui vous seront le plus utiles lorsque vous créerez vos propres scripts en JavaScript.
2- Les fonctions personnalisées
En plus des nombreuses fonctions JavaScript prédéfinies et immédiatement utilisables, nous allons pouvoir créer nos propres fonctions en JavaScript lorsque nous voudrons effectuer une tâche très précise.
Lorsqu’on crée une fonction en JavaScript, celle-ci n’est utilisable que par les scripts qui ont accès à sa définition. Une fonction n’est pas « magiquement incluse » dans le langage.
Créer nos propres fonctions va nous permettre de gagner du temps de développement et de créer des scripts plus facilement maintenables et plus sécurisés.
En effet, imaginions que l’on crée un script complexe ou qu’on utilise du JavaScript pour créer un site qui contient de nombreuses pages. Il y a de grandes chances qu’on ait à effectuer plusieurs fois les mêmes opérations à différents endroits de notre ou de nos script(s).
Plutôt que de réécrire les mêmes blocs de codes encore et encore, on va plutôt créer des fonctions qui vont contenir nos séries d’instruction. Une fois nos fonctions définies, nous n’aurons plus qu’à les appeler là où on en a besoin.
Procéder comme cela possède de multiples avantages : gain de temps de développement mais également des scripts plus clairs et bien plus facilement maintenable puisque si on doit un jour modifier une opération, il nous suffira de modifier le code une fois dans la définition de notre fonction plutôt que de modifier tous les blocs de code dans le cas où on aurait copié-collé les mêmes blocs de codes encore et encore dans nos scripts.
Pour pouvoir utiliser une fonction personnalisée, en pratique, il faut déjà la définir. Pour définir une fonction, on va utiliser le mot clef function suivi du nom que l’on souhaite donner à notre fonction puis d’un couple de parenthèses dans lesquelles on peut éventuellement définir des paramètres (je reviendrai là-dessus plus tard) et finalement d’un couple d’accolades dans lesquelles on va placer le code de notre fonction.
Récapitulatif sur les fonctions
Voici un petit résumé des choses importantes à retenir à votre niveau sur les fonctions :
- Les fonctions sont des blocs de code nommés et réutilisables et dont le but est d’effectuer une tâche précise ;
- Il existe deux grands types de fonctions en JavaScript : les fonction natives ou prédéfinies (qui sont en fait des méthodes) qu’on n’aura qu’à appeler et les fonctions personnalisées qu’on va pouvoir créer ;
- Pour exécuter le code d’une fonction, il faut l’appeler. Pour cela, il suffit d’écrire son nom suivi d’un couple de parenthèses en passant éventuellement des arguments dans les parenthèses ;
- On crée une fonction personnalisée grâce au mot clef
function; - Si une fonction a besoin qu’on lui passe des valeurs pour fonctionner, alors on définira des paramètres lors de sa définition. Lors de son appel, on lui passera des arguments qui prendront la place des arguments.
3- Portée des variables et valeurs de retour des fonctions en JavaScript
Dans cette nouvelle leçon sur les fonctions JavaScript, nous allons étudier en détail la notion de valeur de retour d’une fonction et allons également discuter d’un concept essentiel à la bonne compréhension du JavaScript et des fonctions : la portée des variables.
La notion de portée des variables : définition
Il est indispensable de bien comprendre la notion de « portée » des variables lorsqu’on travaille avec les fonctions en JavaScript.
La « portée » d’une variable désigne l’espace du script dans laquelle elle va être accessible. En effet, toutes nos variables ne sont pas automatiquement disponibles à n’importe quel endroit dans un script et on ne va donc pas toujours pouvoir les utiliser.
En JavaScript, il n’existe que deux espaces de portée différents : l’espace global et l’espace local. Pour rester très simple, l’espace global désigne l’entièreté d’un script à l’exception de l’intérieur de nos fonctions. L’espace local désigne, à l’inverse, l’espace dans une fonction.
Ici, vous devez bien retenir la chose suivante : une variable définie dans l’espace global d’un script va être accessible à travers tout le script, même depuis une fonction. En revanche, une variable définie dans une fonction n’est accessible que dans cette même fonction et ne peut pas être manipulée depuis l’espace global du script.
Cette notion de portée est une notion qu’on retrouve dans de nombreux langages informatiques. La portée permet de « protéger » certains codes et certaines variables en les rendant inaccessibles depuis l’extérieur. Cela permet de renforcer la sécurité d’un script et sa stabilité dans le cas où on ne voudrait pas qu’un utilisateur puisse modifier la valeur d’une variable depuis l’extérieur pour des raisons de cohérence et de logique du script.
Illustration de la notion de portée des variables en JavaScript : exemple pratique
Les différences de portée entre les variables var et let en JavaScript
Dans l’exemple précédent, on n’a pu observer aucune différence de comportement entre une variable déclarée avec la syntaxe let et une variable déclarée avec var en JavaScript.
Il existe pourtant une différence de portée qu’on va pouvoir observer lors de la définition de variables locales. En effet, lorsqu’on utilise la syntaxe let pour définir une variable à l’intérieur d’une fonction en JavaScript, la variable va avoir une portée dite « de bloc » : la variable sera accessible dans le bloc dans lequel elle a été définie et dans les blocs que le bloc contient.
En revanche, en définissant une variable avec le mot clef var dans une fonction, la variable aura une portée élargie puisque cette variable sera alors accessible dans tous les blocs de la fonction. Prenons immédiatement un exemple pour bien comprendre cela :
Les valeurs de retour des fonctions
Un autre concept essentiel à bien comprendre pour maitriser les fonctions en JavaScript est celui de « valeur de retour ».
Une valeur de retour est une valeur renvoyée par une fonction une fois que celle-ci a terminé son exécution. Une valeur de retour ne doit pas être confondu avec une instruction d’affichage durant l’exécution d’une fonction, comme dans le cas d’une fonction qui possède à un moment donné dans son code un alert() par exemple.
Une valeur de retour est une valeur unique qui va être renvoyée par la fonction après son exécution et qu’on va pouvoir récupérer pour la manipuler dans notre script.
Certaines fonctions prédéfinies vont renvoyer une valeur de retour tandis que d’autres ne vont pas en renvoyer.
Il est toujours très utile de savoir si une fonction prédéfinie en JavaScript va renvoyer une valeur ou pas et quel type de valeur la fonction va renvoyer puisque cela va nous permettre de savoir quoi faire après l’exécution de la fonction et d’éventuellement recueillir la valeur de retour pour effectuer différentes opérations.
Par exemple, certaines fonctions JavaScript renvoient le booléen true si elles ont réussi à effectuer leur tâche ou false en cas d’échec. Dans ce cas, on va pouvoir utiliser une condition autour de ces fonctions pour prendre en charge et donner des instructions en cas d’échec de notre fonction.
D’autres fonctions vont renvoyer directement le résultat de leur action, comme la fonction replace() par exemple qui va renvoyer une nouvelle chaine de caractères avec les remplacements effectués.
Dans le cas de fonctions personnalisées, nous allons devoir décider si notre fonction va renvoyer une valeur ou pas.
Pour que nos fonctions renvoient une valeur, il va falloir utiliser une instruction return. Cette instruction va nous permettre de retourner le résultat de la fonction ou une valeur de notre choix qu’on va ensuite pouvoir soit manipuler immédiatement soit stocker dans une variable pour effectuer différentes opérations avec cette valeur.
Attention cependant : l’instruction return met fin à l’exécution d’une fonction, ce qui signifie que toutes les autres opérations qui suivent une instructionreturn dans une fonction seront ignorées.
Pour cette raison, on fera toujours bien attention à placer l’instruction return en fin de fonction, après que toutes les opérations aient été réalisées.
4- Fonctions anonymes, auto-invoquées et récursives en JavaScript
Dans cette nouvelle leçon, nous allons aller un peu plus loin dans notre étude des fonctions JavaScript en nous penchant sur le cas des fonctions anonymes et comment les appeler ainsi que sur les fonctions récursives.
Qu’est-ce qu’une fonction anonyme et quels sont les cas d’usage ?
Les fonctions anonymes sont, comme leur nom l’indique, des fonctions qui ne vont pas posséder de nom. En effet, lorsqu’on crée une fonction, nous ne sommes pas obligés de lui donner un nom à proprement parler.
Généralement, on utilisera les fonctions anonymes lorsqu’on n’a pas besoin d’appeler notre fonction par son nom c’est-à-dire lorsque le code de notre fonction n’est appelé qu’à un endroit dans notre script et n’est pas réutilisé.
En d’autres termes, les fonctions anonymes vont très souvent simplement nous permettre de gagner un peu de temps dans l’écriture de notre code et (bien que cela porte à débat) à le rendre plus clair en ne le polluant pas avec des noms inutiles.
TP
Fonction sans paramètre
const message = function(){
console.log('bonjour');
}
message();Fonction fléché
const message=()=>{
console.log('bonjour')
}
message()
Problème hosting
On va appeler la fonction avant de la déclaré
message()
const message = function(){
console.log('bonjour')
}
Fonction avec paramètre
// message();
const message = function(nom){
console.log("bonjour " + nom)
}
message('bentaleb')Variables local et global
const message = function(nom){
let prenom = 'mohamed'
console.log("bonjour " + nom)
}
console.log(prenom)
message('bentaleb')
Fonction avec retour
const cube = function(nombre){
return nombre * nombre * nombre ;
}
let x = cube(5)
console.log(x)