Cómo Buscar Elementos en un Array en JavaScript con find y filter

Fuente: Unsplash

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.
  • index y array (opcionales): El índice y el array completo.
  • thisArg: Opcional, valor usado como this dentro 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: 12

Explicación

  • find revisa cada número del array.
  • El primer número que cumple num > 10 es 12, 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

  • filter revisa 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étodoDevuelveUso ideal
findEl primer elemento que cumpla la condición.Cuando solo necesitas un único elemento.
filterUn 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descubre más desde Designed By We

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo