Filtrado de elementos en arrays JavaScript con filter()

4min

Una de las tareas típicas de los lenguajes de programación es el filtrado de elementos de una estructura de datos, típicamente de arrays. Javascript tiene una función muy útil que nos permite realizar esta tarea de una manera sencilla y muy compacta, como vamos a ver en este post.

Índice

Método filter() de los arrays

Por supuesto, podríamos realizar el filtrado de elementos de un array con nuestro propio algoritmo, realizando un sencillo bucle para recorrer todos los elementos del array y colocando en un array cada uno de los que nos queremos guardar. Sin embargo, esto requeriría varias líneas de código, en un estilo de programación típicamente imperativo.

El método filter() de los arrays en Javascript nos permite mejorar esta situación de una manera muy elegante, gracias a un estilo más declarativo y funcional. Lo vamos a ver a continuación.

Dado un array cualquiera en JavaScript, por ejemplo este array de números:

const numeros = [ -5, 7, -10, 22, 3, -1];

Podemos invocar el método filter directamente sobre el array, enviando como parámetro una función:

const arrayFiltrado = numeros.filter(funcionDeFiltrado);

El método filter() de los arrays JavaScript producirá el siguiente esquema de funcionamiento:

  • Para cada elemento del array se invocará la función entregada como parámetro. En el código anterior, para un array de 6 elementos, se invocará funcionDeFiltrado 6 veces.
  • La función recibirá como argumento el valor actual del array, desde el primero al último, en cada una de las veces que se va a invocar.
  • La función deberá realizar cualquier comprobación con el valor actual del array y devolver un valor boleano. Si es true, querrá decir que el elemento nos interesa guardarlo. Si es false, querrá decir que el elemento no nos interesa.
  • El método filter() devolverá un nuevo array con todos los valores que nos hayamos quedado, para los cuales la función haya devuelto true.

Ejemplo de uso del método filter

Vamos a realizar un ejemplo sencillo con el array de números anterior. Supongamos que nos queremos quedar con todos los números positivos que tenemos en ese array. Entonces, podríamos alimentar a nuestro método filter con una función como esta:

function positivo(numero) {
return numero >= 0;
}

Como ves, esta función recibe un número por parámetro. Dependiendo de si el número es positivo o negativo, devuelve true o false. Ahora podríamos filtrar los números positivos de la siguiente manera:

const positivos = numeros.filter(positivo);

Esto tendrá como resultado la creación de un array llamado positivos, el cual contendrá los siguientes elementos: [ 7, 22, 3 ]

Ejemplo de filtrado con un array de cadenas

Por supuesto, podemos tener cualquier tipo de valor en el array, como cadenas, booleanos, o incluso valores compuestos como objetos. Simplemente necesitamos alimentar a filter() con una función que devuelva true o false dependiendo de si nos queremos quedar el elemento en el array resultante o no. En este segundo ejemplo vamos a trabajar con este array de palabras:

const palabras = [
'hosting',
'alojamiento',
'javascript',
'filter',
'filtrado',
'array',
];

Ahora vamos a hacer un filtrado para quedarnos solamente las palabras que empiezan por «a». Sin embargo, para conseguir que nuestro código sea mucho más compacto vamos a usar una función flecha de Javascript, que nos permite escribir el comportamiento en una única línea de código.

const comienzanPorA = palabras.filter( valor => valor[0] == 'a' );

¿Qué te parece? Hemos conseguido expresar en una única línea de código todo el trabajo para filtrar los elementos, lo que resulta extremadamente potente.

Recibiendo los índices en el filtrado

La función con la que alimentamos el método filter también puede recibir por parámetro el índice del elemento actual. Posiblemente lo necesitemos si nuestro filtrado depende de factores como la posición del elemento dentro del array. En el siguiente código vamos a proponer un tercer ejemplo en el que filtramos los elementos que se encuentran en las posiciones del array con índices pares.

const indicesPares = palabras.filter( (valor, indice) => indice % 2 == 0 );

En este caso los valores no los hemos usado para nada, pero aun así tenemos que declarar el parámetro, ya que el primer parámetro de la función suministrada será siempre el valor y el segundo el índice.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: