Retour au portfolio

JavaSript

Les fonctions :

Une fonction est un bloc de code auquel on attribue un nom, appeler cette fonction permet d’exécuter le code qu’elle contient.
On parle donc de fonction, car il s’agit d’un bloc de code qui a un rôle spécifique au sein de votre fichier JavaScript. Une fonction peut ainsi :
- contenir des informations, qu’on appelle paramètres ;
- retourner un résultat ;
- effectuer une action.

Pour écrire une fonction en JavaScript, on commence par le mot clé "function" (fonction, en français), ensuite on lui définit un "nom" suivi entre parenthèses de ses paramètres, puis on ouvre les accolades et on lui indique qu'elle doit nous retourner une réponse avec le mot clé "return" associé aux deux paramètres qu'on a déclaré dans la fonction, dans cette exemple, on se sert d'opérateurs.

On commence par lui indiquer deux variables qui lui serviront de paramètre, voici un exemple :

// 
let numberOne = 27;
let numberTwo = 23;

function addNumbers(numberOne, numberTwo) {
    return numberOne + numberTwo;
}

Maintenant que l'on a déclaré notre fonction, pour qu'on puisse l'utiliser, on doit l'appeler.

console.log(addNumbers(numberOne,numberTwo)); // Afffiche 50

À savoir à propos des fonctions JavaScript, elles peuvent ne recevoir aucun paramètre ou un nombre illimités, son corps peut contenir autant d'instructions que vous le voulez, elles peuvent être composé de conditions, de boucles, plusieurs variables, de tableaux, d'objets, etc...
L'instruction return peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction, si aucune instruction return n'est utilisée (ou que l'instruction return n'est suivie d'aucune valeur), JavaScript renvoie undefined.

Voici un exemple d'utilisation d'une fonction :

function vote(age, nationality) {
if (age >= 18 && nationality === 'france') {
    return true }
else {
    return false }
}

console.log(vote(17, 'espagne')); // affiche "false"
console.log(vote(17, 'france')); // affiche "false"
console.log(vote(18, 'france')); // affiche "true"

Dans cette fonction, on va vérifier si une personne a le droit de vote, donc, s’il est majeur et qu'il est de nationalité française.
Pour utiliser cette fonction, on va l'appeler en lui inserant des valeurs comme paramètres.

On peut également utiliser une fonction en la déclarant comme variable, voici un exemple :

const voteBis = function (age, nationality) {
if (age >= 18 && nationality === 'france') {
    return true }
else {
    return false }
}
            
console.log(voteBis(17, 'espagne')); // affiche "false"
console.log(voteBis(17, 'france')); // affiche "false"
 console.log(voteBis(18, 'france')); // affiche "true"

Il existe une autre methode "dite flèché" pour écrire une fonction, reprenons le premier exemple que l'on a vu avec les opérateurs, on lui indique deux variables qui lui serviront de paramètre :

let numberThree = 17;
let numberFour = 23;
                
addNumbersArrow = (numberThree, numberFour) =>{
return numberThree + numberFour; // affiche 40
}

Maintenant, on rappelle la fonction.

console.log(addNumbersArrow(numberThree,numberFour));

Noter que l'ordre des paramètres est très important, la fonction a un premier paramètre nommé “numberOne” et un second paramètre nommé "numberTwo", ici dans l'exemple c'est une addition, on trouvera toujours le même résultat malgré le sens. Mais dans le cas d'une soustraction, si je soustrais "5 - 4", on obtient un résultat de 1, mais si je les inverse "4 - 5", on obtiens -1, ce qui n'est plus du tout le même résultat.

Quelques notions de bonne pratique :

Il est important de définir une tâche spécifique pour chaque fonction.
Dans l’idéal, on attribue une seule tâche à une fonction : afficher, calculer, lancer une opération, initialiser… Si une fonction s’occupe de tout gérer à la fois, elle comportera beaucoup de lignes, difficiles à comprendre, à modifier et à tester.
Le risque de regrouper toutes vos fonctions au même endroit est de rapidement causer des problèmes de lisibilité et de navigation.
Le mieux est de découper votre code en plusieurs fonctions cela permet de mieux organiser vos idées et facilite les modifications, mais ce n’est pas suffisant, il faudra par la suite les inclure dans le fichier "HTML" avec la balise <script>.
Nommez clairement vos fonctions ainsi que vos paramètres.

~~ Fin ~~