Buscar elementos dentro de un array es una de las tareas más comunes en JavaScript. En esta entrada, exploraremos dos métodos clave para lograrlo: find y filter. Veremos cómo funcionan, para qué se usan y algunos ejemplos prácticos que van desde lo más sencillo hasta lo más avanzado.
Método find: Encuentra el Primer Elemento que Cumpla una Condición
El método find devuelve el primer elemento de un array que cumple con la condición especificada en la función de callback. Si no encuentra ningún elemento, devuelve undefined.
javascript
array.find(callback(element, index, array), thisArg);callback: Una función que se ejecuta por cada elemento.element: El elemento actual del array.indexyarray(opcionales): El índice y el array completo.thisArg: Opcional, valor usado comothisdentro del callback.
Ejemplo Sencillo con find
Supongamos que tienes un array de números y quieres encontrar el primer número mayor a 10:
javascript
const numeros = [5, 8, 12, 20, 7];
const resultado = numeros.find(num => num > 10);
console.log(resultado); // Salida: 12Explicación
findrevisa cada número del array.- El primer número que cumple
num > 10es12, así que se detiene y lo devuelve
Ejemplo Complejo con Objetos
Ahora, imaginemos que tienes un array de objetos que representan usuarios, y necesitas encontrar el usuario con el nombre “María”:
javascript
const usuarios = [
{ id: 1, nombre: "Juan", edad: 28 },
{ id: 2, nombre: "María", edad: 34 },
{ id: 3, nombre: "Pedro", edad: 40 },
];
const usuario = usuarios.find(user => user.nombre === "María");
console.log(usuario); // Salida: { id: 2, nombre: "María", edad: 34 }
Explicación
- La función busca un objeto donde
user.nombre === "María". - Devuelve el primer objeto que cumple con la condición.
Método filter: Encuentra Todos los Elementos que Cumplen una Condición
El método filter devuelve un nuevo array con todos los elementos que cumplen la condición especificada en el callback.
javascript
array.filter(callback(element, index, array), thisArg);Explicación
- Los parámetros son los mismos que en
find.
Ejemplo Sencillo con filter
Dado un array de números, encuentra todos los números mayores a 10:
javascript
const numeros = [5, 8, 12, 20, 7];
const resultados = numeros.filter(num => num > 10);
console.log(resultados); // Salida: [12, 20]Explicación
filterrevisa todos los números del array.- Devuelve un nuevo array con los valores que cumplen la condición (
num > 10).
Ejemplo Complejo con Objetos
Encuentra todos los usuarios mayores de 30 años:
javascript
const usuarios = [
{ id: 1, nombre: "Juan", edad: 28 },
{ id: 2, nombre: "María", edad: 34 },
{ id: 3, nombre: "Pedro", edad: 40 },
];
const mayores = usuarios.filter(user => user.edad > 30);
console.log(mayores);
// Salida: [{ id: 2, nombre: "María", edad: 34 }, { id: 3, nombre: "Pedro", edad: 40 }]Explicación
- La función revisa todos los objetos en el array y selecciona aquellos donde
user.edad > 30. - Devuelve un nuevo array con los usuarios que cumplen esta condición.
| Método | Devuelve | Uso ideal |
|---|---|---|
| find | El primer elemento que cumpla la condición. | Cuando solo necesitas un único elemento. |
| filter | Un array con todos los elementos que cumplan la condición. | Cuando esperas encontrar varios resultados. |
find y filter son herramientas poderosas que te permiten trabajar con arrays de manera eficiente y clara. La clave está en saber cuándo usar cada uno: utiliza find para obtener un único resultado y filter para recopilar varios elementos.
¡La creatividad es el límite!
Fernando Morales
/
CEO, Designed By We
Descubre más desde Designed By We
Suscríbete y recibe las últimas entradas en tu correo electrónico.
