Original article: find() vs filter() in JavaScript – Differences Explained with Examples

Una pregunta que se suele dar con mucha frecuencia en las entrevistas a desarrolladores de JavaScript es explicar la diferencia entre los métodos find() y filter().

En este tutorial, veremos qué son estos métodos y cuándo debes usarlos.

¿Qué es el método filter()?

Este método devuelve todos los elementos de un arreglo que satisfacen la condición especificada en la función del callback (retrollamada).

Veamos con un ejemplo cómo funciona:

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el*2 === 2);

console.log("y es: ", y); // y es: [1]
Ejemplo de filter()

Examinando la salida del ejemplo anterior, vemos que el valor de y es un arreglo con 1 elemento, el único del arreglo x que cumple la condición: se ha filtrado el arreglo. El método filter() itera sobre todos los elementos de un arreglo y devuelve otro arreglo con los elementos que cumplen la condición especificada en la función de callback.

¿Qué es el método find()?

Este método devuelve el primer elemento de un arreglo que satisface la condición especificada en la función de callback.

Como en el punto anterior, veamos un ejemplo:

const x = [1, 2, 3, 4, 5];

const y = x.find(el => el*2 === 2);

console.log("y es: ", y); // y es: 1
Ejemplo de find()

Vemos que el valor de y es 1. El lector poco atento dirá: "lo mismo que antes, con filter()". ¡No! Con filter() se obtenía un arreglo con un elemento, se recorre el arreglo entero en busca de todos los elementos que cumplan la condición; find() comienza a iterar pero se detiene en cuanto encuentra un valor que cumpla la condición y lo devuelve. Por eso no devuelve un arreglo, solo va a devolver ese primer valor que encuentre, haya lo que haya después.

Resumiendo:

  1. filter() devuelve un arreglo con todos los elementos que cumplen la condición; find() devuelve el primer elemento que satisface la condición.
  2. Con filter() se itera todo el arreglo; find() se detiene al encontrar el primer elemento que cumpla la condición.
Si ningún elemento cumple la condición, filter() devuelve un arreglo vacío, [], mientras que find() devuelve undefined.

Casos de uso para find() y filter()

Cuando se quiere aplicar la condición a todo el arreglo, esperando de manera implícita que sea devuelto más de un elemento, habrá que utilizar filter(); si se espera que sólo sea devuelto un valor, se usará find() y se ahorrará el procesamiento de todo el arreglo.

Veamos un ejemplo de cada caso de uso:

1. Ejemplo de caso de uso para filter()

const x = [1, 2, 3, 4, 5];

const y = x.filter(el => el%2 === 0);

console.log("y es: ", y); // y es: [2, 4]
Ejemplo de caso de uso para filter()

El objetivo aquí es encontrar todos los elementos pares. Obviamente hay que utilizar filter() ya que es necesario recorrer todo el arreglo, y es muy probable que sea devuelto más de un elemento.

2. Ejemplo de caso de uso para find()

const emp = [
    {
        nombre: "Ram",
        empID: 101
    },
    {
        nombre: "Sham",
        empID: 102
    },
    {
        nombre: "Mohan",
        empID: 103
    }
];

const res = emp.find(el => el.empID === 102);

console.log("res es: ", res); // res es: {nombre: 'Sham', empID: 102}
Ejemplo de caso de uso para find()

Aquí sin embargo tiene más sentido usar find(). Se sabe que los posibles valores que puede tomar empID son únicos, por lo que una búsqueda sobre ese parámetro va a devolver exclusivamente un elemento. Además, así se evita la iteración sobre todo el arreglo.

¡Gracias por tu tiempo!

Si te ha resultado útil, comparte este artículo con amigos y compañeros.