Passer un tableau à une fonction en JavaScript

Pour transmettre un tableau à une fonction JavaScript, déterminez si elle doit recevoir le tableau comme une seule valeur ou ses éléments comme arguments positionnels distincts. Passez directement le tableau si la fonction attend un paramètre de type tableau ; utilisez apply() ou la syntaxe spread pour fournir des arguments distincts ; dans une fonction ordinaire, accédez au tableau reçu avec arguments[0]. Ces formes correspondent à des signatures de fonction différentes.

Les exemples ci-dessous sont des extraits JavaScript autonomes. Les exemples avec apply(), spread et arguments affichent leur résultat observé.

Utiliser apply() pour transmettre les éléments d’un tableau comme arguments d’une fonction

Function.prototype.apply() appelle une fonction avec une valeur this définie et un tableau, ou un objet assimilable à un tableau, dont les entrées deviennent ses arguments positionnels. Le premier paramètre indique la valeur de this ; le second fournit la liste d’arguments. Cette méthode ne renvoie pas d’objet arguments : elle renvoie la valeur de retour de la fonction appelée. Utilisez-la lorsque vous devez définir this tout en fournissant une liste d’arguments.

Dans cet exemple, chaque élément du tableau est transmis au paramètre correspondant. Le libellé provient de la valeur this sélectionnée.

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${this.label}: ${first}, ${second}, ${third}, ${fourth}`);
}

displayName.apply({ label: 'Names' }, names);

Names: Mehvish, John, Henry, Thomas

Si la fonction attend le tableau comme paramètre unique, déclarez un seul paramètre et passez-lui directement names. La fonction reçoit alors le tableau entier comme cette unique valeur :

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(names) {
  console.log(names.join(', '));
}

displayName(names);

Cette signature diffère de celle de displayName, qui comporte quatre paramètres : le passage direct fournit à la fonction un seul argument, le tableau, tandis que apply() transmet ses quatre éléments comme quatre arguments distincts. La syntaxe spread développe les éléments de la même manière au moment de l’appel.

Utiliser la syntaxe spread pour transmettre les éléments d’un tableau comme arguments d’une fonction

La syntaxe spread (...) développe un itérable, comme un tableau, en valeurs individuelles lors d’un appel de fonction. Chaque valeur correspond alors, dans l’ordre, à un paramètre positionnel. Utilisez cette syntaxe lorsque la fonction attend des arguments distincts et que vous n’avez pas besoin de définir une valeur this avec apply().

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function displayName(first, second, third, fourth) {
  console.log(`${first}, ${second}, ${third}, ${fourth}`);
}

displayName(...names);

Mehvish, John, Henry, Thomas

Ici, displayName reçoit quatre arguments de type chaîne. En revanche, displayName(names) fournit un seul argument dont la valeur est le tableau entier. La déclaration des paramètres d’une fonction et l’expression d’appel doivent correspondre à la forme des données dont elle a besoin. L’expression spread agit au moment de l’appel ; la fonction peut donc conserver ses paramètres nommés habituels.

Utiliser l’objet arguments pour lire les arguments d’une fonction

L’objet arguments est disponible dans une fonction ordinaire et contient les valeurs transmises lors de l’appel. Il est assimilable à un tableau : il possède une propriété length et des entrées indexées, mais ce n’est pas un tableau. Il ne dispose notamment pas de toutes les méthodes des tableaux. Les fonctions fléchées ne définissent pas leur propre objet arguments ; utilisez donc une fonction ordinaire pour cette méthode.

Lorsqu’un appel fournit un tableau comme argument unique, celui-ci se trouve dans arguments[0] et arguments.length vaut 1. La fonction peut ensuite examiner ou parcourir le tableau à cet index. arguments décrit les valeurs reçues par une fonction ; ce n’est pas un moyen de lui transmettre un tableau.

const names = ['Mehvish', 'John', 'Henry', 'Thomas'];

function inspectArguments() {
  console.log(arguments.length);
  console.log(arguments[0].join(', '));
}

inspectArguments(names);

1
Mehvish, John, Henry, Thomas

Pour copier la collection arguments, qui est assimilable à un tableau, afin d’utiliser des méthodes de tableau, appelez Array.from(arguments). Dans les fonctions modernes dont les entrées sont connues, des paramètres nommés ou des paramètres de reste sont souvent plus clairs. Passez directement le tableau si la fonction doit le traiter comme une collection ; utilisez apply() ou la syntaxe spread si elle doit recevoir ses éléments comme paramètres distincts.