Cómo filter elimina elementos sin mutar arrays

Resumen

El método filter en JavaScript te permite recorrer un array y quedarte solo con los elementos que cumplen una condición, sin alterar el array original. Es una herramienta clave para desarrolladores que trabajan con listas, motores de búsqueda o consultas tipo query, y funciona como un cedazo: entran todos, salen los que pasan la prueba.

¿Qué hace el método filter y en qué se diferencia de map?

El comportamiento de filter recuerda al de una consulta SQL simplificada. Recorre cada elemento del array, evalúa una condicional y decide si ese elemento entra al nuevo array o se descarta.

La diferencia con map está en la cantidad de elementos que devuelve. Con map, si entras con un array de cinco, sales con un array de cinco: cambia el estado, no el tamaño. Con filter, en cambio, puedes terminar con:

  • El array completo, si todos los elementos cumplen la condición.
  • Un array vacío, si ninguno la cumple.
  • Cualquier cantidad intermedia según los resultados [2:00].

Lo que nunca vas a ver es un array de salida más grande que el original. Esa regla es fija.

¿Filter muta el array original? No. Filter crea un nuevo array y deja intacto el original, igual que map o forEach. Los métodos que sí mutan son sort, push, pop, unshift y splice [3:30].

¿Cómo se escribe un filter básico en JavaScript?

La sintaxis es directa. Llamas a filter sobre un array y le pasas una función que retorna true o false. Los elementos que retornen true se conservan.

Dentro de esa función tienes acceso a tres parámetros, igual que en map: el elemento que estás iterando, el index (la posición) y el array completo. No estás obligado a usarlos todos, pero están disponibles cuando los necesites.

Un ejemplo mínimo sobre números:

javascript const numbers = [1, 2, 3, 4, 5]; const filtered = numbers.filter(number => number >= 3); // resultado: [3, 4, 5]

Si cambias el operador a > estricto, el tres queda fuera. Si preguntas por pares con number % 2 === 0, recibes solo pares. Si preguntas por algo imposible como number > 100, obtienes un array vacío. La lógica del condicional manda [5:30].

¿Cómo filtrar objetos con condiciones múltiples?

Aquí es donde filter empieza a parecerse a un motor de consultas. Imagina un array de clientes con propiedades como edad y estado activo. Puedes combinar condiciones dentro del callback:

javascript const filteredCustomers = customers.filter( customer => customer.age > 20 && customer.isActive );

Esa consulta te devuelve únicamente los clientes mayores de 20 años que además estén activos. Puedes encadenar tantos operadores lógicos como necesites, o incluso aplicar varios filter seguidos para construir búsquedas complejas [7:40].

¿Cómo eliminar un elemento sin mutar el array original?

Este es el truco más útil de filter en proyectos reales. Cuando quieres eliminar un elemento de un array, la reacción típica es usar splice, pero splice modifica el array original. Si trabajas con estado inmutable, como en React o Redux, eso rompe tu flujo.

La alternativa es usar filter para construir un nuevo array que excluya el elemento no deseado:

javascript const newArray = items.filter(item => item.id !== idToRemove);

El resultado es casi idéntico a una eliminación, pero con una ventaja enorme: el array original queda intacto y tú te quedas con una copia limpia sin ese elemento.

¿Filter puede reemplazar a splice? Sí, cuando el objetivo es eliminar sin mutar. Splice modifica el array original; filter devuelve uno nuevo. Para código inmutable, filter es la opción correcta [10:15].

Reto práctico para entrenar tu lógica con filter

Para consolidar el método, hay dos ejercicios que valen la pena. El primero es construir un filtro de productos que cumpla tres condiciones a la vez:

  1. Descuento mayor al 15%.
  2. Precio menor a 500 dólares.
  3. Disponibilidad en stock.

El segundo reto es reescribir la función de eliminar elementos de un proyecto sin usar splice. La pista ya está sobre la mesa: se resuelve con filter, creando un array nuevo que omita el elemento objetivo.

Cuéntame en los comentarios cómo resolviste ambos retos y qué otros métodos de arrays clasificaste entre mutables e inmutables.