Fonctions en

À propos de Fonctions

Une fonction est un bloc de code organisé et réutilisable qui sert à effectuer une action. Il existe plusieurs façons de définir des fonctions en JavaScript. On va voir ici les déclarations de fonction et les expressions de fonction. D'autres possibilités, comme les fonctions fléchées, seront abordées dans d'autres concepts.

Déclaration de fonction

La façon standard de définir une fonction en JavaScript est la déclaration de fonction, aussi appelée définition de fonction ou instruction de fonction.

Elle se compose du mot-clé function, du nom de la fonction et d'une liste de paramètres séparés par des virgules, placée entre parenthèses. Vient ensuite le corps de la fonction (l'ensemble des instructions qui définissent ce que fait la fonction), placé entre accolades.

function someName(param1, param2, param3) {
  // ...
}

Utilise une fonction

En JavaScript, on appelle une fonction en indiquant son nom suivi de parenthèses contenant les arguments.

someName(arg1, arg2, arg3);

En JavaScript, le simple fait d'indiquer le nom de la fonction ne l'appelle pas.

function sayHello() {
  console.log('Hello, World!');
}

sayHello;
// => [Function: sayHello]
// The text representations varies between environments.

sayHello();
// => 'Hello, World!'

Paramètres

Lorsque tu manipules des paramètres à l'intérieur du corps de la fonction, fais attention aux éventuels effets de bord sur la valeur d'origine qui a été passée à la fonction. En JavaScript, un argument est une copie d'une référence vers la valeur d'origine. Ce que cela implique en pratique dépend du type de données de l'argument.

• Les valeurs des types de données primitifs sont immuables. Toutes les « modifications » créent toujours une nouvelle valeur primitive. Pour cette raison, la valeur d'origine n'est jamais affectée par ce qui arrive à l'argument dans le corps de la fonction.

  const num = 0;
  
  function increase(number) {
    number = number + 1;
  }
  
  increase(num);
  num;
  // => 0
  

• Il en va autrement des valeurs comme les objets, les tableaux, les fonctions. Comme la référence est copiée, une réaffectation n'affecte pas la valeur d'origine. En revanche, comme on a affaire à une copie superficielle, modifier l'argument dans le corps de la fonction change aussi la valeur d'origine qui a été passée.

  const nums = [0, 1, 2, 3, 4];
  
  function pushFive(arr) {
    arr.push(5);
  }
  
  pushFive(nums);
  nums;
  // => [0, 1, 2, 3, 4, 5]
  

Par défaut, en JavaScript, tous les paramètres définis dans la déclaration de fonction sont facultatifs. Si l'on fournit à une fonction moins d'arguments qu'elle n'a de paramètres, les arguments manquants vaudront undefined à l'intérieur du corps de la fonction, voir null et undefined. Dans de nombreux cas, il est plus judicieux d'initialiser un paramètre avec une valeur par défaut si aucune valeur ou une valeur undefined n'est passée. On peut le faire en spécifiant des paramètres par défaut directement dans la définition de la fonction.

function someName(param1 = defaultValue1, param2 = defaultValue2) {
  // ...
}

On peut appeler une fonction avec plus d'arguments qu'il n'y avait de paramètres dans sa définition. Tous les arguments, y compris ces arguments excédentaires, se trouvent dans le « tableau » d'arguments.

Il est aussi possible de définir des fonctions qui acceptent un nombre arbitraire d'arguments (fonctions variadiques), voir les paramètres du reste dans opérateurs de reste et de décomposition pour plus de détails.

Instruction return

Une instruction return met fin à l'exécution de la fonction et indique une valeur à renvoyer à l'appelant. Une fonction peut contenir plusieurs instructions return.

function checkNumber(num) {
  if (num === 0) {
    return 'You passed 0, please provide another number.';
  }

  return 'Thanks for passing such a nice number.';
}

Le résultat d'une fonction qui ne renvoie aucune valeur ou qui n'a pas d'instruction return est undefined. Il n'y a pas de return implicite en JavaScript.

function nakedReturn(a) {
  a * 2;
  return;
}

nakedReturn(1);
// => undefined

function noReturn(a) {
  a * 2;
}

noReturn(1);
// => undefined

En JavaScript, on ne peut renvoyer qu'une seule valeur. Si tu veux transmettre plus d'informations, il faut d'abord les regrouper dans une seule entité, le plus souvent un objet ou un tableau.

function divide(a, b) {
  return {
    quotient: Math.floor(a / b),
    remainder: a % b,
  };
}

Expression de fonction

Une déclaration de fonction est une instruction autonome. Mais il est parfois utile de définir une fonction au sein d'une autre expression, par exemple dans une affectation, comme paramètre de fonction (callback) ou comme valeur dans un objet. C'est ce que permet une expression de fonction. Elle a la même syntaxe qu'une déclaration de fonction, à ceci près que le nom de la fonction peut être omis pour créer une fonction anonyme.

const someFunction = function (param) {
  // ...
};

someOtherFunction(function (param) {
  // ...
});

const obj = {
  someFunction: function (param) {
    // ...
  },
};

Portée

Une fonction introduit un nouveau contexte d'exécution en JavaScript. Les variables définies à l'intérieur d'une fonction ne sont pas accessibles depuis l'extérieur de cette fonction. En revanche, les variables définies dans la portée parente (la portée dans laquelle la fonction a elle-même été définie) sont accessibles à l'intérieur de la fonction. La documentation MDN sur la portée donne des exemples de ce comportement.

Jette un œil aux fermetures pour en savoir plus sur la portée des variables en JavaScript.