Fonctions JavaScript. Partie 7 Cours JavaScript de débutant à avancé en 10 articles de blog

Fonctions JavaScript – table des matières :

1. Fonctions JavaScript – informations de base
2. Fonctions pures

Jusqu'à présent, nous avons vu des aspects assez importants de JavaScript ainsi que certaines des meilleures pratiques de codage les plus courantes que nous devrions suivre. Ces soi-disant pratiques sont là pour une raison et comme nous les utilisons, elles nous éviteront beaucoup d'erreurs et de frustrations auxquelles nous serions confrontés autrement. L'une des meilleures pratiques que nous avons vues consistait à suivre le principe DRY, qui disait essentiellement : ne vous répétez pas. L'une des façons dont nous avons appliqué ce principe était d'utiliser des boucles dans notre programme, plus précisément des « boucles for », ce qui nous a permis d'économiser beaucoup de temps et de code. Dans ce didacticiel, nous verrons un autre élément majeur de la programmation, appelé «fonctions».

Fonctions JavaScript – informations de base

Les fonctions sont extrêmement courantes dans la programmation, et cela inclut également JavaScript. En fait, ils sont si courants que certains frameworks JavaScript tels que React ont été construits autour de l'exploitation des fonctions JavaScript comme élément de base fondamental pour la création du front-end des sites Web. Et ils l'ont fait pour une bonne raison. Les fonctions JavaScript offrent une grande flexibilité, tout en fournissant un code hautement prévisible et modulaire. Et 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. Il s'agit des « fonctions pures » et des « fonctions impures ». D'une manière générale, nous voudrons utiliser des fonctions pures là où nous le pouvons, autant que possible. Les fonctions pures offrent de multiples avantages qui les rendent beaucoup plus faciles à utiliser par rapport aux fonctions impures. Voyons d'abord les fonctions JavaScript pures, puis plongeons également dans les fonctions impures.

Fonctions pures

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

Une fonction pure reçoit des entrées et des retours et des sorties. Il ne modifie pas directement les entrées ou n'interagit pas avec l'environnement d'une autre manière. Cela dit, il ne vous envoie pas d'alertes, ne vous donne pas de déclaration en faisant autre chose ou n'interagit pas d'une autre manière avec son environnement.

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 the initial number
function double(num){
    return num * 2;
}

// triple the initial number
function triple(num){
    return num * 3;
}

// add 100 to the initial number
function add100(num){
    return num + 100;
}

// add two numbers
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiply two numbers
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Toutes les fonctions javascript ci-dessus sont des fonctions pures. En regardant de plus près, vous avez peut-être vu le modèle que nous utilisons lors de la création de fonctions pures. La première étape consiste à écrire le mot-clé "fonction" pour dire à 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 vienne comprendre 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 avec la fonction "multiplyTwoNums". (De plus, en remarque, les nombres sont communément appelés "nums" pour faire court dans la programmation, donc si, lorsque nous nommons une fonction, nous pouvons utiliser cette connaissance commune pour avoir des noms de fonction courts mais descriptifs.)

Les entrées que nous fournissons à la fonction sont également communément appelées "paramètres", lorsque nous créons les fonctions javascript, nous décidons du nombre de paramètres que 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 communément appelées "arguments". Ainsi, lorsque nous fournissons une entrée pour la fonction, ce processus est également appelé "passage d'arguments" à une fonction. Voyons quelques exemples de cela.

// first let's define the function that takes a number 
// and multiplies it by 10
function multiplyBy10(num1){
    return num1 * 10;
}

// now let's call that function
// save the result into a constant
// and display the results
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 is here is the parameter.
// we passed the value 3 as an argument to the function.
// we saved the results of the function
// to a constant called bigNum.
// we displayed the constant called bigNum to the user.

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 obligerait la fonction à interagir avec d'autres parties de l'ordinateur et rendrait notre fonction impure. Donc, d'une manière générale, nous voulons utiliser les fonctions pour leur donner une entrée et attendre une valeur renvoyée. Lorsque nous obtenons cette valeur renvoyée, nous pouvons réellement l'afficher ou exécuter d'autres fonctions javascript avec elle en fonction de nos besoins, mais le fait est que nous gardons les soucis d'affichage des résultats et de calcul des résultats séparément.

Donc jusqu'à présent, nous avons vu que nous pouvons utiliser le mot-clé "fonction" 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 indiquons à la fonction les paramètres dont elle aura besoin, puis nous ouvrons des accolades et dites à la fonction ce que nous voulons qu'elle fasse, une fois que nous arrivons à un résultat, nous renvoyons ce résultat avec le mot-clé "return". Et puis on ferme 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. L'utilisation d'une fonction est communément appelée "appel d'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 des arguments et fermer les parenthèses. Lorsque nous faisons cela, la fonction nous renverra la valeur de retour que nous avons définie. En fonction de ce que nous voulons effectuer avec cette valeur renvoyée, nous pouvons l'affecter à 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.

// let's start with a function that takes two arguments
// multiplies them and return the result.
// we can either directly return the result,
// or we can temporarily create a constant 
// and return that constant as well.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// two functions above will give us the exact same result
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// we can check the equality of the function results 
// with another function
function checkEquality(number1, number2){
    return number1 === number2;
// if the results of both functions are the same,
// the checkEquality function will return "true" 
// as a boolean data type
const isEqual = checkEquality(result1, result2);
// now we can use that boolean value to display a message
if (isEqual){
    alert("Both give the same result!");
} else {
   alert("They are not the same thing!");
}

L'exécution du 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 cherchons à 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 transmettre de paramètres. Dans ce cas, nous laisserons les parenthèses vides, nous n'avons pas non plus à renvoyer quelque chose de la fonction.

Plus encore, puisque nous pouvons écrire n'importe quel code à l'intérieur des parenthèses bouclées 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, etc. Faire tout cela n'est pas interdit, et l'ajout d'instructions console.log pendant le processus de développement du code peut s'avérer très utile. C'est pourquoi nous ne restons pas directement à l'écart des fonctions impures, mais comme elles peuvent causer beaucoup de frictions et d'erreurs dans le code, notamment en rendant votre code plus difficile à tester, nous nous efforcerons de séparer autant que possible les tâches en fonctions javascript pures. Même lorsque nous rendons nos fonctions impures en ajoutant des instructions alert ou console.log, nous souhaitons généralement les supprimer de notre code, soit en les supprimant, soit en les commentant.

Voyons quelques exemples de cela.

// greet user with an impure function
// it takes no arguments and gives no return
// it also interacts with the outside world by 
// displaying an alert
function greet(){
    alert("Hello User!");
}
// note that the results will not show 
// unless we call the function
greet();
// make some calculations and console log them
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// this will show the result in the JavaScript console we have below
// The console we just used is highly used in programming
// including in JavaScript.
// console.log statements can be really helpful 
// in telling you what is happening inside your program
// this way if something unexpected happens 
// you can see exactly where and when it happens
squareNum(7);
function multiplyTwoNums(num1, num1){
    console.log("First number is " + num1);
    console.log("Second number is " + num2);
    const result = num1 * num2;
    console.log("The resulting multiplication is " + result);
}

// lets call the function above with two numbers we choose
// and check our JavaScript console for console logs
multiplyTwoNums(5, 7);

L'exécution du code ci-dessus entraînerait ce qui suit :

Comme vous pouvez le voir sur la sortie, l'instruction d'alerte s'affiche à l'intérieur de la première fonction que nous exécutons. Nous avons le nombre résultant de 49 déconnectés dans la console JavaScript. Juste après cela, nous avons une sortie plus détaillée dans la console sur 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 sur 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 exactement où vous avez fait une erreur.

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

Auteur : Robert Whitney

Expert JavaScript et instructeur qui coache les départements informatiques. Son objectif principal est d'augmenter la productivité de l'équipe en enseignant aux autres comment coopérer efficacement lors du codage.

Afficher tous les articles

Cours JavaScript de débutant à avancé en 10 articles de blog :

1. Comment commencer à coder en JavaScript ?
2. Principes de base de JavaScript
3. Variables et différents types de données en JavaScript
4. Extraits de code et structures de contrôle
5. Boucles While et boucles for
6. Tableau Java
7. Fonctions JavaScript
8. Objets JavaScript
9. Méthodes JavaScript et plus
10. Résumé du cours JavaScript