Filter en JavaScript: filtra sin mutar

Domina filter en JavaScript para seleccionar elementos con lógica clara, sin alterar el original. Entiende cómo se compara con map y reduce, aplica condiciones compuestas y resuelve retos típicos del día a día en datos. Aquí tienes ejemplos precisos y pautas prácticas.

¿Qué es filter y cómo funciona en arrays?

El método filter crea un nuevo array con los elementos que cumplen una condicional. A diferencia de map, que transforma pero mantiene la longitud, filter puede devolver desde cero hasta el mismo número de elementos. Nunca más que el original.

• No muta el array original.
• Se parece a hacer un query sobre datos.
• Puede devolver todos, ninguno o algunos elementos.

Ejemplos básicos en números:

const numbers = [1, 2, 3, 4, 5];

// mayores a 3 → [4, 5]
const gt3 = numbers.filter(n => n > 3);

// mayores o iguales a 3 → [3, 4, 5]
const gte3 = numbers.filter(n => n >= 3);

// pares → [2, 4]
const even = numbers.filter(n => n % 2 === 0);

// impares → [1, 3, 5]
const odd = numbers.filter(n => n % 2 !== 0);

// condición imposible → []
const none = numbers.filter(n => n > 100000);

¿Qué parámetros recibe el callback de filter?

El callback de filter acepta tres parámetros: el elemento actual, el index y el array completo. Úsalos si la lógica lo necesita.

const result = [10, 20, 30].filter((value, index, arr) => {
  // ejemplo: mantén valores en posición par
  return index % 2 === 0; // → [10, 30]
});

¿Qué métodos de arrays mutan el original y cuáles no?

Entender inmutabilidad evita efectos colaterales. En el repaso se destacó que la mayoría no muta, pero algunos sí.

• No mutan: foreach, map, filter.
• Sí mutan: sort, push, pop, unshift, split.

Clave: si tu flujo necesita preservar el estado original, prioriza los que no mutan y crea nuevos arrays.

¿Cómo aplicar filtros compuestos como motor de consultas?

Filter permite construir un motor de consultas con múltiples condiciones, por ejemplo, validar varias propiedades de un objeto en una sola pasada.

const customers = [
  { name: 'Jim', age: 21, active: true },
  { name: 'Lee', age: 23, active: false },
  { name: 'Ana', age: 19, active: true }
];

// mayores de 20 y activos
const selected = customers.filter(c => c.age > 20 && c.active);
// inicialmente devolvería solo 'Jim'.

// si luego activas a Lee → ahora devuelve dos personas
customers[1].active = true;
const selected2 = customers.filter(c => c.age > 20 && c.active);

¿Qué retos prácticos puedes intentar con filter?

Pon en práctica tu lógica y refuerza hábitos de no mutar el estado.

• Productos con reglas de negocio.
  • descuento > 15%.
  • precio < 500.
  • en stock disponible.

const products = [
  { name: 'A', price: 450, discount: 0.2, inStock: true },
  { name: 'B', price: 520, discount: 0.3, inStock: true },
  { name: 'C', price: 300, discount: 0.1, inStock: true }
];

const filtered = products.filter(p => 
  p.discount > 0.15 && p.price < 500 && p.inStock
);

• Eliminar sin modificar el original.
  • evita usar split por ser mutable.
  • crea un nuevo array que excluya el elemento.

const items = [
  { id: 1, name: 'X' },
  { id: 2, name: 'Y' },
  { id: 3, name: 'Z' }
];

const idToRemove = 2;
const withoutItem = items.filter(item => item.id !== idToRemove);
// items permanece igual; withoutItem es el nuevo array.

¿Tienes otra condición interesante que te gustaría convertir en filtro compuesto o un caso real que quieras optimizar sin mutar? Compártelo en comentarios y cuéntame cómo lo resolviste.