Filtrando Arrays con el Método Filter

En JavaScript, filter() es uno de los métodos de alto orden más potentes cuando se trata de trabajar con arrays. Su función principal es crear un nuevo array con todos los elementos que cumplen una condición específica sin modificar el array original. Es la herramienta ideal cuando necesitas filtrar datos, eliminar elementos no deseados o seleccionar solo los elementos que pasan una prueba lógica.

¿Qué es filter() y cómo funciona?

El método filter() crea un nuevo array con los elementos que pasan una prueba implementada en la función de callback. Este método es ideal cuando deseas reducir el número de elementos en un array basándote en una condición.

Sintaxis básica:

const nuevoArray = array.filter(callback(elemento, índice, array));

• elemento: El valor actual que se está iterando.
• índice(opcional): El índice del elemento actual.
• array(opcional): El array completo sobre el que se está iterando.

Ejemplo básico del método filter():

Supongamos que tenemos un array de números y queremos filtrar solo los números mayores a 10. Usando filter() podemos lograrlo de manera simple y clara:

const numeros = [5, 12, 8, 130, 44];

const mayoresADiez = numeros.filter(num => num > 10);

console.log(mayoresADiez);

[12, 130, 44]

En el ejemplo anterior se devuelve un nuevo array llamado mayoresADiez, que contiene solo los números mayores a 10. El array original numeros permanece sin cambios.

Beneficios de Usar filter() como Método de Alto Orden

El método filter() facilita el filtrado de elementos en arrays de manera clara y eficiente. Estos son algunos de sus beneficios más importantes:

1. Filtrar Datos de Manera Eficiente

El uso más común de filter() es seleccionar elementos específicos de un array que cumplan con un criterio lógico. Este método simplifica enormemente la tarea de eliminar elementos no deseados o seleccionar solo aquellos que te interesan, todo en una sola línea de código.

Ejemplo: Filtrar usuarios mayores de edad:

const usuarios = [
  { nombre: 'Carlos', edad: 30 },
  { nombre: 'Ana', edad: 17 },
  { nombre: 'Luis', edad: 25 }
];

const usuariosMayores = usuarios.filter(usuario => usuario.edad >= 18);

console.log(usuariosMayores);

[
 { nombre: 'Carlos', edad: 30 },
 { nombre: 'Luis', edad: 25 }
]

En este caso, filter() selecciona solo los usuarios que tienen 18 años o más (>=) y crea un nuevo array usuariosMayores con esos resultados.

2. Inmutabilidad del Array Original

Al igual que el método map y otros métodos de alto orden, este no modifica el array original. En su lugar devuelve un nuevo array con los elementos que cumplen la condición. Esto promueve la inmutabilidad y evita efectos secundarios no deseados en el código.

Ejemplo de inmutabilidad:

const frutas = ['Manzana', 'Plátano', 'Fresa', 'Pera', 'Uva'];

const frutasConE = frutas.filter(fruta => fruta.includes('e'));

console.log(frutasConE);
console.log(frutas);  // (el array original no se modifica)

["Fresa", "Pera"]
["Manzana", "Plátano", "Fresa", "Pera", "Uva"]

En el ejemplo anterior el método crea un nuevo array con las frutas que contienen la letra “e” en su nombre, pero el array original frutas permanece intacto.

3. Declarativo y Más Legible

Uno de los grandes beneficios de filter() es que permite escribir código de manera declarativa. En lugar de especificar cómo iterar sobre un array y qué condiciones comprobar, simplemente defines el qué quieres filtrar. Esto mejora la legibilidad y reduce el código innecesario. A continuación vemos una comparación entre los métodos for y filter()

Bucle for:

const numeros = [5, 12, 8, 130, 44];
const mayoresADiez = [];

for (let i = 0; i < numeros.length; i++) {
  if (numeros[i] > 10) {
    mayoresADiez.push(numeros[i]);
  }
}

console.log(mayoresADiez);

[12, 130, 44]

Con filter():

const numeros = [5, 12, 8, 130, 44];

const mayoresADiez = numeros.filter(num => num > 10);

console.log(mayoresADiez);

[12, 130, 44]

El uso de filter() hace que el código sea mucho más conciso y fácil de entender. No necesitas preocuparte por los detalles de la iteración o el manejo del array, solo te enfocas en la condición de filtrado.

4. Encadenamiento con Otros Métodos de Alto Orden

Al igual que otros métodos de alto orden, filter() se puede encadenar con métodos como map() o reduce() para realizar operaciones más complejas sobre los datos. Esto permite combinar filtrado, transformación y reducción de datos en un solo flujo de operaciones.

const productos = [
  { nombre: 'Laptop', precio: 1500 },
  { nombre: 'Teléfono', precio: 800 },
  { nombre: 'Tablet', precio: 500 }
];

const productosCaros = productos
  .filter(producto => producto.precio > 1000)  // Filtra productos con precio mayor a 1000
  .map(producto => producto.nombre);           // Obtiene solo los nombres

console.log(productosCaros);

["Laptop"]

En el anterior código, se selecciona los productos cuyo precio es mayor a 1000, y luego map() transforma ese array para obtener solo los nombres de esos productos.

Aspectos a Tener en Cuenta sobre filter()

Es importante recordar que el propósito de filter() es seleccionar los elementos que cumplen una condición, no modificar los elementos en sí. Si deseas transformar los elementos mientras los filtras, puedes combinar filter() con otros métodos aplicables a Arrays.

Conclusión

El método filter() es una herramienta clave dentro de los métodos de alto orden en arrays en JavaScript. Su capacidad para filtrar elementos de un array basándose en una condición lo convierte en la opción perfecta para tareas como la selección de datos, la eliminación de elementos no deseados o la simplificación de conjuntos de datos.

En el siguiente artículo, exploraremos el método reduce(), que permite reducir un array a un solo valor aplicando una función a cada uno de sus elementos.