HOWTO · JavaScript
Pasar un array a una función en JavaScript
Aprende cuándo pasar un array como un solo argumento, expandir sus elementos en argumentos separados con apply() o la sintaxis de propagación y leer los valores recibidos a través del objeto arguments.
En esta página
Para pasar un arreglo a una función de JavaScript, decide si la función debe recibir el arreglo como un único valor o sus elementos como argumentos posicionales separados. Pasa el arreglo directamente si la función espera un solo parámetro de tipo arreglo; usa apply() o la sintaxis spread para proporcionar argumentos separados, y lee el arreglo recibido desde arguments[0] dentro de una función ordinaria. Estas formas corresponden a firmas de función distintas.
Los ejemplos siguientes son fragmentos de JavaScript independientes. Los ejemplos con apply(), spread y arguments muestran la salida observada.
Usar apply() para pasar los elementos de un arreglo como argumentos de una función
Function.prototype.apply() llama a una función con un valor this elegido y un arreglo o un objeto similar a un arreglo cuyas entradas se convierten en argumentos posicionales. El primer parámetro es el valor de this; el segundo es la lista de argumentos. No devuelve un objeto arguments: apply() devuelve el valor que retorna la propia función. Usa esta forma cuando necesites establecer this y, a la vez, proporcionar una lista de argumentos.
Este ejemplo pasa cada elemento del arreglo al parámetro correspondiente. La etiqueta procede del valor this elegido.
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 función espera recibir el arreglo como un único parámetro, declara un solo parámetro y pasa names directamente. La función recibe el arreglo completo como ese único valor:
const names = ['Mehvish', 'John', 'Henry', 'Thomas'];
function displayName(names) {
console.log(names.join(', '));
}
displayName(names);
Esta firma es distinta de la función displayName de cuatro parámetros anterior: al pasar el arreglo directamente, la función recibe un argumento que es el arreglo; con apply(), recibe los cuatro elementos del arreglo como cuatro argumentos separados. La sintaxis spread expande los elementos de la misma manera en el punto de llamada.
Usar la sintaxis spread para pasar los elementos de un arreglo como argumentos de una función
La sintaxis spread (...) expande un iterable, como un arreglo, en valores individuales al llamar a una función. Cada valor corresponde, en orden, a un parámetro posicional. Úsala cuando la función espere argumentos separados y no necesites que apply() elija un valor para this.
const names = ['Mehvish', 'John', 'Henry', 'Thomas'];
function displayName(first, second, third, fourth) {
console.log(`${first}, ${second}, ${third}, ${fourth}`);
}
displayName(...names);
Mehvish, John, Henry, Thomas
En este caso, displayName recibe cuatro argumentos de tipo cadena. En cambio, displayName(names) proporciona un solo argumento cuyo valor es el arreglo completo. Los parámetros declarados por una función y la expresión de llamada deben corresponder al tipo de datos que necesita. La expresión spread actúa en el punto de llamada, así que la función puede conservar sus parámetros con nombre habituales.
Usar el objeto arguments para leer los argumentos de una función
El objeto arguments está disponible dentro de una función ordinaria y contiene los valores recibidos en esa llamada. Es similar a un arreglo: tiene una propiedad length y entradas indexadas, pero no es un Array. En particular, no dispone de todos los métodos de Array. Las funciones flecha no tienen su propio objeto arguments; por eso, usa una función ordinaria para este patrón.
Si llamas a una función pasando un arreglo una sola vez, ese arreglo se encuentra en arguments[0] y arguments.length es 1. La función puede inspeccionar o recorrer el arreglo almacenado en ese índice. arguments describe los valores que recibe una función; no sirve para pasar un arreglo.
const names = ['Mehvish', 'John', 'Henry', 'Thomas'];
function inspectArguments() {
console.log(arguments.length);
console.log(arguments[0].join(', '));
}
inspectArguments(names);
1
Mehvish, John, Henry, Thomas
Para crear una copia de la colección arguments, similar a un arreglo, y usar métodos de Array, emplea Array.from(arguments). En funciones modernas con un conjunto de entradas conocido, los parámetros con nombre o los parámetros rest suelen resultar más claros. Pasa el arreglo directamente cuando la función lo necesite como colección; usa apply() o la sintaxis spread cuando necesite sus elementos como parámetros separados.