Cómo filter elimina elementos sin mutar arrays

Curso de Manipulación Avanzada de Datos con JavaScript

Contenido del curso

No sé dónde empezar

Grabacion

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:35

Cómo filter elimina elementos sin mutar arrays

Curso de Manipulación Avanzada de Datos con JavaScript

Clase 6 de 24

Clase 6 / 24

Recursos

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:

Descuento mayor al 15%.
Precio menor a 500 dólares.
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.

Grabacion

Transformar, filtrar y agrupar arrays en JavaScript

Clona y ejecuta FreeHabits localmente

Map avanzado: item, index y array completo

Exportar CSV desde el navegador con map

Mutabilidad vs inmutabilidad en arrays de JavaScript

Cómo filter elimina elementos sin mutar arrays

Filtros dinámicos con FormData en JavaScript

Observer Pattern para filtros reactivos en JS

Filtros reactivos con Observer Pattern en JS

Persistencia con local storage y repository pattern

Cómo calcular promedios con reduce en JavaScript

Cómo crear un histograma con reduce

Object.groupBy vs reduce en JavaScript

Cómo crear un mini dashboard con reduce en JavaScript

flat y flatMap para arrays anidados en JS

flatMap y reduce para agrupar hábitos por día

Gráfica de barras con Chart.js en Vanilla JS

some, every e includes para validar arrays

Cómo convertir arrays y strings con join y split

Fusionar arrays sin mutar datos con spread

Inmutabilidad en arrays con spread y slice

Map vs Array: cuándo usar cada uno

Map + array de IDs para acelerar búsquedas

Cierre del curso de arrays avanzados en JS

Cómo filter elimina elementos sin mutar arrays

Progreso del curso

Grabacion

Recursos

Recursos