Una pregunta común en las entrevistas que a menudo se les hace a los desarrolladores de JavaScript es explicar la diferencia entre los métodos find() y filter().     

En este tutorial de hoy, lo guiaré a través de cuáles son estos métodos y cuándo debe usarlos. 

¿Cuál es el metodo filter()?

Este método devuelve todos los elementos de la matriz que cumplen la condición especificada en la función de devolución de llamada.  

Veamos con un ejemplo cómo funciona realmente:

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

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

console.log("y is: ", y); // Y ES: [1]

Si revisa la salida del ejemplo anterior, el valor de y es una matriz de 1 elemento que satisface la condición. Esto se debe a que el método filter() itera sobre todos los elementos de la matriz y luego devuelve una matriz filtrada que cumple la condición especificada.

Las principales diferencias entre los ejemplos anteriores son:

1. filter() devuelve una matriz que contiene el elemento que cumple la condición, pero find() devuelve el elemento mismo que cumple la condición.
2. En filter(), toda la matriz se itera a pesar de que el elemento que se busca está presente al principio. Pero en find(), tan pronto como se encuentra el elemento que satisface la condición, se devuelve.

 

Casos de uso para find() y filter()

Cuando tiene un caso de uso en el que se espera que se devuelva más de 1 elemento y desea realizar una operación en todos los elementos, puede usar el método filter(). Pero si espera que solo se devuelva un único elemento de la matriz, entonces puede usar find() y evitar iteraciones adicionales.

Veamos ejemplos de ambos casos de uso:

1. Ejemplo de caso de uso de filter()

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

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

console.log("y is: ", y); // Y ES: [2, 4]

En el ejemplo anterior, filter() tiene más sentido, ya que le gustaría iterar sobre todos los elementos de la matriz para encontrar los elementos que son divisibles por 2.

2. Ejemplo de caso de uso de find()

const users = [
    {
        id: 1
        name: "Carlos"
    },
    {
        id: 2,
        name: "Juan",
    },
    {
        id: 3,
        name: "Toni"
    }
];

const res = users.find(user => user.id === 2);

console.log("Resultado: ", res); // Resultado: {id: 2, name: 'Juan'}

En el ejemplo anterior, find() tiene más sentido, porque solo hay 1 usuario que lo tiene 2, ID por lo que find() ayuda a evitar iterar sobre el tercer objeto en la matriz.