Tutorial JavaScript: Filtrado con filter() y find()

En JavaScript, las funciones filter() y find() son dos métodos muy útiles que se utilizan para filtrar elementos de un array basándose en ciertos criterios. Ambos métodos, filter() y find(), son métodos de prototipo de Array y están diseñados para facilitar la manipulación y extracción de datos en arrays sin modificar el array original en el proceso.

filter()

El método filter() crea un nuevo array con todos los elementos que cumplan con la condición especificada por la función proporcionada como argumento. Esta función debe ser una función de llamada (callback) que toma un valor, un índice y el array como argumentos, y devuelve un valor booleano, es decir, true si el elemento cumplió la condición y false si no lo hizo.

La función se ejecuta en cada elemento del array, y si devuelve true, el elemento se agrega al nuevo array. Si devuelve false, el elemento se descarta.

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function esPar(numero) {
  return numero % 2 === 0;
}

const pares = numeros.filter(esPar);
console.log(pares); // [2, 4, 6, 8, 10]

En este ejemplo, se tiene un array numeros que contiene números del 1 al 10. Se define una función de llamada esPar() que determina si un número es par (comprobando que su resto al dividir por 2 es 0). Luego, se utiliza el método filter() en el array numeros y se pasa como argumento la función esPar. El resultado es un nuevo array llamado pares que solo contiene los números pares del array original.

find()

El método find() es similar a filter() en el sentido de que también busca elementos que cumplan con una condición especificada por una función de llamada (callback). Sin embargo, a diferencia de filter(), el método find() retorna el primer elemento que cumpla con la condición, en lugar de crear un nuevo array con todos los elementos que cumplan con la condición.

La función de llamada proporcionada como argumento para el método find() también toma un valor, un índice y el array como argumentos y devuelve un valor booleano. Si el elemento que se está evaluando cumple con la condición, es decir, si devuelve true, entonces find() devuelve ese elemento y deja de iterar sobre el array. Si ningún elemento cumple con la condición, find() devuelve undefined.

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function esDivisiblePor3(numero) {
  return numero % 3 === 0;
}

const primerDivisiblePor3 = numeros.find(esDivisiblePor3);
console.log(primerDivisiblePor3); // 3

En este ejemplo, se tiene el mismo array numeros que contiene números del 1 al 10. Se define una función de llamada esDivisiblePor3() que determina si un número es divisible por 3. Luego, se utiliza el método find() en el array numeros y se pasa como argumento la función esDivisiblePor3. El resultado es el valor 3, que es el primer número divisible por 3 en el array original. Si ningún número en el array hubiera sido divisible por 3, el método find() habría devuelto undefined.

Uso de funciones flecha

En JavaScript, las funciones flecha son una forma concisa y elegante de declarar funciones sin tener que escribir la palabra clave function. Esta característica se adapta perfectamente al uso de métodos como filter() y find(), ya que estos métodos requieren funciones de llamada (callback) que, en muchas ocasiones, son simples y de una sola línea. La sintaxis concisa de las funciones flecha hace que el código sea más fácil de leer y mantener.

Se muestra el uso de las funciones flecha con filter() y find() en base a los ejemplos anteriores:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Utilizando funciones flecha
const pares = numeros.filter(numero => numero % 2 === 0);
const primerDivisiblePor3 = numeros.find(numero => numero % 3 === 0);

console.log(pares); // [2, 4, 6, 8, 10]
console.log(primerDivisiblePor3); // 3

En este caso, se ha sustituido la función de llamada esPar() por una función flecha que realiza la misma operación. La sintaxis es clara y sencilla: se coloca el argumento numero seguido de una 'flecha' (=>) y luego la expresión que se evalúa. Esta expresión devuelve true si el número es par y false si no lo es.

Al igual que con filter(), para find() se ha sustituido la función de llamada esDivisiblePor3() por una función flecha que realiza la misma operación. La función flecha recibe el argumento numero, seguido de la 'flecha' (=>), y luego la expresión que se evalúa. Esta expresión devuelve true si el número es divisible por 3 y false si no lo es.

Parámetros de filter() y find()

Tanto filter() como find() aceptan una función de llamada (callback) como argumento, que, a su vez, puede recibir hasta tres parámetros: el elemento actual del array, el índice del elemento actual y el array sobre el que se itera.

Estos tres argumentos proporcionan información adicional que puede ser útil al escribir funciones de call-back más avanzadas y/o específicas. A continuación, se muestra un ejemplo de cómo utilizar múltiples argumentos en una función de llamada proporcionada a filter() y find():

const numeros = [10, 20, 30, 40, 50, 60];

// Función de llamada que utiliza el elemento, el índice y el array
const paresConIndicePar = numeros.filter((numero, indice, arr) => {
  console.log(`Número: ${numero}, Índice: ${indice}, Array: ${arr}`);
  return numero % 2 === 0 && indice % 2 === 0;
});

console.log(paresConIndicePar); // [10, 30, 50]

En este ejemplo, la función de llamada (callback) para filter() utiliza los tres argumentos. La función devuelve true solo si el número es par y su índice en el array también es par. Además, se imprime en la consola información adicional sobre el elemento actual, su índice y el array utilizando estos argumentos.

const productos = [
  { id: 1, nombre: 'camiseta', categoria: 'ropa' },
  { id: 2, nombre: 'pantalón', categoria: 'ropa' },
  { id: 3, nombre: 'reloj', categoria: 'accesorios' },
];

const resultadoFind = productos.find((producto, indice, arr) => {
  if (producto.categoria === 'accesorios') {
    console.log(`Se encontró un producto de la categoría 'accesorios' en el índice ${indice}`);
    return true;
  }

  return false;
});

console.log(resultadoFind); // { id: 3, nombre: 'reloj', categoria: 'accesorios' }

En este segundo ejemplo, la función de llamada (callback) para find() también utiliza los tres argumentos. La función devuelve el primer producto de la categoría 'accesorios' y muestra en la consola el índice en el array donde se encuentra dicho producto.

En resumen, tanto filter() como find() son métodos muy útiles en JavaScript para filtrar elementos en arrays según ciertos criterios definidos por una función de llamada. Mientras que filter() crea un nuevo array con todos los elementos que cumplen con la condición, find() devuelve el primer elemento que cumple con la condición y detiene la iteración.