Filter JavaScript: Qué es y Ejemplos Prácticos

• 25/11/2024

Función filter Javascript, ¿qué es? y ejemplos prácticos

JavaScript es uno de los lenguajes más usados en el desarrollo web, y uno de sus aspectos más interesantes es su capacidad para manejar arrays de manera eficiente mediante funciones como filter. Esta poderosa herramienta puede simplificar y optimizar tus proyectos, además de hacer tu código más limpio y legible.

En este artículo, descubrirás qué es la función filter en JavaScript, cómo usarla paso a paso, ejemplos prácticos que puedes aplicar hoy mismo, y comparaciones con otros métodos como map o forEach. ¡Acompáñanos en este recorrido para dominar una de las herramientas más útiles de JavaScript!

Únete a nuestra comunidad de Discord

Introducción a la función filter en JavaScript

La función filter en JavaScript es un método incorporado en los arrays que permite filtrar elementos según un criterio específico. Esto significa que puedes crear un nuevo array que contenga solo los elementos que cumplan una condición establecida.

¿Por qué deberías usarla? Porque filter te ahorra escribir código repetitivo y hace que tus scripts sean más legibles. Veamos un ejemplo sencillo:

const numeros = [1, 2, 3, 4, 5, 6];
const numerosPares = numeros.filter(numero => numero % 2 === 0);
console.log(numerosPares); // [2, 4, 6]

En este caso, hemos creado un array nuevo con solo los números pares. Fácil, ¿verdad?

Cómo funciona la función filter en JavaScript

Filter trabaja iterando sobre cada elemento de un array y ejecutando una función de callback que devuelve true o false. Si la función devuelve true, el elemento es incluido en el nuevo array; si no, es descartado.

Estructura básica del método filter:

array.filter(callback(elemento, indice, arrayOriginal));

Parámetros principales:

1. elemento: El elemento actual que está siendo procesado.

2. índice (opcional): La posición del elemento en el array.

3. arrayOriginal (opcional): El array completo que está siendo iterado.

Ejemplo práctico:

const palabras = ['sol', 'luna', 'estrellas', 'mar', 'cielo'];
const palabrasLargas = palabras.filter(palabra => palabra.length > 3);
console.log(palabrasLargas); // ['luna', 'estrellas', 'cielo']

Consejo: Usar nombres descriptivos en los parámetros del callback mejora la legibilidad de tu código.

---

Ejemplos prácticos de la función filter en JavaScript

Los ejemplos son una excelente manera de aprender a aplicar filter. Aquí te mostramos casos prácticos:

Filtrar elementos específicos de un array

Supongamos que tienes una lista de números y solo necesitas los mayores a 10:

const numeros = [5, 12, 8, 130, 44];
const mayoresADiez = numeros.filter(numero => numero > 10);
console.log(mayoresADiez); // [12, 130, 44]

Filtrar objetos basados en propiedades

Si trabajas con datos más complejos, como objetos, también puedes usar filter.

const personas = [
  { nombre: 'Ana', edad: 20 },
  { nombre: 'Carlos', edad: 17 },
  { nombre: 'Bea', edad: 25 },
];
const mayoresDeEdad = personas.filter(persona => persona.edad >= 18);
console.log(mayoresDeEdad);
// [{ nombre: 'Ana', edad: 20 }, { nombre: 'Bea', edad: 25 }]

---

Uso de filter con otras funciones de JavaScript

La verdadera potencia de filter se aprecia al combinarla con otras funciones útiles de JavaScript. Al hacerlo, puedes crear flujos de trabajo eficientes para procesar datos complejos. Aquí exploraremos cómo usarla junto a métodos como map, reduce, y sort, entre otros.

Combinación de filter y map

Al usar filter para seleccionar elementos y map para transformarlos, puedes realizar operaciones como filtrar productos baratos y mostrar solo sus nombres.

const productos = [
  { nombre: 'Monitor', precio: 300 },
  { nombre: 'Mouse', precio: 20 },
  { nombre: 'Laptop', precio: 1000 },
];
const nombresProductosBaratos = productos
  .filter(producto => producto.precio < 500)
  .map(producto => producto.nombre);
console.log(nombresProductosBaratos); // ['Monitor', 'Mouse']

Uso de filter con reduce

Con reduce, puedes tomar los resultados de filter y calcular un valor agregado, como la suma total de precios de los productos filtrados.

const productos = [
  { nombre: 'Teclado', precio: 50 },
  { nombre: 'Auriculares', precio: 80 },
  { nombre: 'Monitor', precio: 150 },
];
const totalProductosBaratos = productos
  .filter(producto => producto.precio < 100)
  .reduce((total, producto) => total + producto.precio, 0);
console.log(totalProductosBaratos); // 130

Filter y sort para ordenar elementos filtrados

Después de filtrar un conjunto de datos, puedes ordenarlos utilizando sort.

const estudiantes = [
  { nombre: 'Laura', calificacion: 85 },
  { nombre: 'Carlos', calificacion: 92 },
  { nombre: 'Ana', calificacion: 78 },
];
const estudiantesDestacados = estudiantes
  .filter(estudiante => estudiante.calificacion > 80)
  .sort((a, b) => b.calificacion - a.calificacion);
console.log(estudiantesDestacados);
// [{ nombre: 'Carlos', calificacion: 92 }, { nombre: 'Laura', calificacion: 85 }]

Uso combinado de filter y every

Puedes verificar si todos los elementos filtrados cumplen una condición adicional usando every.

const productos = [
  { nombre: 'Laptop', precio: 1000 },
  { nombre: 'Celular', precio: 800 },
  { nombre: 'Tablet', precio: 500 },
];
const productosCaros = productos.filter(producto => producto.precio > 700);
const todosSonCaros = productosCaros.every(producto => producto.precio > 700);
console.log(todosSonCaros); // true

Filter y find para obtener un resultado específico

Si necesitas encontrar un elemento que cumpla un criterio después de filtrar, combina filter con find.

const autos = [
  { marca: 'Toyota', año: 2020 },
  { marca: 'Ford', año: 2018 },
  { marca: 'Honda', año: 2020 },
];
const auto2020 = autos.filter(auto => auto.año === 2020).find(auto => auto.marca === 'Honda');
console.log(auto2020); // { marca: 'Honda', año: 2020 }

Con estas combinaciones, puedes maximizar la utilidad de filter y otros métodos de arrays para crear scripts más potentes y eficientes.

Combina filter con otros métodos como map o reduce para realizar operaciones más complejas.

const autos = [
  { marca: 'Toyota', año: 2020 },
  { marca: 'Ford', año: 2018 },
  { marca: 'Honda', año: 2020 },
];
const auto2020 = autos.filter(auto => auto.año === 2020).find(auto => auto.marca === 'Honda');
console.log(auto2020); // { marca: 'Honda', año: 2020 }

---

Beneficios de usar filter en tus proyectos

1. Código más limpio y legible: Al evitar bucles for redundantes.

2. Mayor eficiencia: Filtras elementos en una sola línea de código.

3. Flexibilidad: Compatible con cualquier tipo de dato, desde números hasta objetos.

4. Compatibilidad: Totalmente soportada en navegadores modernos.

---

Errores comunes al usar filter y cómo evitarlos

• - Olvidar retornar un valor booleano: El callback debe devolver true o false, de lo contrario, filter no funcionará como esperas.

// Error
const resultado = numeros.filter(numero => numero + 2);
// Correcto
const resultado = numeros.filter(numero => (numero + 2) > 10);

• - Confundir filter con map: Mientras que filter reduce la cantidad de elementos, map transforma cada elemento.

---

Comparación de filter con otros métodos de array en JavaScript

Diferencias clave entre filter y map

Cuándo usar filter frente a forEach

Usa filter si necesitas un nuevo array como resultado. Opta por forEach para iterar elementos sin necesidad de devolver uno nuevo.

Conclusión

La función filter en JavaScript es una herramienta esencial para cualquier desarrollador. Desde filtrar números en un array hasta trabajar con datos más complejos, su versatilidad es incomparable. Aplicar filter correctamente hará tu código más eficiente y legible.

Recuerda explorar otros métodos de array como map y reduce para maximizar tus habilidades en programación en JavaScript.