Cómo usar el método .filter() de JavaScript con 7 ejemplos prácticos

Actualizado : 2023-10-29

¿Alguna vez has querido obtener solo los elementos de un array que cumplen una determinada condición? Por ejemplo, ¿qué tal si quieres obtener solo los números pares de un array de números?

Gracias a el método .filter() de javascript puedes crear un nuevo array con los elementos del array original que pasan una prueba (función) específica.

Es decir, el método .filter() te permite filtrar elementos de un array según una condición.

En este artículo, aprenderás cómo funciona el método .filter() de JavaScript y con 7 ejemplos prácticos y reales de cómo puedes usarlo en tus proyectos web.

¿Qué es el método .filter() de JavaScript?

El método .filter() es uno de los métodos que JavaScript ofrece para trabajar con arrays. Este método recibe como argumento una función (llamada función callback) que se ejecuta para cada elemento del array.

Esta función debe devolver un valor booleano (true o false) que indica si el elemento pasa o no la prueba. El método .filter() devuelve un nuevo array con los elementos que devuelven true.

La sintaxis del método .filter() es la siguiente:

let newArray = array.filter(callback(element, index, array));

Donde:

array es el array sobre el que se aplica el método.
callback es la función que se ejecuta para cada elemento del array.
element es el elemento actual del array que se está procesando.
index es el índice del elemento actual del array que se está procesando.
array es el array sobre el que se aplica el método (el mismo que el primer argumento).

El método .filter() no modifica el array original, sino que crea uno nuevo. Además, el método .filter() respeta el orden de los elementos del array original.

Veamos un ejemplo sencillo de cómo usar el método .filter():

// Creamos un array de números
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Creamos una función callback que devuelve true si el número es par
function isEven(number) {
  return number % 2 === 0;
}

// Aplicamos el método .filter() al array de números usando la función callback
let evenNumbers = numbers.filter(isEven);

// Mostramos el resultado por consola
console.log(evenNumbers); // [2, 4, 6, 8]

Como puedes ver, el método .filter() nos ha devuelto un nuevo array con solo los números pares del array original.

Ejemplo 1: Filtrar objetos por una propiedad

Supongamos que tenemos un array de objetos que representan personas con sus nombres y edades.

Queremos obtener un nuevo array con solo las personas mayores de edad (18 años o más).

Para ello podemos usar el método .filter() con una función callback que compruebe la propiedad edad de cada objeto.

// Creamos un array de objetos que representan personas
let people = [
  { name: "Ana", age: 25 },
  { name: "Beto", age: 17 },
  { name: "Carlos", age: 19 },
  { name: "Diana", age: 15 },
];

// Creamos una función callback que devuelve true si la persona es mayor de edad
function isAdult(person) {
  return person.age >= 18;
}

// Aplicamos el método .filter() al array de personas usando la función callback
let adults = people.filter(isAdult);

// Mostramos el resultado por consola
console.log(adults); // [{ name: "Ana", age: 25 }, { name: "Carlos", age: 19 }]

Como puedes ver nos ha devuelto un nuevo array con solo las personas mayores de edad del array original.

Ejemplo 2: Filtrar elementos que coinciden con una expresión regular

Supongamos que tenemos un array de cadenas que representan correos electrónicos.

Queremos obtener un nuevo array con solo los correos electrónicos que tienen el dominio “@gmail.com”.

Para ello, podemos usar el método .filter() con una función callback que use una expresión regular para comprobar si la cadena coincide con el patrón deseado.

// Creamos un array de cadenas que representan correos electrónicos
let emails = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];

// Creamos una expresión regular que coincide con el dominio "@gmail.com"
let regex = /@gmail\.com$/;

// Creamos una función callback que devuelve true si el correo electrónico coincide con la expresión regular
function isGmail(email) {
  return regex.test(email);
}

// Aplicamos el método .filter() al array de correos electrónicos usando la función callback
let gmails = emails.filter(isGmail);

// Mostramos el resultado por consola
console.log(gmails); // ["[email protected]", "[email protected]"]

Nos ha devuelto un nuevo array con solo los correos electrónicos que tienen el dominio “@gmail.com”.

Ejemplo 3: Filtrar elementos que cumplen una condición numérica

Supongamos que tenemos un array de números que representan las calificaciones de los estudiantes de una clase.

Queremos obtener un nuevo array con solo las calificaciones aprobadas (mayores o iguales a 5).

Para esto, podemos usar el método .filter() con una función callback que compare el número con el umbral deseado.

// Creamos un array de números que representan las calificaciones de los estudiantes
let grades = [4.5, 6.7, 3.2, 8.9, 5.4, 7.3, 4.8, 6.1];

// Creamos una función callback que devuelve true si la calificación es aprobada
function isPassed(grade) {
  return grade >= 5;
}

// Aplicamos el método .filter() al array de calificaciones usando la función callback
let passedGrades = grades.filter(isPassed);

// Mostramos el resultado por consola
console.log(passedGrades); // [6.7, 8.9, 5.4, 7.3, 6.1]

Ejemplo 4: Filtrar elementos que son únicos

Supongamos que tenemos un array de números que contiene algunos elementos repetidos. Queremos obtener un nuevo array con solo los elementos únicos (es decir eliminar los elementos repetidos):

// Creamos un array de números que contiene algunos elementos repetidos
let numbers = [1, 2, 3, 4, 5, 3, 2, 6, 7, 8, 9, 8];

// Creamos una función callback que devuelve true si el elemento es único
function isUnique(element, index, array) {
  return array.indexOf(element) === index;
}

// Aplicamos el método .filter() al array de números usando la función callback
let uniqueNumbers = numbers.filter(isUnique);

// Mostramos el resultado por consola
console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

Ejemplo 5: Filtrar elementos que son falsy

Supongamos que tenemos un array de valores mixtos que pueden ser truthy o falsy. Queremos obtener un nuevo array con solo los elementos falsy (que se evalúan como false en una expresión booleana).

Para ello, podemos usar el método .filter() con una función callback que devuelva el mismo elemento.

// Creamos un array de valores mixtos que pueden ser truthy o falsy
let values = [0, 1, "", "Hola", null, true, undefined, false, NaN, 2];

// Creamos una función callback que devuelve el mismo elemento
function isFalsy(element) {
  /*
    gracias al operador de negación (!) true si element es "falsy" y false si element es "truthy"
  */
  return !element;
}

// Aplicamos el método .filter() al array de valores usando la función callback
let falsyValues = values.filter(isFalsy);

// Mostramos el resultado por consola
console.log(falsyValues); // [0, "", null, undefined, false, NaN]

Ejemplo 6: Filtrar elementos que pertenecen a otro array

tenemos dos arrays de números y queremos obtener un nuevo array con solo los elementos del primer array que también están en el segundo array. Es decir, queremos obtener la intersección de los dos arrays.

Podemos usar el método .filter() con una función callback que use el método .includes() para comprobar si el elemento actual está en el otro array.

// Creamos dos arrays de números
let array1 = [1, 2, 3, 4, 5];
let array2 = [3, 4, 5, 6, 7];

// Creamos una función callback que devuelve true si el elemento está en el otro array
function isInArray2(element) {
  return array2.includes(element);
}

// Aplicamos el método .filter() al primer array usando la función callback
let intersection = array1.filter(isInArray2);

// Mostramos el resultado por consola
console.log(intersection); // [3, 4, 5]

El método .filter() de JavaScript es muy versátil

Esperó que hayas aprendido a usar este método con confianza y eficiencia. Si te ha gustado este artículo, no dudes en compartirlo también puedes escribirme en twitter con tu opinión o cualquier duda que tengas. ¡Muchas gracias por leerme! 😊

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi