Logo du site. Represente un escaler en ombre.

Les fonctions

Les fonctions, sous leur forme la plus simple, sont des blocs de codes qui peuvent être réutilisés à souhait. Elles s'apparentent aux variables, mais en nous mettant à disposition un plus grand nombre de codes et de fonctionnalités.

Une fonction est découpée en deux parties.

Définir une fonction

Définir une fonction, c'est tout simplement décrire ce qu'elle va faire. Pour définir une fonction, il faut respecter la syntaxe suivante:

function nomDeLaFonction( … ) { … };

Dans le détail:

  • “function”
    C' est le terme qui nous permet de définir que le mot qui va suivre est une fonction. Comme pour les variables, il est nécessaire afin de bien faire comprendre au langage ce que fait la suite.
  • “NomDeLaFonction”
    C'est ce mot que nous allons devoir utiliser lors de l'appel de notre fonction. Dans notre cas, nous ne faisons que la définir. Pour que celle-ci puisse être utilisée, il faudra l'appeler.
  • “ …( … ) ”
    La parenthèse après le nom de la fonction est obligatoire. Elle peut bien entendu être vide. Cette parenthèse est faite pour transmettre des paramètres ou valeurs entre notre code et la fonction en elle-même.
  • “ … { … } ”
    Les accolades définissent le bloc de code qui sera pris en compte lors de la fonction qui est appelée. Les variables et autres éléments qui y sont définis ne sont disponibles que dans notre fonction.

Maintenant que notre fonction est déclarée, nous pouvons l'utiliser.

Appeler une fonction

L'appel d'une fonction est le fait de l'utiliser dans notre code. L'appel est obligatoirement après la déclaration. La syntaxe est la suivante:

nomDeLaFonction();

Ceci va appeler notre fonction et le code présent à l'intérieur de celle-ci va s'exécuter.

Par exemple:

function myFirstNameIs(){
  console.log("Bernard");
}

myFirstNameIs();

Dans le cas précédent, nous déclarons une fonction qui a pour unique but d'écrire notre prénom dans la console de notre navigateur. Celle-ci apparaîtra à chaque fois que nous appellerons cette fonction comme c'est le cas dans la dernière ligne de notre exemple.

Bien entendu, cette manière de procéder n'est pas toujours adéquate, car ce qui nous intéresse surtout dans les fonctions, c'est de pouvoir leur transmettre des données, que ces fonctions traitent ces données et qu'elles nous rendent un résultat.

Prenons l'exemple d'un simple calcul. Nous pourrions souhaiter créer une fonction qui n'a pour but que d'additionner deux valeurs et de nous transmettre le résultat. Pour ce faire, nous devons ajouter des arguments dans notre parenthèse:

function addition(chiffreUn, chiffreDeux) {
  let solution = chiffreUn + chiffreDeux;
  return solution;
}

De cette manière, il nous est possible de donner des arguments, “chiffreUn” et “chiffreDeux” à notre fonction et celle-ci nous renverra la variable ““solution” que nous allons pouvoir afficher ou réutiliser. À noter que les valeurs insérées dans la parenthèse lors de l'appel de la fonction se nomment “arguments” et que le nombre d'arguments défini dans notre fonction se nomme “paramètres”.

L'appel de cette fonction se fera donc:

addition(4,7);

Et si nous voulons afficher le résultat:

console.log(addition(4,7));

Cela nous affichera “11” dans la console de notre navigateur. Les fonctions peuvent bien entendu être stockées dans des variables:

let calcul = addition(3,20);
consol.log(calcul); // Affiche 23

Il existe bien entendu des fonctions déjà existantes. Par exemple, Number( ' … ' ), qui permet de transformer une chaîne de caractère en chiffre. C'est une des raisons du fait que certains termes ou mots ne sont pas disponibles.

Les fonctions anonymes

Déclarer une fonction n'est pas la seule manière de créer une fonction. Il nous est aussi possible de traiter notre fonction en temps qu'expression. Pour ce faire, notre fonction anonyme, qui n'a donc pas de nom, doit être stockée dans une variable:

const calcAge = function(birthYear) {
  return 2024 - birthYear;
}

Ici, nous affectons notre fonction à une constante. Il nous est maintenant possible de l'utiliser dans un cas pratique:

const currentRobertAge = calcAge(1984);

Nous utilisons la fonction stocker dans notre constante en lui donnant, comme elle l'exige, un argument.

La grande différence entre ces deux types de fonctions vient du fait que lorsque vous déclarez une fonction, il est possible de l'appeler avant sa déclaration. Dans le cas d'une fonction anonyme, cela n'est pas possible. Le fait d'utiliser l'une ou l'autre écriture est, dans la majorité des cas, une question de préférence.

Les fonctions fléchées

C'est une nouvelle manière d'écrire les fonctions. Elle rejoint la fonction anonyme dans le sens ou elle se veut rapide et pratique. À l'inverse de la fonction anonyme, il est possible de la complexifier.

Les fonctions fléchées s'écrivent de la manière suivante:

const NomDeLaVariable = paramètre => expression;

Il est bien entendu possible de donner plus de paramètres à cette fonction. Pour ce faire, il faut utiliser le même principe que pour la déclaration et mettre une parenthèse:

const NomDeLaVariable = (paramètre1, paramètre2) => expression;

Et pour finir, il est aussi possible d'avoir une expression plus longue, c'est-à-dire sur plusieurs lignes. Pour ce faire, il suffit de rajouter des accolades afin de créer un bloc de code:

const NomDeLaVariable = (paramètre1, paramètre2)  => {expression; }

Le but de cette notation est néanmoins d'être plus simple et plus rapide, il est donc préférable de garder ça en tête afin d'éviter de trop complexifier cette approche.

arrow-up-circle