Cómo filtrar elementos en un array con el método filter() en JavaScript

Resumen: en este tutorial, aprenderás a usar el método filter() de Array en JavaScript para filtrar elementos en un arreglo.

Introducción al método filter() de array en JavaScript

Una de las tareas más comunes cuando se trabaja con una matriz es crear una nueva matriz que contenga un subconjunto de elementos de la matriz original.

Suponga que tiene un array de objetos cities donde cada objeto contiene dos propiedades: name y population.

let cities = [
    {name: 'Los Angeles', population: 3792621},
    {name: 'New York', population: 8175133},
    {name: 'Chicago', population: 2695598},
    {name: 'Houston', population: 2099451},
    {name: 'Philadelphia', population: 1526006}
];

Para encontrar la ciudad cuya población es mayor a 3 millones, normalmente recorrería los elementos de la matriz usando un bucle for y comprobar si el valor de la propiedad de población cumple la condición, así:

let bigCities = [];
for (let i = 0; i < cities.length; i++) {
    if (cities[i].population > 3000000) {
        bigCities.push(cities[i]);
    }
}
console.log(bigCities);

Resultado:

[
  { name: 'Los Angeles', population: 3792621 },
  { name: 'New York', population: 8175133 }
]

Un Array en JavaScript proporciona el método filter() que permite realizar esta tarea de una manera más breve y limpia.

El siguiente ejemplo devuelve el mismo resultado que el ejemplo anterior:

let bigCities = cities.filter(function (e) {
    return e.population > 3000000;
});
console.log(bigCities);

En este ejemplo, llamamos al método filter() del objeto de array de ciudades y pasamos una función que prueba cada elemento.

Dentro de la función, verificamos si la población de cada ciudad en el array es mayor a 3 millones. Si es el caso, la función devuelve true o false en caso contrario.

El método filter() incluye los únicos elementos en el array de resultados si cumplen la prueba en la función callback.

A partir de ES6, puedes usar la función de flecha para hacerlo más conciso:

let bigCities = cities.filter(city => city.population > 3000000);

console.log(bigCities);

Método filter() de Array en JavaScript a detalle

A continuación se ilustra la sintaxis del método filter():

arrayObject.filter(callback, contextObject);

El método filter() crea un nuevo array con todos los elementos que pasan la prueba implementada por la función callback().

Internamente, el método filter() itera sobre cada elemento del array y pasa cada elemento a la función callback. Si la función callback devuelve verdadero, incluye el elemento en el array de devolución.

El método filter() acepta dos argumentos con nombre: una función callback y un objeto opcional.

Al igual que otros métodos iterativos del objeto Array, como every(), some(), map() y forEach(), la función callback tiene el siguiente formato:

function callback(currentElement, index, array){
   // ...
}

La función callback toma tres argumentos:

• El argumento currentElement es el elemento actual en la matriz que está siendo procesado por la función callback.
• El índice del elemento actual que está siendo procesado por la función callback.
• El objeto array que se está trabajando.

Los argumentos index y array son opcionales.

El argumento contexObject del método filter() es opcional. Si pasas este valor, puedes hacer referencia a él usando la palabra clave this dentro de la función callback.

Es importante tener en cuenta que el método filter() no cambia el array original.

Más ejemplos del método filter() de Array en JavaScript

Debido a que el método filter() devuelve una nuevo arreglo, puedes encadenar el resultado con otros métodos de array como sort() y map().

Por ejemplo, lo siguiente ilustra cómo encadenar los tres métodos: filter(), sort() y map():

cities
    .filter(city => city.population < 3000000)
    .sort((c1, c2) => c1.population - c2.population)
    .map(city => console.log(city.name + ':' + city.population));

Resultado:

Philadelphia:1526006
Houston:2099451
Chicago:2695598

Cómo funciona.

• Primero, filtra las ciudades cuya población sea inferior a 3 millones usando el método filter().
• En segundo lugar, ordena las ciudades resultantes por población en orden descendente utilizando el método sort().
• En tercer lugar, envía el elemento del array a la consola mediante el método map().

El siguiente ejemplo ilustra el uso del argumento contextObject que especifica un objeto al que se puede hacer referencia en la función callback() usando la palabra clave this

function isInRange(value) {
    if (typeof value !== 'number') {
        return false;
    }
    return value >= this.lower && value <= this.upper;
}

let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example'];

let range = {
    lower: 1,
    upper: 10
};

let numberInRange = data.filter(isInRange, range);

console.log(numberInRange); // [10, 1, 5]

Resultado:

[ 10, 1, 5 ]

Cómo funciona.

• Primero, se define la función isInRange() que verifica si su argumento es un número y está en el rango especificado por las propiedades lower y upper de un objeto.
• A continuación, define el array de datos mixtos que contenga números, cadenas e indefinidos.
• Luego, define el objeto range con dos propiedades inferior y superior.
• Después de eso, llama a los métodos filter() de la matriz de datos y pasa la función isInRange() y el objeto range. Debido a que pasamos el objeto range, dentro de la función isInRange(), la palabra clave this hace referencia al objeto range.
• Finalmente, muestra el array de resultados en la consola.

En este tutorial, has aprendido a usar el método filter() de Array en JavaScript para filtrar elementos en un arreglo en función de una prueba proporcionada por una función callback.