Function

Une fonction permet d'exécuter un extrait de code au moment désiré aussi souvent que souhaité.

Par exemple:

function showMsg() {
  console.log("Bonjour"); // Bonjour
}

En soi, cette fonction ne fait rien. Cependant, lorsqu'elle est invoquée via showMsg(); le code se trouvant à l'intérieur s'exécute et le mot Bonjour apparait dans la console.

Anatomie

function

Ce mot-clé sert à indiquer qu'une fonction est déclarée.

showMsg

Nom donné à la fonction afin de pouvoir l'invoquer plus tard. Il est important de comprendre qu'il s'agit d'un nom arbitraire. La fonction aurait pu porter le nom de votre choix tant que le nom attribuer est aussi celui utilisé pour l'invoquer.

()

Les parenthèses () peuvent contenir différents informations ou éléments que l'on souhaites passer à la fonction, ce que l'on appel des paramètres. Dans ce cas, aucun paramètre n'est passé, donc les parenthèses sont vides.

{}

Les accolades {} permettent de définir le début et la fin du bloc de code devant être exécuté lorsque la fonction est appelée. Ce que nous appelons le contexte (scope) de la fonction.

Dans une variable

Une fonction peut aussi être défini via une variable.

Par exemple, l'exemple précédent pourrait être aussi formulé ainsi:

const showMsg = function() {
  console.log("Bonjour"); // Bonjour
}

Ces deux façons de déclarer une fonction sont pratiquement identiques à l'exception d'une différence, le hoisting! C'est à dire qu'une fonction déclarée via une variable ne peut pas être appelée avant d'être déclarée, sinon elle retournera une erreur.

Bref, le code suivant fonctionne ✅

const showMsg = function() {
  console.log("Bonjour"); // Bonjour
}

showMsg();

Mais celui-ci retournera une erreur ❌

showMsg();

const showMsg = function() {
  console.log("Bonjour"); // Bonjour
}

Tandis qu'avec une fonction standard, l'appel de la fonction peut se faire avant ou après sans problème.

Fonctionne ✅

function showMsg() {
  console.log("Bonjour"); // Bonjour
}

showMsg();

Fonctionne aussi ✅

showMsg();

function showMsg() {
  console.log("Bonjour"); // Bonjour
}

Paramètres

Les paramètres sont des informations ou éléments que l'on peut passer à une fonction afin de la rendre plus flexible.

Par exemple, si l'on souhaite dire Bonjour à chaque membre de la classe en nommant la personne à chaque fois, il faudrait faire une fonction par personne, ce qui serait long et redondant:

function showMsgPam() {
  console.log("Bonjour Pam"); // Bonjour Pam
}

function showMsgJim() {
  console.log("Bonjour Jim"); // Bonjour Jim
}
...

showMsgPam();
showMsgJim();
...

Ou simplement utiliser la même fonction, mais avec un paramètre:

function showMsg(name) {
  console.log(`Bonjour ${name}`); // Bonjour Pam // Bonjour Jim
}

showMsg("Pam");
showMsg("Jim");
...

Return

Une fonction peut retourner une information ou un élément lorsqu'elle est invoquée via le mot-clé return.

Par exemple:

function showMsg(name) {
  return `Bonjour ${name}`; 
}

console.log(showMsg("Pam")); // Bonjour Pam

Cette fonction concatène le mot "Bonjour" au nom reçu en paramètre et le retourne le résultat à l'endroit où la fonction a été invoquée, ce qui donne donc l'équivalent de console.log("Bonjour Pam");.

Console

Si rien n'invoque actuellement une fonction, il est quand même possible de la tester via la console du navigateur. Pour ce faire, il suffit d'appeler la fonction par son nom.

La console permettra de voir en temps réel le résultat à venir, de mentionner les paramètres attendus, etc.