Cómo funciona filter() en JavaScript

Tienes una lista de productos y quieres quedarte solo con los que cuestan menos de 5000. Tienes una lista de usuarios y quieres los que están activos. Para ese tipo de operación — filtrar elementos de un array según una condición — JavaScript tiene filter().

¿Qué hace filter()?

filter() recorre un array y devuelve un nuevo array con los elementos que cumplen la condición que tú defines. Los elementos que no la cumplen quedan fuera. El array original no se modifica.

Sintaxis

const resultado = array.filter(function(elemento) {
  return condicion; // true = incluir, false = excluir
});

O con arrow function:

const resultado = array.filter(elemento => condicion);

Ejemplo 1: filtrar números

const numeros = [1, 8, 3, 12, 5, 20, 7];

const mayoresQueDiez = numeros.filter(n => n > 10);

console.log(mayoresQueDiez); // [12, 20]

filter prueba cada número con la condición n > 10 y construye un nuevo array con los que devuelven true.

Ejemplo 2: filtrar objetos

const productos = [
  { nombre: 'Laptop', precio: 850000 },
  { nombre: 'Mouse', precio: 25000 },
  { nombre: 'Teclado', precio: 45000 },
  { nombre: 'Monitor', precio: 320000 },
];

const baratos = productos.filter(p => p.precio < 50000);

console.log(baratos);
// [{ nombre: 'Mouse', precio: 25000 }, { nombre: 'Teclado', precio: 45000 }]

Ejemplo 3: filtrar strings

const nombres = ['Ana', 'Carlos', 'Alberto', 'María', 'Andrés'];

const queEmpiezanConA = nombres.filter(n => n.startsWith('A'));

console.log(queEmpiezanConA); // ['Ana', 'Alberto', 'Andrés']

Comparación con un for loop

filter hace lo mismo que esto pero de forma más concisa:

// Con for
const resultado = [];
for (let n of numeros) {
  if (n > 10) resultado.push(n);
}

// Con filter
const resultado = numeros.filter(n => n > 10);

Errores frecuentes

Olvidar el return: Si usas llaves {} en la función de filter, necesitas return explícito. Sin return, la función devuelve undefined (falsy) y ningún elemento pasa el filtro.

Esperar que modifique el array original: filter siempre devuelve un nuevo array. El original no cambia. Debes guardar el resultado en una variable.

Usar filter cuando necesitas forEach: Si solo quieres hacer algo con cada elemento (sin filtrar), usa forEach. filter es para cuando necesitas un subconjunto del array.