Fonctions

Très souvent, nous devons effectuer une action similaire à plusieurs endroits du script.

Par exemple, nous devons afficher un beau message lorsqu’un visiteur se connecte, se déconnecte et peut-être ailleurs.

Les fonctions sont les principales “composantes” du programme. Ils permettent au code d’être appelé plusieurs fois sans répétition.

Nous avons déjà vu des exemples de fonctions intégrées, telles que alert(message), prompt(message, default) et confirm(question). Mais nous pouvons aussi créer nos propres fonctions.

Déclaration de fonction

Pour créer une fonction, nous pouvons utiliser une déclaration de fonction.

Cela ressemble à ceci :

function showMessage() {
  alert( 'Hello everyone!' );
}

Le mot-clé function commence en premier, puis le nom de la fonction, puis une liste de paramètres entre les parenthèses (séparés par des virgules, vides dans l’exemple ci-dessus, nous verrons des exemples plus tard) et enfin le code de la fonction, également appelé “le corps de la fonction”, entre des accolades.

function name(parameter1, parameter2, ... parameterN) {
 // body
}

Notre nouvelle fonction peut être appelée par son nom : showMessage().

Par exemple :

function showMessage() {
  alert( 'Hello everyone!' );
}

showMessage();
showMessage();

L’appel showMessage() exécute le code de la fonction. Ici, nous verrons le message deux fois, parce qu’on l’appelle deux fois.

Cet exemple illustre clairement l’un des principaux objectifs des fonctions: éviter la duplication de code.

Si nous devons un jour modifier le message ou son affichage, il suffit de modifier le code à un endroit: la fonction qui le renvoie.

Variables locales

Une variable déclarée à l’intérieur d’une fonction n’est visible qu’à l’intérieur de cette fonction.

Par exemple :

function showMessage() {
  let message = "Hello, I'm JavaScript!"; // variable locale

  alert( message );
}

showMessage(); // Hello, I'm JavaScript!

alert( message ); // <-- Erreur! La variable est locale à la fonction

Variables externes

Une fonction peut également accéder à une variable externe, par exemple :

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

La fonction a un accès complet à la variable externe. Cela peut aussi la modifier.

Par exemple :

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) changé la variable externe

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // John avant l'appel de fonction

showMessage();

alert( userName ); // Bob, la valeur a été modifiée par la fonction

La variable externe n’est utilisée que s’il n’y a pas de variable locale.

Si une variable du même nom est déclarée à l’intérieur de la fonction, elle eclipsera la variable externe. Par exemple, dans le code ci-dessous, la fonction utilise le nom userName local. L’externe est ignoré :

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // déclarer une variable locale

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// la fonction créera et utilisera son propre userName
showMessage();

alert( userName ); // John, inchangé, la fonction n'a pas accédé à la variable externe

Arguments

Nous pouvons transmettre des données arbitraires à des fonctions à l’aide de paramètres.

Dans l’exemple ci-dessous, la fonction a deux paramètres: from et text.

function showMessage(from, text) { // arguments : from, text
  alert(from + ': ' + text);
}

showMessage('Ann', 'Hello!'); // Ann: Hello! (*)
showMessage('Ann', "What's up?"); // Ann: What's up? (**)

Lorsque la fonction est appelée dans les lignes (*) et (**), les valeurs données sont copiées dans les variables locales from et text. Ensuite, la fonction les utilise.

Voici un autre exemple: nous avons une variable from et la transmettons à la fonction. Remarque : la fonction change from, mais le changement n’est pas visible à l’extérieur, car une fonction obtient toujours une copie de la valeur :

function showMessage(from, text) {

  from = '*' + from + '*'; // améliore l'apparence de "from"

  alert( from + ': ' + text );
}

let from = "Ann";

showMessage(from, "Hello"); // *Ann*: Hello

// la valeur de "from" est la même, la fonction a modifié une copie locale
alert( from ); // Ann

Lorsqu’une valeur est passée en tant que paramètre de fonction, elle est également appelée argument.

En d’autres termes, pour mettre ces termes au clair :

• Un paramètre est la variable répertoriée entre parenthèses dans la fonction déclaration (c’est un terme du temps de la déclaration).
• Un argument est la valeur qui est transmise à la fonction lorsqu’elle est appelée (c’est un terme du temps de l’appel).

Nous déclarons des fonctions en listant leurs paramètres, puis les appelons en passant des arguments.

Dans l’exemple ci-dessus, on pourrait dire : "la fonction showMessage est déclarée avec deux paramètres, puis appelée avec deux arguments : from et "Hello".

Les valeurs par défaut

Si une fonction est appelée, mais qu’aucun argument n’est fourni, alors la valeur correspondante devient undefined.

Par exemple, la fonction showMessage(from, text) mentionnée précédemment peut être appelée avec un seul argument :

showMessage("Ann");

Ce n’est pas une erreur. Un tel appel produirait "*Ann*: undefined". Comme la valeur de text n’est pas transmise, elle devient undefined.

Nous pouvons spécifier la valeur dite “par défaut” (à utiliser si omise) pour un paramètre dans la déclaration de fonction, en utilisant = :

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

Maintenant, si le paramètre text n’est pas passé, il obtiendra la valeur "no text given".

La valeur par défaut saute également si le paramètre existe, mais est strictement égal à undefined, comme ceci :

showMessage("Ann", undefined); // Ann: no text given

Ici, "no text given" est une chaîne de caractères, mais il peut s’agir d’une expression plus complexe, qui n’est évaluée et affectée que si le paramètre est manquant. Donc, cela est également possible :

function showMessage(from, text = anotherFunction()) {
  // anotherFunction() est exécuté uniquement si aucun texte n'est fourni
  // son résultat devient la valeur de text
}

function showMessage(from, text) {
  if (text === undefined) {
    text = 'no text given';
  }

  alert( from + ": " + text );
}

function showMessage(from, text) {
  // Si la valeur du texte est fausse, attribuez la valeur par défaut
  // cela suppose que text == "" est identique à pas de texte du tout
  text = text || 'no text given';
  ...
}

Paramètres par défaut alternatifs

Il est parfois judicieux de définir des valeurs par défaut pour les paramètres non pas dans la fonction déclaration, mais à un stade ultérieur, lors de son exécution.

Nous pouvons vérifier si le paramètre est passé lors de l’exécution de la fonction, en le comparant avec undefined :

function showMessage(text) {
  // ...

  if (text === undefined) { // si le paramètre est manquant
    text = 'empty message';
  }

  alert(text);
}

showMessage(); // empty message

…Ou nous pourrions utiliser l’opérateur || :

function showMessage(text) {
  // if text is undefined or otherwise falsy, set it to 'empty'
  text = text || 'empty';
  ...
}

Les moteurs JavaScript modernes prennent en charge l’opérateur de coalescence des nuls ??, c’est mieux quand des valeurs fausses, telles que 0, sont considérées comme “normales” :

function showCount(count) {
  // if count is undefined or null, show "unknown"
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

Renvoyer une valeur

Une fonction peut renvoyer une valeur dans le code appelant en tant que résultat.

L’exemple le plus simple serait une fonction qui additionne deux valeurs :

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
alert( result ); // 3

La directive return peut être n’importe où dans la fonction. Lorsque l’exécution le permet, la fonction s’arrête et la valeur est renvoyée au code appelant (affecté à result ci-dessus).

Il peut y avoir plusieurs occurrences de return dans une seule fonction. Par exemple :

function checkAge(age) {
  if (age >= 18) {
    return true;
  } else {
    return confirm('Do you have permission from your parents?');
  }
}

let age = prompt('How old are you?', 18);

if ( checkAge(age) ) {
  alert( 'Access granted' );
} else {
  alert( 'Access denied' );
}

Il est possible d’utiliser return sans valeur. Cela entraîne la sortie immédiate de la fonction.

Par exemple :

function showMovie(age) {
  if ( !checkAge(age) ) {
    return;
  }

  alert( "Showing you the movie" ); // (*)
  // ...
}

Dans le code ci-dessus, si checkAge(age) renvoie false, alors ShowMovie n’effectuera pas l’alert.

function doNothing() { /* vide */ }

alert( doNothing() === undefined ); // true

function doNothing() {
  return;
}

alert( doNothing() === undefined ); // true

return
 (some + long + expression + or + whatever * f(a) + f(b))

return;
 (some + long + expression + or + whatever * f(a) + f(b))

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

Nommer une fonction

Les fonctions sont des actions. Donc, leur nom est généralement un verbe. Il convient de décrire brièvement, mais aussi précisément que possible, le rôle de la fonction. Pour qu’une personne qui lit le code reçoive le bon indice.

C’est une pratique répandue de commencer une fonction avec un préfixe verbal qui décrit vaguement l’action. Il doit exister un accord au sein de l’équipe sur la signification des préfixes.

Par exemple, les fonctions qui commencent par "show" affichent généralement quelque chose.

Fonction commençant par…

• "get…" – retourne une valeur,