Fonctions JavaScript. Partie 7 Cours de JavaScript de Débutant à Avancé en 10 articles de blog

Ceci est la partie 7 de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. À la fin de cette série, vous connaîtrez tous les éléments de base nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le septième tutoriel.

Fonctions JavaScript – table des matières :

1. Types de fonctions JavaScript
2. Fonctions pures en JavaScript

Jusqu’à présent, nous avons vu des aspects assez majeurs de JavaScript ainsi que certaines des meilleures pratiques de codage les plus courantes que nous devrions suivre. Ces pratiques dites existent pour une raison et, en les utilisant, elles nous éviteront beaucoup d’erreurs et de frustrations que nous rencontrerions autrement. L’une des meilleures pratiques que nous avons vues était de suivre le principe DRY, qui disait essentiellement : Ne vous répétez pas. Une des manières dont nous avons appliqué ce principe était d’utiliser des boucles dans notre programme, plus précisément les “boucles for” qui nous ont fait gagner beaucoup de temps et de code. Dans ce tutoriel, nous allons voir un autre élément fondamental de la programmation, appelé “fonctions”.

Types de fonctions JavaScript

Les fonctions sont extrêmement courantes en programmation, et cela inclut également JavaScript. En fait, elles sont si courantes que certains frameworks JavaScript comme React ont été construits autour de l’exploitation des fonctions JavaScript comme élément fondamental pour créer l’interface utilisateur des sites web. Et ils ont fait cela pour une bonne raison. Les fonctions JavaScript offrent une grande flexibilité, tout en fournissant un code hautement prévisible et modulaire. Cela se traduit par un code beaucoup plus clair avec moins de répétitions et beaucoup moins d’erreurs. L’une des premières choses que vous devez savoir sur les fonctions est qu’il existe deux principaux types de fonctions. Ce sont les “fonctions pures” et les “fonctions impures”. En général, nous voudrons utiliser des fonctions pures autant que possible. Les fonctions pures offrent de multiples avantages qui les rendent beaucoup plus faciles à travailler par rapport aux fonctions impures. Voyons d’abord les fonctions JavaScript pures, puis plongeons également dans les fonctions impures.

Fonctions pures en JavaScript

Les fonctions pures sont essentiellement des fonctions qui suivent certaines règles. Et parce qu’elles suivent ces règles, elles sont hautement prévisibles, plus faciles à déboguer dans un système plus large, modulaires avec quelques autres avantages.

Une fonction pure reçoit une certaine entrée et renvoie une certaine sortie. Elle ne modifie pas les entrées directement et n’interagit pas avec l’environnement d’une autre manière. Cela dit, elle ne vous envoie pas d’alertes, ne vous donne pas d’instructions tout en faisant autre chose, et n’interagit pas avec son environnement d’une autre manière.

De cette façon, lorsque vous travaillez avec une fonction pure, vous savez que peu importe où vous exécutez votre code ou quand vous exécutez votre code, tant que vous donnez les mêmes entrées, vous obtiendrez les mêmes sorties. Voyons cela avec quelques exemples.

// double le nombre initial
function double(num){
    return num * 2;
}

// triple le nombre initial
function triple(num){
    return num * 3;
}

// ajoute 100 au nombre initial
function add100(num){
    return num + 100;
}

// ajoute deux nombres
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiplie deux nombres
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Toutes les fonctions JavaScript ci-dessus sont des fonctions pures. En y regardant de plus près, vous avez peut-être remarqué le schéma que nous utilisons lors de la création de fonctions pures. La première étape consiste à écrire le mot-clé “function” pour indiquer à JavaScript que nous voulons définir une fonction.

Ensuite, nous donnons un nom à la fonction, de préférence ce nom doit être court, mais suffisamment descriptif pour que quelqu’un qui arrive comprenne ce que fait la fonction. Par exemple, si nous ajoutons 100 à un nombre, nous pouvons nommer la fonction “add100”, si nous doublons un nombre, nous pouvons nommer la fonction “double”, et ainsi de suite.

Une fois que nous avons nommé la fonction de manière appropriée, l’étape suivante consiste à lui donner des entrées. Nous fournissons les entrées entre parenthèses et si nous avons plusieurs entrées, nous les séparons par une virgule. Tout comme nous l’avons fait dans la fonction “multiplyTwoNums”. (Aussi, en passant, les nombres sont couramment appelés “nums” pour faire court en programmation, donc lorsque nous nommons une fonction, nous pouvons utiliser cette connaissance commune pour avoir des noms de fonctions courts mais descriptifs.)

Les entrées que nous fournissons à la fonction sont également couramment appelées “paramètres”, lorsque nous créons les fonctions JavaScript, nous décidons combien de paramètres la fonction aura. Lorsque nous décidons d’utiliser la fonction, nous fournissons ces paramètres avec des “valeurs”. Ces valeurs que nous fournissons lors de l’utilisation de la fonction sont également couramment appelées “arguments”. Donc, lorsque nous fournissons une entrée pour la fonction, ce processus est également appelé “passer des arguments” à une fonction. Voyons quelques exemples de cela.

// d'abord, définissons la fonction qui prend un nombre 
// et le multiplie par 10
function multiplyBy10(num1){
    return num1 * 10;
}

// maintenant, appelons cette fonction
// sauvegardons le résultat dans une constante
// et affichons les résultats
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 est ici le paramètre.
// nous avons passé la valeur 3 comme argument à la fonction.
// nous avons sauvegardé les résultats de la fonction
// dans une constante appelée bigNum.
// nous avons affiché la constante appelée bigNum à l'utilisateur.

Comme vous l’avez vu dans le code ci-dessus, même lorsque nous voulons afficher quelque chose à l’utilisateur, nous gardons la fonction séparée de la fonction d’alerte. Si nous devions afficher les résultats à l’utilisateur à l’intérieur de la fonction, cela nécessiterait que la fonction interagisse avec d’autres parties de l’ordinateur et rendrait notre fonction impure. Donc, en général, nous voulons utiliser les fonctions pour leur donner des entrées et attendre une valeur de retour. Lorsque nous obtenons cette valeur de retour, nous pouvons alors l’afficher ou effectuer d’autres fonctions JavaScript avec elle selon nos besoins, mais le point est de garder séparées les préoccupations d’affichage des résultats et de calcul des résultats.

Donc, jusqu’à présent, nous avons vu que nous pouvons utiliser le mot-clé “function” pour commencer à déclarer la fonction, puis nous nommons la fonction de manière appropriée, puis nous ouvrons et fermons des parenthèses et disons à la fonction les paramètres dont elle aura besoin, puis nous ouvrons des accolades et disons à la fonction ce que nous voulons qu’elle fasse, une fois que nous arrivons à un résultat, nous retournons ce résultat avec le mot-clé “return”. Et ensuite, nous fermons les accolades. Toutes ces étapes étaient nécessaires pour définir une fonction pure. Maintenant que nous avons une fonction, nous pouvons utiliser une fonction dans d’autres parties de notre programme. Utiliser une fonction est couramment appelé “appeler une fonction”.

Appeler une fonction est beaucoup plus simple que de déclarer la fonction. Pour appeler une fonction, nous pouvons utiliser son nom, ouvrir des parenthèses, lui passer quelques arguments et fermer les parenthèses. Lorsque nous faisons cela, la fonction nous renverra la valeur de retour que nous avons définie. Selon ce que nous voulons faire avec cette valeur de retour, nous pouvons l’assigner à une variable ou une constante, nous pouvons effectuer encore plus de calculs avec, nous pouvons l’envoyer à d’autres ordinateurs, ou nous pouvons également afficher directement les résultats. Voyons quelques exemples de cela.

// commençons par une fonction qui prend deux arguments
// les multiplie et renvoie le résultat.
// nous pouvons soit retourner directement le résultat,
// soit nous pouvons temporairement créer une constante 
// et retourner cette constante également.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// les deux fonctions ci-dessus nous donneront exactement le même résultat
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// nous pouvons vérifier l'égalité des résultats des fonctions 
// avec une autre fonction
function checkEquality(number1, number2){
    return number1 === number2;
// si les résultats des deux fonctions sont les mêmes,
// la fonction checkEquality renverra "true" 
// en tant que type de données booléen
const isEqual = checkEquality(result1, result2);
// maintenant nous pouvons utiliser cette valeur booléenne pour afficher un message
if (isEqual){
    alert("Les deux donnent le même résultat !");
} else {
   alert("Ce ne sont pas la même chose !");
}

Exécuter le code ci-dessus dans Chrome Snippets nous donnerait le résultat suivant :

Jusqu’à présent, nous avons travaillé avec des fonctions pures, et c’est généralement ce que nous visons à coder la plupart du temps. Mais cela ne signifie pas que vous ne travaillerez qu’avec des fonctions pures. Une fois que vous avez compris les fonctions pures, les fonctions impures sont relativement plus faciles. Lorsque nous définissons une fonction, ou déclarons une fonction, après avoir utilisé le nom de la fonction, nous n’avons en fait pas besoin de lui passer de paramètres. Dans ce cas, nous laisserons les parenthèses vides, nous n’avons également pas besoin de retourner quelque chose de la fonction.

Encore plus, puisque nous pouvons écrire n’importe quel code à l’intérieur des accolades d’une fonction, nous pouvons interagir avec le monde extérieur, envoyer et recevoir des données, modifier des données existantes, afficher des alertes, et ainsi de suite. Faire tout cela n’est pas interdit, et ajouter des instructions console.log pendant le processus de développement de code peut être vraiment utile. C’est pourquoi nous ne restons pas directement éloignés des fonctions impures, mais comme elles peuvent causer beaucoup de friction et d’erreurs dans le code, y compris rendre votre code plus difficile à tester, nous viserons à séparer les tâches en fonctions JavaScript pures autant que possible. Même lorsque nous utilisons pour rendre nos fonctions impures en ajoutant des alertes ou des instructions console.log, nous voulons généralement les supprimer de notre code soit en les supprimant, soit en les commentant.

Voyons quelques exemples de cela.

// saluer l'utilisateur avec une fonction impure
// elle ne prend aucun argument et ne renvoie rien
// elle interagit également avec le monde extérieur en 
// affichant une alerte
function greet(){
    alert("Bonjour Utilisateur !");
}
// notez que les résultats ne s'afficheront pas 
// à moins que nous appelions la fonction
greet();
// faire quelques calculs et les consigner dans la console
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// cela affichera le résultat dans la console JavaScript que nous avons ci-dessous
// La console que nous venons d'utiliser est très utilisée en programmation
// y compris en JavaScript.
// les instructions console.log peuvent être vraiment utiles 
// pour vous dire ce qui se passe à l'intérieur de votre programme
// de cette façon, si quelque chose d'inattendu se produit 
// vous pouvez voir exactement où et quand cela se produit
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("Le premier nombre est " + num1);
    console.log("Le deuxième nombre est " + num2);
    const result = num1 * num2;
    console.log("La multiplication résultante est " + result);
}

// appelons la fonction ci-dessus avec deux nombres que nous choisissons
// et vérifions notre console JavaScript pour les journaux de la console
multiplyTwoNums(5, 7);

Exécuter le code ci-dessus donnerait le résultat suivant :

Comme vous pouvez le voir dans la sortie, nous avons l’instruction d’alerte affichée à l’intérieur de la première fonction que nous exécutons. Nous avons le nombre résultant de 49 enregistré dans la console JavaScript. Juste après cela, nous avons une sortie plus détaillée dans la console concernant la troisième fonction. Faire des instructions console.log est assez courant en programmation, selon le langage de programmation que vous utilisez, le nom exact peut changer, mais l’idée reste la même. Avec les instructions console.log, nous pouvons jeter un coup d’œil à l’intérieur de notre programme et mieux comprendre notre code. C’est particulièrement un outil utile lorsque quelque chose ne va pas dans votre programme et que vous essayez de comprendre où exactement vous avez fait une erreur.

Dans le prochain tutoriel, nous verrons un autre sujet important en JavaScript appelé objets. Avant de passer au prochain tutoriel, il est bon de revoir cette partie une fois de plus pour que les concepts s’ancrent. Je recommande également fortement de taper les exemples sur lesquels nous avons travaillé et de les expérimenter de première main. Lorsque vous êtes prêt, nous continuerons avec les objets en JavaScript dans le prochain tutoriel.