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:
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:
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:
filter()
devuelve un arreglo con todos los elementos que cumplen la condición;find()
devuelve el primer elemento que satisface la condición.- 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 quefind()
devuelveundefined
.
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()
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()
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.