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.
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:
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:
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.